05 Xử lý nâng cao với ajax

Bài giảng

LẬP TRÌNH ỨNG DỤNG WEB
Lê ðình Thanh
Bộ mơn Mạng và Truyền thơng Máy tính
Khoa Cơng nghệ Thơng tin
Trường ðại học Cơng nghệ, ðHQGHN

1
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Bài 5

Xử lý trang web nâng cao với
AJAX

2
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Nội dung
•
•
•
•
•
•

AJAX là gì?
Hoạt động của ứng dụng web với Ajax
So sánh web truyền thống với Ajax web

Các trình duyệt hỗ trợ Ajax
Sử dụng Ajax với gửi/nhận text
Sử dụng Ajax với gửi/nhận xml

3
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

AJAX là gì?
•

AJAX (Asynchronous Javascripts and XML) là một
kỹ thuật kết hợp một số cơng nghệ web để xây dựng
các ứng dụng web mà tương tác giữa người dùng
với ứng dụng được thực hiện khơng đồng bộ. Các
cơng nghệ bao gồm:
–
–
–
–
–

Hiển thị dựa trên chuẩn sử dụng HTML và CSS
Tương tác ñộng sử dụng DOM
Trao ñổi và xử lý dữ liệu sử dụng XML, text
Thu nhận dữ liệu khơng đồng bộ sử dụng
XMLHttpRequest
Kết hợp các cơng nghệ sử dụng JavaScript
4

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Web truyền thống <> Ajax Web

5
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Hoạt ñộng của web truyền thống
:Web Browser
Yêu cầu 1
Hiển thị
trang 1

:Web Server
Trang 1

Yêu cầu 2
Trang 2

Hiển thị
trang 2

Tạo trang

Tạo trang mới

Yêu cầu 3
Trang 3

Hiển thị

trang 3
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Tạo trang mới

6


Hoạt ñộng của Ajax web
:Web Browser :Ajax engine
Yêu cầu 1
Hiển thị
trang
Sửa ñổi
trang

Yêu cầu 2

Trang

Tạo trang

Data 1

Xử lý

Data 2

Xử lý

Yêu cầu 2

Data 1
u cầu 3

:Web Server

u cầu 3

Data 2
Sửa đổi
trang
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

7

Web truyền thống
• u cầu của người dùng được gửi trực tiếp từ
browser đến Web server thơng qua HTTP request
• Khi nhận ñược HTTP request, Web server xử lý yêu
cầu, sinh ra trang HTML mới, rồi gửi toàn bộ trang
HTML (chứa HTML và CSS) mới đến browser.
Browser xóa trang cũ và hiển thị trang mới.
• Từ khi gửi u cầu đi, người dùng khơng được làm
thêm bất kỳ thao tác gì cho ñến khi trang HTML
mới ñược gửi ñến client: mỗi yêu cầu phải được giải
quyết dứt điểm trước khi có u cầu tiếp theo = đồng
bộ.
8

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Web truyền thống

9
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Web truyền thống: Hạn chế
• Khi người dùng thao tác thì server “nghỉ” và ngược
lại
– Lãng phí thời gian, hiệu quả sử dụng thấp
– Người dùng phải vừa làm vừa ñợi: gửi yêu cầu → ñợi →
nhận kết quả → gửi yêu cầu → ñợi → … ⇒ Người dùng
phải ñợi lâu nếu yêu cầu xử lý lớn và server mất nhiều
thời gian xử lý + Hiển thị khơng liên tục, “nhấp nháy” gây
khó chịu (! HCI).

• Tồn bộ trang HTML mới được gửi từ server đến
client
– Khơng cần thiết vì có thể nhiều chi tiết trên trang mới vẫn
như trang cũ
– Lượng thơng tin trao đổi giữa client-server lớn ⇒ chi phí
truyền thơng (thời gian, băng thơng) lớn.
10
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Ajax Web
• Ajax engine được cài trên client, làm nhiệm vụ giao tiếp

trung gian giữa browser với web server
– Browser gửi yêu cầu ñến Ajax engine bằng lời gọi Javascript.
– Ajax engine chuyển yêu cầu của Client thành HTTP request và gửi
cho web server
– Web server xử lý yêu cầu rồi gửi kết quả cho Ajax engine ở dạng
XML
– Ajax engine biên dịch XML thành HTML và gửi HTML cho browser

• Một u cầu của người dùng chưa cần được giải quyết xong
thì người dùng đã có thể đưa ra yêu cầu khác
– Trao ñổi giữa Browser với Ajax engine và giữa Ajax engine với
Server ñể thực hiện các yêu cầu diễn ra khơng đồng bộ.

11
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Ajax Web

