›
›

Bài giảng Lập trình web ASP.Net với C# - Chương 8: Công nghệ và dịch vụ web - Phạm Đào Minh Vũ

pdf 65 trang ngocly 2890
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình web ASP.Net với C# - Chương 8: Công nghệ và dịch vụ web - Phạm Đào Minh Vũ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_asp_net_voi_c_chuong_8_cong_nghe_va.pdf

Nội dung text: Bài giảng Lập trình web ASP.Net với C# - Chương 8: Công nghệ và dịch vụ web - Phạm Đào Minh Vũ

  1. LẬP TRÌNH WEB ASP.NET VỚI C# Giảng Viên: Th.S Phạm Đào Minh Vũ Email: phamdaominhvu@yahoo.com 1
  2. Chương 8 Công Nghệ Và Dịch Vụ Web 8.1. Dịch vụ web – Webservice 8.2 Công nghệ web 2 – Ajax 324 Khoa CNTT,Trường CĐ CNTT TP.HCM
  3. 8.1. Webservice – nội dung  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 325 Khoa CNTT,Trường CĐ CNTT TP.HCM
  4. 8.1.1 CÁC ỨNG DỤNG PHÂN TÁN Dữ liệu Máy Ứng dụng tính phân tán Dữ liệu Máy tính 326 Khoa CNTT Trường CĐ CNTT TP.HCM
  5. 8.1.1 CÁC ỨNG DỤNG PHÂN TÁN  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  . 327 Khoa CNTT Trường CĐ CNTT TP.HCM
  6. 8.1.2 VẤN ĐỀ KHI THIẾT KẾ HỆ PHÂN TÁN Provider C Firewall Firewall Internet Firewall Client Web Service 328 Khoa CNTT Trường CĐ CNTT TP.HCM
  7. 8.1.3 WEB SERVICE  WEB SERVICE LÀ GÌ?  KIẾN TRÚC WEB SERVICE  XÂY DỰNG WEB SERVICE  SỬ DỤNG WEB SERVICE 329 Khoa CNTT Trường CĐ CNTT TP.HCM
  8. 8.1.3.1 ĐỊNH NGHĨA • 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. 330 Khoa CNTT Trường CĐ CNTT TP.HCM
  9. 8.1.3.2 ĐẶC ĐIỂM 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ì 331 Khoa CNTT Trường CĐ CNTT TP.HCM
  10. 8.1.3.3 KIẾN TRÚC WEBSERVICE Service Broker Publish Find Bind Service Provider Service Consumer 332 Khoa CNTT Trường CĐ CNTT TP.HCM
  11. 8.1.3.4 XÂY DỰNG WEBSERVICE  Tạo mới 1 webservice trong VS2010 333 Khoa CNTT Trường CĐ CNTT TP.HCM
  12. Ví dụ ứng dụng : cộng 2 số nguyên  Đặt tên là file là cong2so.asmx  Trong file Conghaiso.cs, cài đặt phương thức cộng: [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; } } 334 Khoa CNTT Trường CĐ CNTT TP.HCM
  13. 8.1.3.4 KIỂM TRA WEBSERVICE  Chạy file cong2so.asmx để kiểm tra phương thức webservice vừa tạo 335 Khoa CNTT Trường CĐ CNTT TP.HCM
  14. 8.1.3.4 Thử nghiệm  Kết quả : 336 Khoa CNTT Trường CĐ CNTT TP.HCM
  15. 8.1.3.4 ngôn ngữ WSDL  Trang webservice được mô tả bằng ngôn ngữ WSDL (Web Service Description Languague) 337 Khoa CNTT Trường CĐ CNTT TP.HCM
  16. 8.1.3.5 SỬ DỤNG WEBSERVICE  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ả : 338 Khoa CNTT Trường CĐ CNTT TP.HCM
  17. 8.1.3.5 SỬ DỤNG WEBSERVICE CÓ SẴN  Bước 1 : Add Web Reference 339 Khoa CNTT Trường CĐ CNTT TP.HCM
  18. 8.1.3.5 SỬ DỤNG WEBSERVICE  Bước 2 : Nhập thông tin đường dẫn 340 Khoa CNTT Trường CĐ CNTT TP.HCM
  19. 8.1.3.4 SỬ DỤNG WEBSERVICE 341 Khoa CNTT Trường CĐ CNTT TP.HCM
  20. 8.1.3.5 SỬ DỤNG WEBSERVICE  Bước 3 : Thiết kế giao diện 342 Khoa CNTT Trường CĐ CNTT TP.HCM
  21. 8.1.3.4 SỬ DỤNG WEBSERVICE  Bước 4: Xử lý code : 343 Khoa CNTT Trường CĐ CNTT TP.HCM
  22. 8.1.3.5 SỬ DỤNG WEBSERVICE  Kết quả được lấy ngày 10/11, luc 12h00 344 Khoa CNTT Trường CĐ CNTT TP.HCM
  23. 8.1.3.6 BÀI TẬP  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 345 Khoa CNTT Trường CĐ CNTT TP.HCM
  24. 8.2. CÔNG NGHỆ WEB AJAX 346 Khoa CNTT,Trường CĐ CNTT TP.HCM
  25. 8.2. CÔNG NGHỆ WEB AJAX  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 347 Khoa CNTT,Trường CĐ CNTT TP.HCM
  26. 8.2.1.1 Giới thiệu Ajax • 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, 348 Trường CĐ CNTT TpHCM
  27. 8.2.1.1 Giới thiệu Ajax 349 Trường CĐ CNTT TpHCM
  28. 8.2.1.2. Ajax là gì? 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 350 Trường CĐ CNTT TpHCM
  29. 8.2.1.3. Mô hình AJAX 351 Trường CĐ CNTT TpHCM
  30. 8.2.1.3. Đặc điểm của Ajax  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ỳ. 352 Trường CĐ CNTT TpHCM
  31. 8.2.1.3. Đặc điểm của Ajax  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) 353 Trường CĐ CNTT TpHCM
  32. Web Application truyền thống  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 354 Trường CĐ CNTT TpHCM
  33. Web AJAX Application  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. 355 Trường CĐ CNTT TpHCM
  34. Web AJAX Application  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ị 356 Trường CĐ CNTT TpHCM
  35. 8.2.4. Các kiến thức liên quan • 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 357 Trường CĐ CNTT TpHCM
  36. XHTML • 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 “” 358 Trường CĐ CNTT TpHCM
  37. CSS – Cascade Style Sheet • Ngôn ngữ thiết kế web p{ font-family: Times New Roman; font-size : 10; } .newstyle{ color: blue; } 359 Trường CĐ CNTT TpHCM
  38. DOM – Document Object Model • 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); 360 Trường CĐ CNTT TpHCM
  39. XML • Ngôn ngữ lưu trữ dữ liệu có cấu trúc SV01 Nguyen Minh A SV02 Nguyen Minh B 361 Trường CĐ CNTT TpHCM
  40. Javascript • 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. 362 Trường CĐ CNTT TpHCM
  41. 2. Ajax với đối tượng XmlHttpRequest 363 Trường CĐ CNTT TpHCM
  42. 8.2.3. Đối tượng XmlHttpRequest • 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. 364 Trường CĐ CNTT TpHCM
  43. Cách thức hoạt động Defaul.aspx Request Handle() Response Nếu có Hello() Click 12/2/2010 5:10:2010 Client Server 365 Trường CĐ CNTT TpHCM
  44. Các phương thức của XmlHttpRequest 366 Trường CĐ CNTT TpHCM
  45. Các thuộc tính của XmlHttpRequest 367 Trường CĐ CNTT TpHCM
  46. 8.2.5. Lập trình AJAX 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 368 Trường CĐ CNTT TpHCM
  47. Ví dụ 1 : Thay đổi ngày giờ 369 Trường CĐ CNTT TpHCM
  48. Ví dụ 1 : Thay đổi ngày giờ Tạo trang web hello.html Untitled Document Content of hello file 370 Trường CĐ CNTT TpHCM
  49. Ví dụ 1 : (tt) Trang hello.html var httpRequest; function handler() { } function Hello() { } function GetXmlHttpObject() { } Content of hello file 371 Trường CĐ CNTT TpHCM
  50. Ví dụ 1 : (tt) 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; } } 372 Trường CĐ CNTT TpHCM
  51. Ví dụ 1 : (tt) 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); } 373 Trường CĐ CNTT TpHCM
  52. Ví dụ 1 : (tt) 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; } } 374 Trường CĐ CNTT TpHCM
  53. Ví dụ 1 : (tt) 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()); } 375 Trường CĐ CNTT TpHCM
  54. Ví dụ 1 : (tt) 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 376 Trường CĐ CNTT TpHCM
  55. Chú ý • 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. 377 Trường CĐ CNTT TpHCM
  56. Ví dụ 2 : Cộng hai số function Tinhtong() { var a, b ; a = document.getElementById("txt_a").value; Hàm Tinhtong() b = document.getElementById("txt_b").value; var thamso = "a=" + a + "&b=" + b; của trang var url = "Conghaiso.aspx?"+thamso; httpRequest= GetXmlHttpObject(); cong2so.htm httpRequest.onreadystatechange = handler; httpRequest.open("GET", url, true); httpRequest.send(null); } protected void Page_Load(object sender, EventArgs e) Hàm xử lý của { int a = int.Parse(Request["a"].ToString()); trang int b = int.Parse(Request["b"].ToString()); int s = a + b; conghaiso.aspx Response.Write(s.ToString()); 378 } Trường CĐ CNTT TpHCM
  57. Ví dụ 2 : Cộng hai số var httpRequest; function handler() { } function Tinhtong() { } function GetXmlHttpObject() { } Nhập số A : Nhập số B : Tổng :   379 Trường CĐ CNTT TpHCM
  58. 3. Ajax với đối tượng ASP.NET AJAX • 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 380 Trường CĐ CNTT TpHCM
  59. Cài đặt ASP.NET AJAX control toolkit • 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) 381 Trường CĐ CNTT TpHCM
  60. Cài đặt ASP.NET AJAX control toolkit (tt) • 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) 382 Trường CĐ CNTT TpHCM
  61. Ứng dụng 1 : Sách theo giá • 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. 383 Trường CĐ CNTT TpHCM
  62. Ứng dụng 1 : Sách theo giá (tt) • 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 384 Trường CĐ CNTT TpHCM
  63. Ứng dụng 1 : Sách theo giá (tt) • Trang web sẽ chỉ load lại nội dung trong Update Panel 385 Trường CĐ CNTT TpHCM
  64. Ứng dụng 1 : CHÚ Ý  Đố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ó). 386 Trường CĐ CNTT TpHCM
  65. Mở rộng • 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. 387 Trường CĐ CNTT TpHCM