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

Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
1
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
Bài giảng
LẬP TRÌNH ỨNG DỤNG WEB
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
2
Xử lý trang web nâng cao với
AJAX
Bài 5
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
3
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
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
4
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
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
5
Web truyền thống <> Ajax Web
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
6
Hoạt ñộng của web truyền thống
:Web Browser :Web Server
Yêu cầu 1
Trang 1
Yêu cầu 2
Trang 2
Yêu cầu 3
Trang 3
Tạo trang
Tạo trang mới
Tạo trang mới
Hiển thị
trang 1
Hiển thị
trang 2
Hiển thị
trang 3
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
7
Hoạt ñộng của Ajax web

:Web Browser :Web Server
Tạo trang
Xử lý
Xử lý
Hiển thị
trang
Sửa ñổi
trang
Sửa ñổi
trang
:Ajax engine
Yêu cầu 1
Trang
Yêu cầu 2
Yêu cầu 2
Data 1
Data 1
Yêu cầu 3
Yêu cầu 3
Data 2
Data 2
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
8
Web truyền thống
• Yê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 yê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ó yêu cầu tiếp theo = ñồng
bộ.
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
9
Web truyền thống
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
10
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).
• Toà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.
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
11
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 yê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ộ.
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
12
Ajax Web
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
13
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.
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
14
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
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
15
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, …
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
16
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
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
17
Sử dụng AJAX
• Sử dụng ñối tượng Javascript
XMLHttpRequest ñể gửi yê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.
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
18
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;
}
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
19
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
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
20
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
}
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
21
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 C
ontentType của trang là text/html (mặc ñịnh)
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX

22
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 C
ontentType của trang là text/xml
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
23
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);
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
24
Server gửi dữ liệu dạng text
this.Response.Expires = -1; //Khong de cach
int time = 100;
this.Response.Write(time);
Lê ðình Thanh, Xử lý trang web nâng cao với AJAX
25
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;

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