Download - Giới thiệu và sử dụng aja xr40
![Page 1: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/1.jpg)
GiỚI THIỆU VÀ SỬ DỤNG AJAX
Nhóm H1, H3GVHD: NDHuy
![Page 2: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/2.jpg)
AJAX(AAsynchronous synchronous JJavaScript avaScript AAnd nd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Giới thiệu một số website có sử dụng Ajax
![Page 3: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/3.jpg)
AJAX(AAsynchronous synchronous JJavaScript avaScript AAnd nd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Giới thiệu một số website có sử dụng Ajax
![Page 4: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/4.jpg)
AJAXGiới thiệu tổng quan
1. Đặt vấn đề
2. Ajax là gì
3. Các đặc điểm của Ajax
![Page 5: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/5.jpg)
AJAXGiới thiệu tổng quan
1. Đặt vấn đề
Web ServerIIS, Apache, Tomcat, ..
Request
Response
HTML
Sự hoạt động của một trang web
![Page 6: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/6.jpg)
AJAXGiới thiệu tổng quan
![Page 7: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/7.jpg)
AJAXGiới thiệu tổng quan
Làm thế nào để thay đổi nội dung trang web mà không
phải refresh lại trang web ?
AJAX
![Page 8: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/8.jpg)
AJAXGiới thiệu tổng quan
1. Đặt vấn đề
2. Ajax là gì
3. Các đặc điểm của Ajax
![Page 9: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/9.jpg)
AJAXGiớ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
![Page 10: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/10.jpg)
AJAXGiớ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• Mô hình DOM (Document Object Model)• Đối tượng XMLHttpRequest• XML
![Page 11: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/11.jpg)
AJAXGiới thiệu tổng quan
1. Đặt vấn đề
2. Ajax là gì
3. Các đặc điểm của Ajax
![Page 12: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/12.jpg)
AJAXGiớ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 lại 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.
– Nhược điểm :• Các chức năng Back, Bookmark của trình duyệt hoạt động của
trình duyện 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ách 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.
![Page 13: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/13.jpg)
AJAX(AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Giới thiệu một số website có sử dụng Ajax
![Page 14: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/14.jpg)
AJAXSự hoạt động của Ajax
Trang webMáy khách
Ajax Engine
Máy chủ web
Máy chủ CSDL
Phía máy chủ
Javascript HTML + CSS
HTTP request XML Data
Mô hình hoạt động của Ajax
![Page 15: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/15.jpg)
Máy chủ
Trang web
Máy khách
Ajax Engine
Hoạt động người dùng
Truyền dữ
liệu
Hệ thống xử lý
Máy khách
Máy chủ
Hoạt động người dùng
Hệ thống xử lý
Truyền dữ
liệu
Xử lý đồng bộ
Xử lý bất đồng bộ
![Page 16: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/16.jpg)
AJAXSự hoạt động của Ajax
Trang web
Máy khách
Ajax Engine
Máy chủ web
Máy chủ CSDL
Phía máy chủ
Javascript HTML + CSS
HTTP request XML Data
Trang web
Máy khách
Máy chủ web
Máy chủ CSDL
Phía máy chủ
HT
ML
+ C
SSH
TT
P re
qu
est
So sách ứng dụng web truyền thống (bên trái) với Ajax
![Page 17: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/17.jpg)
AJAX(AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Giới thiệu một số website có sử dụng Ajax
![Page 18: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/18.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest1. Giới thiệu
2. Các bước thực hiện
![Page 19: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/19.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest XmlHttpRequest
– Là lớp thư viện của javascript– Được dùng để yêu cầu (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
![Page 20: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/20.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest1. Giới thiệu
2. Các bước thực hiện
![Page 21: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/21.jpg)
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
![Page 22: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/22.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest• Các bước thực hiện – mô tả bẳng mô hình
– 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 XmlHttpRequestvar xmlHttp = null;
//Phương thức tạo đối tượng XmlHttpRequestfunction createXmlHttpReques(){ var kq; try{ kq = new XMLHttpRequest(); } catch(e){ //IE6 hoặc cũ hơn kq = new ActiveXObject("Microsoft.XMLHttp"); }}
![Page 23: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/23.jpg)
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);
![Page 24: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/24.jpg)
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);
![Page 25: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/25.jpg)
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
Có 2 phương thức để gửi yêu cầu: GET và POST function HienThiLoiChao() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //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;} } }
![Page 26: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/26.jpg)
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 Serverprotected void Page_Load(object sender, EventArgs e) { //Lấy họ tên mà Client gửi tới string hoten = Request["hoten"]; //Tạo lời chào 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(); }
![Page 27: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/27.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest• Thuộc tính readyState
Giá trị Ý nghĩa
0 Request chưa được khởi tạo
1 Request đã được thiết lập
2 Request đã được gởi
3 Request đang được xử lý
4 Request đã được xử lý xong
![Page 28: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/28.jpg)
AJAX Dùng Ajax với đối tượng
XmlHttpRequest• Thuộc tính status
Giá trị Ý nghĩa
200 Ok
400 Bad request
401 Unauthorized
403 Forbidden
404 Not found
505 Interanl Server Error
![Page 29: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/29.jpg)
AJAX(AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Giới thiệu một số website có sử dụng Ajax
![Page 30: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/30.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
1. Giới thiệu
2. Cài đặt
3. Cấu hình cho các Website cũ
4. Các control trong ASP.Net Ajax
![Page 31: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/31.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• 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.
– Ngoài ra, ASP.Net 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)
![Page 32: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/32.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
1. Giới thiệu
2. Cài đặt
3. Cấu hình cho các Website cũ
4. Các control trong ASP.Net Ajax
![Page 33: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/33.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Download gói cài đặt ASP.NET AJAX tại địa chỉ http://go.microsoft.com/fwlink/?LinkID=77296
![Page 34: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/34.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
1. Giới thiệu
2. Cài đặt
3. Cấu hình cho các Website cũ
4. Các control trong ASP.Net Ajax
![Page 35: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/35.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• Cấu hình cho các Website cũ
– Lần lượt thêm các phần tử chưa có từ file web.config mẫu vào file web.config của website :
• <configSection>element• <controls>element• <assemblies>element• <httpHandlers>element• <httpModules>element• <system.web.extensions>element• <system.webserver>element
![Page 36: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/36.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
1. Giới thiệu
2. Cài đặt
3. Cấu hình cho các Website cũ
4. Các control trong ASP.Net Ajax
![Page 37: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/37.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– ScriptManager
– UpdatePanel
– UpdateProgress
– Timer
![Page 38: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/38.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– ScriptManager :
• ScriptManager dùng để quản lý các client script (javascript) cho các trang ASP.Net AJAX
• ScriptManager bắt buộc phải có trong các trang ASP.Net AJAX
Luôn có khi mới tạo một trang web
![Page 39: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/39.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• 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
![Page 40: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/40.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– UpdatePanel :
UpdatePanel và các property
![Page 41: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/41.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• Các control trong ASP.Net Ajax
– UpdatePanel :
• 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.
![Page 42: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/42.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– UpdatePanel :
• Ví dụ: Tìm kiếm thông tin học viênTa sẽ thiết kế giao diện như sau:
UpdatePanel1:-ChildrenAsTrigger = trueCá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
![Page 43: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/43.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– UpdatePanel :
• Ví dụ: Tìm kiếm thông tin học viên
![Page 44: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/44.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• Các control trong ASP.Net Ajax
– UpdatePanel :
• 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
![Page 45: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/45.jpg)
![Page 46: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/46.jpg)
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
![Page 47: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/47.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– UpdatePanel :
• 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();
![Page 48: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/48.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• Các control trong ASP.Net Ajax
– UpdatePanel : 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
![Page 49: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/49.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– UpdatePanel : 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
![Page 50: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/50.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net• Các control trong ASP.Net Ajax
– Update Progress:• 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ụ: như để 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 đó hiển thị dữ lịê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 thông báo : “Đang load dữ liệu..”
![Page 51: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/51.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– Update Progress:
• Thuộc tính AssociatedUpdatePanel dùng để gắn UpdateProgress với UpdatePanel
![Page 52: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/52.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– Update Progress:
• Ví dụ: Màn hình tìm kiếm học viên
Update Progress
![Page 53: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/53.jpg)
AJAXDùng Ajax với thư viện Ajax ASP.Net
• Các control trong ASP.Net Ajax– Timer
• Dùng để qui định sau một khoảng thời gian thì sẽ tự động xử lý cái 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"); }
![Page 54: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/54.jpg)
AJAX(AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXml)ml)
Giới thiệu tổng quan
Sự hoạt động của Ajax
Dùng Ajax với đối tượng XmlHttpRequest
Dùng Ajax với thư viện Ajax ASP.Net
Các thư viện khách cho Ajax
Giới thiệu một số website có sử dụng Ajax
![Page 55: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/55.jpg)
Các thư việc khách cho ajax
– MS Atlas– Dojo– Zimbra kabuki AJAX toolkit– Google web toolkit– Open Rice và Prototype– Yahoo! AJAX Library
![Page 56: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/56.jpg)
AJAX Giới thiệu một số website có sử dụng
Ajax• Flickr(http://www.flickr.com): website chia
sẽ hình ảnh
• Gmail (http://gmail.com)
• Thắng cảnh đẹp (http://thangcanhdep.com)
• Music Online (http://music.congnghiep4.com)
![Page 57: Giới thiệu và sử dụng aja xr40](https://reader035.vdocuments.pub/reader035/viewer/2022062705/556525b7d8b42a47678b4e61/html5/thumbnails/57.jpg)
Tài liệu tham khảo