Professional Documents
Culture Documents
ASP.NET AJAX
1
Nội dung
• AJAX là gì?
• Cơ chế truyền thông đồng bộ
• Cơ chế truyền thông bất đồng bộ
• So sánh 2 cơ chế
• Phân tích mã AJAX
• Demo
• Hướng dẫn thực hành
2
AJAX là gì?
• Asynchronous JavaScript and XML
– Kỹ thuật tương tác với server theo cơ chế bất
đồng bộ
• Nền tảng của AJAX
– HTML
– CSS
– JavaScript (chủ chốt)
– XML
3
Cơ chế synchronization
4
Cơ chế asynchronization
5
So sánh sync và async
6
XMLHttpRequest
• Là một đối tượng cho phép tạo các
requests và nhận response theo cơ chế
bất đồng bộ (bằng mã javascript) mà
không đòi hỏi thao tác submit của người
dùng.
• XMLHttpRequest được cài đặt bởi
Microsoft năm 1999 như một ActiveX
trong IE và trở thành nhân tố chuẩn cho
mọi trình duyệt.
7
Hoạt động của XMLHttpRequest
8
Tạo XMLHttpRequest
• XMLHttpRequest được cài đặt khác nhau
trên các trình duyệt.
• Đối với IE:
– Obj = new
ActiveXObject(“Microsoft.XMLHttp”);
• Đối với các trình duyệt khác: FF, Chrome,
Opera…
– Obj = new XMLHtttpRequest();
9
Các phương thức của
XMLHttpRequest
• open: đặt các tham số cho request
– Get/url/true
• send: gửi request đến server
10
GET/POST
• Obj.open(method, server, async)
• GET:
– Obj.open(“GET”, “demo.aspx?id=a&cat=b”, true);
– Obj.onreadystatechange = ten_ham_callback;
– Obj.send(null);
• POST:
– Obj.open(“POST”, “demo.aspx”, true);
– Obj.onreadystatechange =
handleRequestStateChange;
– Obj.send(“id=a&cat=b”);
11
Các thuộc tính của
XMLHttpRequest - readyState
• holds the status of the XMLHttpRequest
• possible values for the readyState property:
State Description
0 not initialized
1 set up
2 sent
3 in progress
4 complete
15
ScriptManager control
• Quản lý các script cho các thành phần
client , partial-page rendering, localization,
globalization và scripts của người dùng.
Control này được yêu cầu sử dụng cho các
controls : UpdatePanel, UpdateProgress và
Timer controls.
16
Ajax Extension
• UpdatePanel: cho phép các bạn refresh một phần của
trang ASP.NET thay vì refresh toàn bộ trang sử dụng
postback.
• UpdateProgress: Cung cấp thông tin các trạng thái về
partial-page update trong UpdatePanel control.
• Timer: thực hiện việc postback trong một khoảng thời
gian được chỉ định. Chúng ta có thể sử dụng control
này để post toàn bộ trang hoặc sử dụng cùng với
Update Panel control thực hiện partial-page update (chỉ
một phần nào đó trên trang ASP.Net được thay đổi) với
một khoảng thời gian chỉ định.
17