12
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Ajax Web: Ưu điểm
• Người dùng và server thực hiện một cách
song hành
– Khơng lãng phí thời gian, hiệu quả sử dụng cao
– Người dùng không phải vừa làm vừa đợi
– Hiển thị liên tục, khơng gây khó chịu (HCI).

• Chỉ phần khác biệt của trang mới so với trang

cũ mới được gửi từ server đến client
– Lượng thơng tin trao đổi giữa client-server tối
thiểu ⇒ tiết kiệm chi phí (thời gian, băng thơng)
truyền thơng.
13
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Vì sao dùng Ajax
•

ðể tạo ra các ứng dụng web
– mà giao tiếp của nó với người dùng diễn ra
như giao tiếp của ứng dụng Winform với
người dùng: liên tục.
– hiệu quả trong sử dụng và trong truyền thơng

14
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Lịch sử Ajax
• Từ Ajax được ơng Jesse James Garrett tạo ra
và dùng lần ñầu tiên vào tháng 2 năm 2005 ñể
chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax
đã có trên các chương trình duyệt từ 10 năm
trước.
• Ajax đang và sẽ được sử dụng rộng rãi bởi
Google, Microsoft, Mozila, …

15

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Các trình duyệt hỗ trợ AJAX
•
•
•
•
•

Apple Safari từ 1.2 trở lên
Microsoft Internet Explorer từ 4.0 trở lên
Mozilla Firefox từ 1.0 trở lên
Netscape từ 7.1 trở lên
Opera từ 8.0 trở lên

16
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Sử dụng AJAX
• Sử dụng đối tượng Javascript
XMLHttpRequest để gửi u cầu đến server
và lấy dữ liệu về từ server.
• Sau khi XmlHttpRequest nhận ñược dữ liệu
từ server, sử dụng javascript ñể sửa ñổi trang
web trên client với dữ liệu mới nhận được.

17
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Lấy ñối tượng XMLHttpRequest
function getXmlHttpObject() {
var xmlHttp null; try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp=new
ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert(“Trinh duyet khong ho tro
AJAX!");
}
}
}
return xmlHttp;
}
18
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


XMLHttpRequest::readyState

if(xmlHttp.readyState==4)
{

// Da nhan duoc du lieu
tu server
}

ready
State

Ý nghĩa

0

Chưa thiết lập yêu cầu

1

ðã thiết lập yêu cầu

2

ðã gửi yêu cầu

3

ðang trả lời

4

ðã trả lời xong

19

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

XMLHttpRequest.onreadystatechange
Là một con trỏ hàm khơng đối, ñược kích hoạt mỗi khi
thuộc tính readyState thay ñổi.
xmlHttp.onreadystatechange = tenHamXuly
Hoặc
xmlHttp.onreadystatechange = function()
{
//Noi dung xu ly
}
20
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


XMLHttpRequest.responseText

Nội dung dạng text/html do server xử lý yêu cầu và gửi về.
Muốn sử dụng thuộc tính này, server phải thiết lập thuộc
tính ContentType của trang là text/html (mặc định)

21
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

XMLHttpRequest.

responseXML.documentElement

Nội dung dạng XML do server xử lý yêu cầu và gửi về.
Muốn sử dụng thuộc tính này, server phải thiết lập thuộc

tính ContentType của trang là text/xml

22
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Gửi yêu cầu về server

xmlHttp.open(method, url, asynchronous);
xmlHttp.send(null);
xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

23
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Server gửi dữ liệu dạng text

this.Response.Expires = -1; //Khong de cach
int time = 100;
this.Response.Write(time);

24
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Nhận và xử lý dữ liệu dạng text
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState==4)

{
document.myForm.time.value=xmlHttp.response
Text;
}
}
25
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Server gửi dữ liệu dạng XML
this.Response.Expires = -1; //Khong de cached
this.Response.Write("encoding='ISO-8859-1'?>")
this.Response.Write("<company>")
this.Response.Write("<compname>"
&rs.fields("companyname")& "</compname>")
this.Response.Write("</company>")
26
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX


Nhận và xử lý XML
function stateChanged()
{
if (xmlHttp.readyState == 4)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML
=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].no
deValue;

}
}

27
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

Thực hành kỹ thuật AJAX
AJAX ñã ñược sử dụng từ lâu trước khi Google làm cho nó
trở nên phổ biến.
Ngày nay, những ứng dụng web cao cấp (như các trang của
Google) ñều ñược làm theo kỹ thuật AJAX.

ðể sử dụng tốt kỹ thuật AJAX
Nắm vững nội dung một trang web
Hiểu rõ vai trị “trình thơng dịch” của web browser
Hiểu mơ hình ñối tượng tài liệu DOM
Sử dụng javascript ñể truy cập các ñiều khiển HTML
Hiểu về cấu trúc tài liệu XML
Hiểu về cơ chế truyền thông giữa web server với
ajax engine.
28

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX