ASP.NET AJAX
Lương Trần Hy Hiến
Agenda
(cid:1) AJAX là gì? (cid:1) Cơ chế truyền thông đồng bộ (cid:1) Cơ chế truyền thông bất đồng bộ (cid:1) So sánh 2 cơ chế (cid:1) Phân tích mã AJAX (cid:1) Demo (cid:1) Hướng dẫn thực hành
2
AJAX là gì?
(cid:1) Asynchronous JavaScript and XML
(cid:1) Kỹ thuật tương tác với server theo cơ chế bất
đồng bộ
(cid:1) Nền tảng của AJAX
(cid:1) HTML (cid:1) CSS (cid:1) JavaScript (chủ chốt) (cid:1) XML
3
Cơ chế synchronization
4
Cơ chế asynchronization
5
So sánh sync và async
6
XMLHttpRequest
(cid:1) 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.
(cid:1) 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
(cid:1) XMLHttpRequest được cài đặt khác nhau trên
các trình duyệt.
(cid:1) Đối với IE:
(cid:1) Obj = new ActiveXObject(“Microsoft.XMLHttp”);
(cid:1) Đối với các trình duyệt khác: FF, Chrome,
Opera… (cid:1) Obj = new XMLHtttpRequest();
9
Các phương thức của XMLHttpRequest
(cid:1) open(method, server, async): đặt các tham số
cho request (cid:1) Method: Quy định hình thức vận chuyển dữ liệu
đến server. Có 2 hình thức: POST/GET
(cid:1) Server: Trang web nhận và xử lý tham số sau đó
trả kết quả về client thông qua thuộc tính responseText.
(cid:1) Async: Qui đị nh cơ chế truyền thông (true: bất
đồng bộ, false: đồng bộ) (cid:1) send: gửi request đến server
10
GET/POST
(cid:1) GET:
(cid:1) Obj.open(“GET”, “demo.aspx?id=a&cat=b”, true); (cid:1) Obj.onreadystatechange = ten_ham_callback; (cid:1) Obj.send(null);
(cid:1) POST:
(cid:1) Obj.open(“POST”, “demo.aspx”, true); (cid:1) Obj.onreadystatechange =
handleRequestStateChange;
(cid:1) Obj.send(“id=a&cat=b”);
11
Các thuộc tính của XMLHttpRequest
12
13
14
Ajax Extension
• ScriptManager
•
Timer
• UpdatePanel • UpdateProgress
