Công nghệ NET

ASP.NET AJAX

HIENLTH – Lecturer of FIT, HCMUP, Vietnam

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

1. Tạo một thể hiện (instance) của đối tượng

XMLHttpRequest, giả sử là Obj
2. Sử dụng đối tượng Obj để tạo một lời gọi (call) bất
đồng bộ tới server và định nghĩa một hàm “gọi làm” –
callback. Hàm này sẽ được thực thi tự động khi nhận
được response từ server.
3. Đọc response của server trong hàm callback.
4. Cập nhật lại trang sử dụng các dữ liệu đã nhận được.
5. Quay lại bước 2.

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

• readyState changes → onreadystatechange handler runs

• usually we are only interested in readyState of 4
(complete) 12
 Các thuộc tính của
XMLHttpRequest (tt)
Name Description
status Returns the status code of the request
statusText Returns the static message of the request
responseText Returns the server response as a string
The status code:
• 200 : Request succeeded & the information is returned in the Response.
• 301 : Moved Permanently: Requested object has been moved
permanently; new address is specified in Location: Header of the response
message.
• 400 : Bad Request : A generic error code indicating that the request could not
be understood by the server
• 404 : Page not Found: The requested page does not exists on the server.
• 505 : HTTP Version not supported.
13
14
Ajax Extension
• ScriptManager
• Timer
• UpdatePanel
• UpdateProgress

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