Bài giảng Lập trình Web - Bài 11: Giới thiệu và sử dụng Ajax

Nội dung text: Bài giảng Lập trình Web - Bài 11: Giới thiệu và sử dụng Ajax

1. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC a - Tek Ngành lập trình - CSDL 1
2. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Mục tiêu • Tìm hiểu về Ajax và cơ chế hoạt động của Ajax • Sử dụng Ajax mà không cài đặt thêm thư viện • Sử dụng Ajax với thư viện AJAX ASP.NET Framework của Microsoft. a - Tek Ngành lập trình - CSDL 2
3. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Giới thiệu tổng quan 2. Sự hoạt động của Ajax 3. Dùng Ajax với đối tượng XmlHttpRequest 4. Dùng Ajax với thư viện AJAX ASP.NET a - Tek Ngành lập trình - CSDL 3
4. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Giới thiệu tổng quan • Ajax là gì ? • Các đặc điểm của Ajax a - Tek Ngành lập trình - CSDL 4
5. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Giới thiệu tổng quan • Ajax là gì? - AJAX (Asynchronous JavaScript and XML" - nghĩa là "JavaScript và XML không đồng bộ") là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application). a - Tek Ngành lập trình - CSDL 5
6. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Giới thiệu tổng quan • Ajax là gì? - Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ: • HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin • Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị • Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. • XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON. a - Tek Ngành lập trình - CSDL 6
7. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Giới thiệu tổng quan • Các đặc điểm của Ajax - Ưu điểm • Trang web có thể cập nhật nội dung cần thiết mà không phải nạp lại toàn bộ trang web • Trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều a - Tek Ngành lập trình - CSDL 7
8. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Giới thiệu tổng quan • Các đặc điểm của Ajax - Khuyết điểm • Các chức năng Back, Bookmark của trình duyệt hoạt động không đúng • Để xem được các trang web ajax thì trình duyệt phải hỗ trợ javascript. • Mở ra một các thức khác cho việc tấn công của các đoạn mã độc mà những nhà phát triển web có thể không kiểm thử hết được. a - Tek Ngành lập trình - CSDL 8
9. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Giới thiệu tổng quan 2. Sự hoạt động của Ajax 3. Dùng Ajax với đối tượng XmlHttpRequest 4. Dùng Ajax với thư viện AJAX ASP.NET a - Tek Ngành lập trình - CSDL 9
10. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Sự họat động của Ajax • Mô hình họat động của Ajax • So sánh Web Application và Ajax Web Application a - Tek Ngành lập trình - CSDL 10
11. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Sự hoạt động của Ajax • Mô hình hoạt động - Việc xử lý thông tin được thực hiện trên máy khách (Client) thay vì máy phục vụ (Server) như cách truyền thống - Máy chủ chỉ làm một việc đơn giản là nhận thông tin từ máy khách và trả các dữ liệu về cho máy khách - Máy khách xử lý sơ bộ thông tin của người dùng nhập vào, sau đó chuyển về máy chủ rồi nhận dữ liệu từ máy chủ và xử lý để hiển thị cho người dùng a - Tek Ngành lập trình - CSDL 11
12. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Máy khách Trang web Javascript HTML + CSS Ajax Engine HTTP request XML Data Máy chủ web Máy chủ CSDL Phía máy chủ a - Tek Ngành lập trình - CSDL 12
13. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Hoạt động người dùng Truyền dữ liệu Máy khách Xử lý đồng bộ Máy chủ Hệ thống xử lý Trang Hoạt động người dùng web Máy khách Truyền dữ liệu Xử lý Ajax Engine bất đồng bộ Máy chủ Hệ thống xử lý a - Tek Ngành lập trình - CSDL 13
14. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Sự họat động của Ajax • So sánh với các ứng dụng web truyền thống - Các ứng dụng Ajax phần lớn trông giống như thể chúng được đặt trên máy của người sử dụng hơn là được đặt trên một máy phục vụ thông qua Internet. Lý do: các trang được cập nhật nhưng không nạp lại toàn bộ - Các ứng dụng truyền thống về bản chất là gửi dữ liệu từ các form, được nhập bởi người sử dụng, tới một máy phục vụ web. Máy phục vụ web sẽ trả lời bằng việc gửi về một trang web mới a - Tek Ngành lập trình - CSDL 14
15. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Trình duyệt Trình duyệt Trang web Trang web Javascript HTML + CSS Ajax Engine HTTP Request HTTP request HTML + CSS XML Data Máy chủ Web Máy chủ web Máy chủ CSDL Máy chủ CSDL Phía máy chủ Phía máy chủ So sánh ứng dụng web truyền thống (trái) với AJAX a - Tek Ngành lập trình - CSDL 15
16. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Sự họat động của Ajax • So sánh với các ứng dụng web truyền thống - Mặt khác, các ứng dụng Ajax có thể gửi các yêu cầu tới máy phục vụ web để nhận về chỉ những dữ liệu cần thiết. Kết quả là trang web được hiển thị nhanh hơn vì lượng dữ liệu trao đổi giữa máy chủ và trình duyệt web giảm đi rất nhiều. Thời gian xử lý của máy chủ web cũng vì thế mà được giảm theo vì phần lớn thời gian xử lý được thực hiện trên máy khách của người dùng a - Tek Ngành lập trình - CSDL 16
17. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Các website sử dụng Ajax • Website nước ngoài: - Flickr ( website chia sẽ hình ảnh - Gmail ( - Google Local (trước đây Google Maps) : - Windows Live : a - Tek Ngành lập trình - CSDL 17
18. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Các website sử dụng Ajax • Ajax của người Việt: - Địa danh Việt Nam: ( ) Website với trên 48000 địa danh Việt Nam. Sử dụng công nghệ AJAX và Google Maps API - Thắng Cảnh Đẹp [ ]: sử dụng 100% AJAX, kết hợp với Google MAP API - Music Online [ ]: sử dụng 99% AJAX + khắc phục được 1 số nhược điểm của Ajax a - Tek Ngành lập trình - CSDL 18
19. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Giới thiệu tổng quan 2. Sự hoạt động của Ajax 3. Dùng Ajax với đối tượng XmlHttpRequest 4. Dùng Ajax với thư viện AJAX ASP.NET a - Tek Ngành lập trình - CSDL 19
20. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Dùng Ajax với đối tượng XmlHttpRequest • Giới thiệu • Các bước thực hiện a - Tek Ngành lập trình - CSDL 20
21. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Giới thiệu - XmlHttpRequest là lớp thư viện của javascript - XmlHttpRequest được dùng để yêu cầu (Http request) về Web Server và nhận phản hồi (Response) từ Web Server - Dữ liệu phản hồi từ Web Server là xml hoặc text a - Tek Ngành lập trình - CSDL 21
22. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 1: Khởi tạo đối tượng XmlHttpRequest - Bước 2: Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server - Bước 3: Nhận phản hồi từ Web Server và xử lý kết quả nhận được - Bước 4: Viết xử lý ở Web Server a - Tek Ngành lập trình - CSDL 22
23. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 1: Khởi tạo đối tượng XmlHttpRequest //Biến toàn cục dùng để tham chiếu đến đối tượng XmlHttpRequest var xmlHttp = null; //Phương thức tạo đối tượng XmlHttpRequest function createXmlHttpReques() { var kq; try{ kq = new XMLHttpRequest(); } catch(e){ //IE6 hoặc cũ hơn kq = new ActiveXObject("Microsoft.XMLHttp"); } } a - Tek Ngành lập trình - CSDL 23
24. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 2: Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server. Có 2 phương thức để gửi yêu cầu: GET và POST //Gửi bằng phương thức GET var request = "XuatLoiChao.aspx?hoten=" + hoten; xmlHttp.open("GET", request, true); //Tham chiếu đến hàm xử lý kết quả trả về xmlHttp.onreadystatechange = HienThiLoiChao; //Gửi yêu cầu về Server xmlHttp.send(null); a - Tek Ngành lập trình - CSDL 24
25. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 2: Gán giá trị cho đối tượng XmlHttpRequest và gửi về Web Server. Có 2 phương thức để gửi yêu cầu: GET và POST //Gửi bằng phương thức POST var request = "XuatLoiChao.aspx"; xmlHttp.open("POST", request, true); //Tham chiếu đến hàm xử lý kết quả trả về xmlHttp.onreadystatechange = HienThiLoiChao; //Gửi bằng phương thức POST phải gán Header cho Request xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Gửi yêu cầu về Server xmlHttp.send("hoten=" + hoten); a - Tek Ngành lập trình - CSDL 25
26. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 3: Nhận phản hồi từ Web Server và xử lý kết quả nhận được function HienThiLoiChao() { Nếu kết quả trả về là Text if (xmlHttp.readyState == 4)  responseText { Nếu kết quả trả về là Xml if (xmlHttp.status == 200)  responseXml { //nhận kết quả trả về var loi_chao = xmlHttp.responseText; //Truy xuất đến vùng để hiển thị lời chào var divLoiChao = document.getElementById("divLoiChao"); //Hiển thị divLoiChao.innerHTML = loi_chao; } } } a - Tek Ngành lập trình - CSDL 26
27. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax Dùng Ajax với đối tượng XmlHttprequest • Các bước thực hiện: - Bước 4: Viết xử lý ở Web Server protected void Page_Load(object sender, EventArgs e) { Kết quả trả về dạng Xml: //Lấy họ tên mà Client gửi tới string hoten = Request["hoten"]; string.Format(“ Chào //Tạo lời chào bạn {0}! ", hoten); string loi_chao = string.Format("Chào bạn {0}!", hoten); //Gửi lời chào về Client Response.Write(loi_chao); //Kết thúc việc gửi dữ liệu về Client //Nếu không có dòng này thì nó sẽ gửi luôn phần html trong trang aspx Response.End(); } a - Tek Ngành lập trình - CSDL 27
28. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Nội dung 1. Giới thiệu tổng quan 2. Sự hoạt động của Ajax 3. Dùng Ajax với đối tượng XmlHttpRequest 4. Dùng Ajax với thư viện AJAX ASP.NET a - Tek Ngành lập trình - CSDL 28
29. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC ASP.NET AJAX Framework • Giới thiệu • Cài đặt • Cấu hình cho các website cũ • Các control trong ASP.NET AJAX a - Tek Ngành lập trình - CSDL 29
30. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Giới thiệu - ASP.NET AJAX Framework là thư viện hỗ trợ lập trình Ajax cho ASP.NET của Microsoft - ASP.NET AJAX giúp các ứng dụng ASP.NET hoạt động theo cơ chế AJAX với cách lập trình không thay đổi (toàn bộ xử lý ở Server) - Ngoài ra, ASP.NET AJAX còn cung cấp các file script giúp chúng ta lập trình ở Client mà không phụ thuộc vào bất kỳ ngôn ngữ xử lý ở Server nào (ta có thể dùng PHP, ASP.NET, JSP, để xử lý ở Server) a - Tek Ngành lập trình - CSDL 30
31. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Cài đặt - Download gói cài đặt ASP.NET AJAX tại địa chỉ a - Tek Ngành lập trình - CSDL 31
32. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Cấu hình cho các website cũ - Để sử dụng được tính năng của ASP.NET Ajax trong các website project cũ (không được tạo bằng template ASP.NET AJAX) thì ta phải cấu hình cho các website này - Mở file web.config mẫu của ASP.NET AJAX, file này nằm ở đường dẫn: C:\Program Files\Microsoft ASP.NET\ASP.NET 2.0 AJAX Extensions\v1.0.nnnn a - Tek Ngành lập trình - CSDL 32
33. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Cấu hình cho các website cũ - Lần lượt thêm các phần chưa có từ file web.config mẫu vào file web.config của website: • element • element • element • element • element • element • element a - Tek Ngành lập trình - CSDL 33
34. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - ScriptManager - UpdatePanel - UpdateProgress - Timer a - Tek Ngành lập trình - CSDL 34
35. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - ScriptManager: • Dùng để quản lý các client script (javascript) cho các trang ASP.NET AJAX • Bắt buộc phải có trong các trang ASP.NET AJAX a - Tek Ngành lập trình - CSDL 35
36. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - UpdatePanel: • UpdatePanel dùng để cập nhật nội dung nằm trong nó mà không phải load lại toàn bộ trang web • Trong 1 trang web ASP.NET AJAX, có thể có nhiều UpdatePanel control. Ta có thể kiểm soát việc các UpdatePanel cập nhật nội dung cho các vùng nằm bên trong các UpdatePanel a - Tek Ngành lập trình - CSDL 36
37. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: • ChildrenAsTrigger (Boolean): nếu = true thì khi các control nằm bên trong UpdatePanel có xảy ra PostBack thì UpdatePanel sẽ cập nhật lại nội dung nằm trong nó • UpdateMode: Always: luôn luôn cập nhật nội dung của UpdatePanel Conditional: Cập nhật UpdatePanel có điều kiện. a - Tek Ngành lập trình - CSDL 37
38. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: • Ví dụ: Tìm kiếm thông tin học viên Ta sẽ thiết kế giao diện như sau: UpdatePanel1: -ChildrenAsTrigger = true Các control nằm bên trong UpdatePanel sẽ tự động cập nhật khi ta click vào nút Tìm kiếm a - Tek Ngành lập trình - CSDL 38
39. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: • Ví dụ: Tìm kiếm thông tin học viên a - Tek Ngành lập trình - CSDL 39
40. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: • Triggers: UpdatePanel cập nhật nội dung khi các biến cố của các control được cấu hình làm trigger xảy ra Ví dụ: ta thiết kế màn hình danh mục nhà xuất bản như sau: - DetailsView để thêm dữ liệu nhà xuất bản - UpdatePanel để cập nhật lưới khi thêm nhà xuất bản - Lưới GridView nằm bên trong UpdatePanel - Cho phép xóa, sửa, sắp trên trên Lưới a - Tek Ngành lập trình - CSDL 40
41. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Ví dụ: dùng UpdatePanel với Triggers a - Tek Ngành lập trình - CSDL 41
42. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Ví dụ: dùng UpdatePanel với Triggers UpdatePanel cập nhật nội dung khi sự kiện ItemInserted của DetailsView xảy ra a - Tek Ngành lập trình - CSDL 42
43. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: • Phương thức Update: cập nhật nội dung nằm bên trong UpdatePanel Ví dụ: cập nhật nội dung UpdatePanel1 khi Click vào Button thì trong biến cố Click của Button viết lệnh như sau: UpdatePanel1.Update(); a - Tek Ngành lập trình - CSDL 43
44. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: một số điểm cần lưu ý • Sử dụng nhiều UpdatePanel Control: Giả sử trang ASP.NET AJAX của ta có nhiều vùng nội dung muốn cập nhật thì ta có thể chứa các vùng này trong các UpdatePanel khác nhau • Để kiểm soát được việc cập nhật của các UpdatePanel control thì ta nên lưu ý đến thuộc tính UpdateMode của nó. Ta gán UpdateMode = Conditional. Sau đó kiểm soát việc cập nhật nội dung của UpdatePanel bằng Trigger hoặc gọi phương thức Update của Panel a - Tek Ngành lập trình - CSDL 44
45. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Update Panel: một số điểm cần lưu ý • Nếu ta để UpdateMode=Always thì khi có PostBack, tất cả các UpdatePanel đều cập nhật nội dung. Điều này sẽ ảnh hưởng tới cập nhật a - Tek Ngành lập trình - CSDL 45
46. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - UpdateProgress: • UpdateProgress được dùng kèm với UpdatePanel • UpdateProgress cho ta biết quá trình xử lý ở Server của UpdatePanel có hoàn tất chưa • Ví dụ: Để cập nhật nội dung hiển thị cho lưới thì bước đầu ta phải lấy dữ liệu, sau đó mới hiển thị dữ liệu cho lưới. Trong lúc chờ Server lấy dữ liệu cho lưới thì ta có thể dùng UpdateProgress để xuất ra câu thông báo: Đang load dữ liệu a - Tek Ngành lập trình - CSDL 46
47. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - UpdateProgress – Sử dụng: • Thuộc tính AssociatedUpdatePanel dùng để gắn UpdateProgress với UpdatePanel • Ví dụ: Màn hình tìm kiếm học viên a - Tek Ngành lập trình - CSDL 47
48. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax ASP.Net Ajax Framework • Các control trong ASP.NET AJAX - Timer: • Dùng để quy định sau một khoảng thời gian thì sẽ tự động xử lý gì đó. • Ví dụ: Sau mỗi giây thì cập nhật lại UpdatePanel. Ta làm chương trình đồng hồ điện tử như sau: protected void Timer1_Tick(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString("hh:mm:ss"); } a - Tek Ngành lập trình - CSDL 48
49. TRƯỜNG ĐẠI HỌC KHOA HỌC TỰ NHIÊN TP.HCM TRUNG TÂM TIN HỌC Bài 11: Giới thiệu và sử dụng Ajax HẾT a - Tek Ngành lập trình - CSDL 49