Bài giảng ADO.NET Ajax - Lương Trần Hy Hiến

Bài giảng ADO.NET Ajax do Lương Trần Hy Hiến biên soạn cung cấp cho các bạn những kiến thức về khái niệm Ajax; cơ chế truyền thông đồng bộ; cơ chế truyền thông bất đồng bộ; so sánh hai cơ chế; phân tích mã Ajax; demo; hướng dẫn thực hành.

ASP.NET AJAX

L ươ ng Tr ầ n Hy Hi ế n

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

ướ ẫ ự

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

C ơ ch ế asynchronization

5

So sánh sync và async

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.

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(method, server, async): đặt các tham số

cho request

Method : Quy đị nh hình th ứ c v ậ n chuy ể n d ữ li ệ u

đế n server Có 2 hình th ứ c: POST/GET

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.

Async : Qui đị nh c ơ ch ế truy ề n thông ( true : b ấ t

đồ ng b ộ , false : đồ ng b ộ )

10

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

13

• ScriptManager

• Timer

• UpdatePanel

Ajax Extension

14