Lập trình web Asp.net với C# - Chương 8: Công nghệ và dịch vụ web

Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1 LẬP TRÌNH WEB ASP.NET VỚI C# 324 Chương 8 Công Nghệ Và Dịch Vụ Web Khoa CNTT,Trường CĐ CNTT TP.HCM 8.1. Dịch vụ web – Webservice 8.2 Công nghệ web 2 – Ajax 325 8.1. Webservice – nội dung Khoa CNTT,Trường CĐ CNTT TP.HCM  GIỚI THIỆU CÁC ỨNG DỤNG PHÂN TÁN  KIẾN TRÚC HƯỚNG DỊCH VỤ WEB SERVICE & LẬP TRÌNH WEB SERVICE 326 8.1.1 CÁC ỨNG DỤNG PHÂN TÁN Khoa CNTT Trường CĐ CNTT TP.HCM Máy tính Máy tính Dữ liệu Ứng dụng phân tán Dữ liệu 327 8.1.1 CÁC ỨNG DỤNG PHÂN TÁN Khoa CNTT Trường CĐ CNTT TP.HCM  Xem thông tin thời tiết  Thông tin ngoại tệ  Dịch tự động  Kiểm tra thông tin thẻ  Xem thông tin sân bay  Đặt phòng khách sạn  . 328 8.1.2 VẤN ĐỀ KHI THIẾT KẾ HỆ PHÂN TÁN Khoa CNTT Trường CĐ CNTT TP.HCM Internet Firewall Firewall Firewall Provider C Web Service Client 329 8.1.3 WEB SERVICE Khoa CNTT Trường CĐ CNTT TP.HCM WEB SERVICE LÀ GÌ?  KIẾN TRÚC WEB SERVICE  XÂY DỰNG WEB SERVICE  SỬ DỤNG WEB SERVICE 330 8.1.3.1 ĐỊNH NGHĨA Khoa CNTT Trường CĐ CNTT TP.HCM • Là một tập các phương thức được gọi từ xa thông qua một địa chỉ URL do một tổ chức, cá nhân cung cấp. • Giao tiếp theo định dạng chuẩn XML • Được sử dụng để tạo các ứng dụng phân tán. 331 8.1.3.2 ĐẶC ĐIỂM Khoa CNTT Trường CĐ CNTT TP.HCM 1. Không phụ thuộc vào ngôn ngữ lập trình 2. Được truy cập từ bất cứ ứng dụng nào 3. Hỗ trợ thao tác giữa các thành phần không đồng nhất 4. Chi phí phát triển thấp 5. Dễ bảo trì 332 8.1.3.3 KIẾN TRÚC WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM Service Consumer Publish Find Bind Service Provider Service Broker 333 8.1.3.4 XÂY DỰNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Tạo mới 1 webservice trong VS2010 334 Ví dụ ứng dụng : cộng 2 số nguyên Khoa CNTT Trường CĐ CNTT TP.HCM  Đặt tên là file là cong2so.asmx [WebService(Namespace = "")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class Cong2So : System.Web.Services.WebService { public Cong2So () { } [WebMethod] public int cong(int a, int b) { return a + b; } }  Trong file Conghaiso.cs, cài đặt phương thức cộng: 335 8.1.3.4 KIỂM TRA WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Chạy file cong2so.asmx để kiểm tra phương thức webservice vừa tạo 336 8.1.3.4 Thử nghiệm Khoa CNTT Trường CĐ CNTT TP.HCM  Kết quả : 337 8.1.3.4 ngôn ngữ WSDL Khoa CNTT Trường CĐ CNTT TP.HCM  Trang webservice được mô tả bằng ngôn ngữ WSDL (Web Service Description Languague) 338 8.1.3.5 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Sử dụng webservice trong ASP.NET protected void Button1_Click(object sender, EventArgs e) { CongHaiSo c2s = new CongHaiSo(); int a = int.Parse(TextBox1.Text); int b = int.Parse(TextBox2.Text); Label1.Text = c2s.Cong2So(a, b).ToString(); }  Kết quả : 339 8.1.3.5 SỬ DỤNG WEBSERVICE CÓ SẴN Khoa CNTT Trường CĐ CNTT TP.HCM  Bước 1 : Add Web Reference 340 8.1.3.5 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Bước 2 : Nhập thông tin đường dẫn 341 8.1.3.4 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM 342 8.1.3.5 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Bước 3 : Thiết kế giao diện 343 8.1.3.4 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Bước 4: Xử lý code : 344 8.1.3.5 SỬ DỤNG WEBSERVICE Khoa CNTT Trường CĐ CNTT TP.HCM  Kết quả được lấy ngày 10/11, luc 12h00 345 8.1.3.6 BÀI TẬP Khoa CNTT Trường CĐ CNTT TP.HCM  Tìm hiểu cách viết webservice kết nối CSDL  Tìm cách sử dụng các nguồn webservice hiện đang có trên internet Ứng dụng vào đồ án ASP.NET 346 8.2. CÔNG NGHỆ WEB AJAX Khoa CNTT,Trường CĐ CNTT TP.HCM 347 8.2. CÔNG NGHỆ WEB AJAX Khoa CNTT,Trường CĐ CNTT TP.HCM  GIỚI THIỆU AJAX  DÙNG AJAX VỚI ĐỐI TƯỢNG XMLHTTPREQUEST  DÙNG AJAX VỚI THƯ VIỆN AJAX ASP.NET 348 8.2.1.1 Giới thiệu Ajax Trường CĐ CNTT TpHCM • Mỗi khi Browser gửi yêu cầu về server, bắt buột phải reload lại toàn bộ trang web • Công nghệ Ajax giúp Browser gửi yêu cầu đến server và nhận respone mà không cần load lại toàn bộ trang • Công nghệ này có thể thực hiện bất đồng bộ (người dùng vẫn có thể tương tác với trang web trong khi vẫn chờ nhận response từ server) • Đây là công nghệ đứng đằng sau các ứng dụng lớn như : Gmail, GoogleSuggest, GoogleMap, 349 8.2.1.1 Giới thiệu Ajax Trường CĐ CNTT TpHCM 350 8.2.1.2. Ajax là gì? Trường CĐ CNTT TpHCM Ajax : Asynchronous Javascript and XML (Truy cập dữ liệu không đồng bộ bằng Javascript & XML )  Là một kỹ thuật kết hợp 2 tính năng mạnh của Javascript được các nhà phát triển đánh giá rất cao. Gửi yêu cầu đến máy chủ mà không cần nạp lại trang.  Phân tích và làm việc với XML  Các ứng dụng xoay quanh 1 tính năng mới, gọi là XMLHttpRequest 351 8.2.1.3. Mô hình AJAX Trường CĐ CNTT TpHCM <= Mô hình Client-Server thông thường Mô hình Client-Server AJAX => 352 8.2.1.3. Đặc điểm của Ajax Trường CĐ CNTT TpHCM  XHTML và CSS : Cung cấp các tiêu chuẩn để thể hiện nội dung trang web với người dùng.  Document Object Model (DOM) : Cung cấp cấu trúc cho phép hiển thị nội dung và các tương tác liên quan. DOM mở ra nhiều cách thức mạnh cho người dùng khi muốn truy cập và thao tác với đối tượng nằm trong một văn bản bất kỳ. 353 8.2.1.3. Đặc điểm của Ajax Trường CĐ CNTT TpHCM  Trao đổi và xử lý dữ liệu dùng XML và XSLT : Cung cấp kiểu định dạng cho dữ liệu, cho phép thao tác, truyền tải và trao đổi giữa client và server  Thu hồi dữ liệu bất đối xứng (XMLHttpRequest)  Dùng JavaScript hợp nhất tất cả đối tượng với nhau một cách hiệu quả (JavaScript ở đây là ECMAScript, chuẩn của ECMA, không phải của MS) 354 Web Application truyền thống Trường CĐ CNTT TpHCM  Client sẽ gửi HTTP Request đến web server và webserver sẽ gửi trả response chứa các thông tin yêu cầu dưới dạng HTML và CSS  Người dùng sẽ phải chờ trang được load lên hết rồi mới có thể thao tác tiếp 355 Web AJAX Application Trường CĐ CNTT TpHCM  Việc truyền tải dữ liệu này được thực hiện trên Client => giảm tải rất nhiều cho Server  Người dùng cảm thấy trang web được hiển thị ngay tức thời (không cần nạp lại trang)  Sự kết hợp giữa XHTML và CSS làm cho việc trình bày giao diện tốt hơn nhiều và giảm đáng kể dung lượng phải nạp. 356 Web AJAX Application Trường CĐ CNTT TpHCM  AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này.  Khi đó các yêu cầu request và nhận response sẽ do AJAX Engine thực hiện. Thay vì gửi trả dữ liệu về dưới dạng HTML và CSS cho trình duyệt, web server sẽ gửi trả về dạng XML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML và CSS cho trình duyệt hiển thị 357 8.2.4. Các kiến thức liên quan Trường CĐ CNTT TpHCM • Ngôn ngữ XHTML & CSS • Mô hình DOM (Document Object Model) • Ngôn ngữ XML và XSLT • Ngôn ngữ lập trình Javascript 358 XHTML Trường CĐ CNTT TpHCM • XHTML là ngôn ngữ HTML được viết theo chuẩn của XML tức là luôn có thẻ mở và thẻ đóng cho từng nút. • Giá trị của các thuộc tính phải được đặt trong dấu “” <input type="submit" class="button" value="Đăng nhập" /> 359 CSS – Cascade Style Sheet Trường CĐ CNTT TpHCM • Ngôn ngữ thiết kế web p{ font-family: Times New Roman; font-size : 10; } .newstyle{ color: blue; } 360 DOM – Document Object Model Trường CĐ CNTT TpHCM • Mô hình đối tượng tài liệu (thường có dạng cây), dùng để mô tả và truy xuất các thành phần trong tài liệu HTML và XML. s = document.getElementById(“text”).value; alert(s); 361 XML Trường CĐ CNTT TpHCM • Ngôn ngữ lưu trữ dữ liệu có cấu trúc SV01 Nguyen Minh A SV02 Nguyen Minh B 362 Javascript Trường CĐ CNTT TpHCM • Ngôn ngữ lập trình kịch bản được dùng trong các trang web. //code var t; t = 5; • Chú ý : các function trong javascript cho phép chuyền tham số là cũng một function. 363 2. Ajax với đối tượng XmlHttpRequest Trường CĐ CNTT TpHCM 364 8.2.3. Đối tượng XmlHttpRequest Trường CĐ CNTT TpHCM • Một đối tượng Javascript cho phép tạo các HTTP request không đồng bộ. • XmlHttpRequest sẽ tạo các request từ một sự kiện Javascript. • Một hàm gọi ngược (call back) của Javascript được gọi tại mỗi trạng thái của Request và nhận đáp trả Response từ Server. 365 Cách thức hoạt động Trường CĐ CNTT TpHCM Client Server Defaul.aspx Hello() Click Handle() 12/2/2010 5:10:2010 Request Response Nếu có 366 Các phương thức của XmlHttpRequest Trường CĐ CNTT TpHCM 367 Các thuộc tính của XmlHttpRequest Trường CĐ CNTT TpHCM 368 8.2.5. Lập trình AJAX Trường CĐ CNTT TpHCM Các bước thực hiện : 1. Tạo một trang web 2. Tạo một hàm để lấy đối tượng XmlHttpRequest 3. Viết hàm để bắt tình trạng của XmlHttpRequest 4. Tạo một hàm xử lý kết quả trả về 5. Kết nối tất cả vào trang web 369 Ví dụ 1 : Thay đổi ngày giờ Trường CĐ CNTT TpHCM 370 Ví dụ 1 : Thay đổi ngày giờ Trường CĐ CNTT TpHCM Tạo trang web hello.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Untitled Document <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <input type="submit" onclick="Hello();" value="Click here to load data" /> Content of hello file 371 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Trang hello.html var httpRequest; function handler() { } function Hello() { } function GetXmlHttpObject() { } Click here to load data Content of hello file 372 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Viết hàm nhận đối tượng XmlHttpRequest function GetXmlHttpObject() { if(window.ActiveXObject){ return (new ActiveXObject("Microsoft.XMLHTTP")); //IE }else if(window.XMLHttpRequest){ return (new XMLHttpRequest()); //Netscape, Firefox, Opera }else{ return null; } } 373 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Viết hàm xử lý sự kiện Hello function Hello() { httpRequest = GetXmlHttpObject(); var url = "Default.aspx"; httpRequest.onreadystatechange = handler; httpRequest.open("GET", url, true); httpRequest.send(null); } 374 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Hàm bắt trạng thái của XmlHttpRequest var httpRequest; function handler() { if (httpRequest.readyState == 4) { document.getElementById("result").innerHTML = httpRequest.responseText; } } 375 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Trang Default.aspx Hoặc có thể viết trong phương thức pageload của trang Default.aspx.cs protected void Page_Load(object sender, EventArgs e) { Response.Write(DateTime.Now.ToString()); } 376 Ví dụ 1 : (tt) Trường CĐ CNTT TpHCM Kết quả : Khi click vào liên kết nội dung trong thẻ div được tải lại từ server nhưng không tải cả trang web 377 Chú ý Trường CĐ CNTT TpHCM • Nếu dữ liệu từ server gửi về là dữ liệu có cấu trúc : Xml, DataTable, Array, thì hàm handle phải được viết lại để phân tích dữ liệu đó rồi mới xuất ra màn hình. 378 Ví dụ 2 : Cộng hai số Trường CĐ CNTT TpHCM function Tinhtong() { var a, b ; a = document.getElementById("txt_a").value; b = document.getElementById("txt_b").value; var thamso = "a=" + a + "&b=" + b; var url = "Conghaiso.aspx?"+thamso; httpRequest= GetXmlHttpObject(); httpRequest.onreadystatechange = handler; httpRequest.open("GET", url, true); httpRequest.send(null); } protected void Page_Load(object sender, EventArgs e) { int a = int.Parse(Request["a"].ToString()); int b = int.Parse(Request["b"].ToString()); int s = a + b; Response.Write(s.ToString()); } Hàm Tinhtong() của trang cong2so.htm Hàm xử lý của trang conghaiso.aspx var httpRequest; function handler() { } function Tinhtong() { } function GetXmlHttpObject() { } Nhập số A : Nhập số B : Tổng :   379 Ví dụ 2 : Cộng hai số Trường CĐ CNTT TpHCM 380 3. Ajax với đối tượng ASP.NET AJAX Trường CĐ CNTT TpHCM • ASP.NET AJAX là một thành phần mở rộng của ASP.NET 2.0, cho phép phát triển các ứng dụng web với tính năng AJAX. • ASP.NET bao gồm một framework các script client, các control server, • Việc sử dụng ASP.NET đơn giản nhất là sử dụng bộ thư viện control của ASP.NET • Update Panel là control chính trong ASP.NET AJAX 381 Cài đặt ASP.NET AJAX control toolkit Trường CĐ CNTT TpHCM • Tải bộ control tại địa chỉ 475 • Hiện tại bộ control AJAX có 3 phiên bản • Toolkit 2.0 : .Net Framework 1.1, 2.0 (VS 2003, 2005) • Toolkit 3.5 : .Net Framework 3.0, 3.5 (VS 2008) • Toolkit 4 : .Net Framework 4.0 (VS 2010) 382 Cài đặt ASP.NET AJAX control toolkit (tt) Trường CĐ CNTT TpHCM • Sau khi tải bộ Toolkit, mở VS tương ứng và kéo file AjaxControlToolkit.dll vào trong thanh toolbox • Tạo một project Website với Framework tương ứng và mở thanh toolbox (sẽ thấy các control AJAX) 383 Ứng dụng 1 : Sách theo giá Trường CĐ CNTT TpHCM • Trang liệt kê sách theo giá khi chưa sử dụng AJAX • Mỗi khi chọn giá, trang web phải thực hiện mã lệnh ở server, rồi load toàn bộ trang web lại để hiện thị danh sách mới. 384 Ứng dụng 1 : Sách theo giá (tt) Trường CĐ CNTT TpHCM • Sử dụng Update Panel • Update Panel là một control cho phép việc thực hiện load dữ liệu từ server chỉ xảy ra cục bộ trong chính Panel • Thực hiện • Kéo thả control Script Manager vào trang web. (các trang web có sử dụng AJAX cần phải có control Script Manager để quản lý script) • Kéo thả control Update Panel vào trang web • Kéo các control là nguyên nhân của việc load lại trang web và control hiển thị nội dung vào trong Update Panel • Chạy trang web 385 Ứng dụng 1 : Sách theo giá (tt) Trường CĐ CNTT TpHCM • Trang web sẽ chỉ load lại nội dung trong Update Panel 386 Ứng dụng 1 : CHÚ Ý Trường CĐ CNTT TpHCM  Đối với VS2005 cài đặt gói AJAX sau khi đã có Website rồi thì phải làm thêm các bước sau :  Chép file ajaxextensions.dll vào thư mục bin của ứng dụng web hiện hành  Chỉnh sửa lại file webconfig bằng cách :  tạo mới Website có hỗ trợ AJAX. File->New Website- >ASP.NET AJAX-Enabled Web Site->OK  sau đó copy nội dụng của file Webconfig ở Website mới vào file WebConfig của Website củ (chỉnh lại chuỗi kết nối nếu có). 387 Mở rộng Trường CĐ CNTT TpHCM • Ta có thể sử dụng thêm các control trong bộ Ajax Control Toolkit để phát triển các ứng dụng web, nâng cao khả năng và tốc độ truy xuất cho website.