Tìm hiểu công nghệ ajax và ứng dụng của ajax trong thiết kế web động

z
TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN
BỘ MÔN CÔNG NGHỆ THÔNG TIN
BÁO CÁO ĐỀ ÁN MÔN HỌC
(Chuyên ngành Công Nghệ Thông Tin)
Đề tài:
TÌM HIỂU CÔNG NGHỆ AJAX VÀ
ỨNG DỤNG CỦA AJAX TRONG THIẾT KẾ WEB ĐỘNG
Giảng viên hướng dẫn: Phạm Minh Hoàn
Sinh viên thực hiện: Đỗ Anh Việt
Lớp: Công Nghệ Thông Tin K49A
Hà nội, 06/8/2010
1
Mục lục
LỜI NÓI ĐẦU ............................................................................................................... 3
CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX .................................................. 4
1. Sự xuất hiện của Ajax ............................................................................................ 4
2. Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax ......................................................... 4
3. Ưu điểm của Ajax so với các ứng dụng web truyền thống ...................................... 4
4. Các ứng dụng AJAX phổ biến ................................................................................ 6
CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX ...................................................... 7
1. Đối tượng XMLHttpRequest .................................................................................. 7
2. Các phương thức của đối tượng XMLHttpRequest ................................................ 7
3. Các thuộc tính của đối tượng XMLHttpRequest ..................................................... 9
4. Ajax và PHP ........................................................................................................ 16
CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN GIẢN SỬ DỤNG CÔNG
NGHỆ AJAX ............................................................................................................... 20
CHƯƠNG IV:TỔNG KẾT, ĐÁNH GIÁ ..................................................................... 25
1. ASP.NET AJAX Control Toolkit ......................................................................... 29
2. jQuery .................................................................................................................. 32
TÀI LIỆU THAM KHẢO ............................................................................................ 41

2
LỜI NÓI ĐẦU
Khác với các phần mềm chạy độc lập ở máy khách (có khả năng tương tác gần như tức
thời với người dùng), các ứng dụng Web bị giới hạn bởi chính nguyên lý hoạt động
của nó: tất cả các giao dịch phải thực hiện thông qua phương thức giao dịch HTTP
(HyperText Transport Protocol - Giao thức truyền tải qua các siêu liên kết) trong một
mô hình có tên Client/Server.
Bất kỳ một tác động nào của người dùng lên ứng dụng Web thông qua trình duyệt đều
cần thời gian gửi về Server và sau khi xử lý, Server sẽ trả về những thông tin người
dùng mong đợi. Như vậy, độ trễ trong trường hợp này chính là điều mà các ứng dụng
Web khó có thể sánh với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là
trong các ứng dụng như Bản đồ trực tuyến, soạn thảo văn bản trực tuyến, sát hạch trực
tuyến có tính thời gian làm bài…).
Chính vì lý do như vậy mà cần phải có một số giải pháp khử độ trễ trên các ứng dụng
web. AJAX ra đời đã giải quyết được phần nào vấn đề này. AJAX là sự kết hợp của
nhiều công nghệ đã có sẵn như JavaScript, XMLHttpRequest, HTML, CSS,… Nó hỗ
trợ việc truyền tải dữ liệu bất đồng bộ, tăng cường khả năng tương tác với server, giúp
tăng tốc ứng dụng web.
Nội dung của đề tài này sẽ tập trung tìm hiểu tổng quan công nghệ AJAX, và xây dựng
một số ứng dụng cơ bản áp dụng công nghệ này. Xin chân thành cảm ơn thầy giáo
Phạm Minh Hoàn đã nhiệt tình hướng dẫn và giúp đỡ chúng em trong quá trình thực
hiện đề tài!
Sinh viên thực hiện đề tài.
Đỗ Anh Việt
3
CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX
1. Sự xuất hiện của Ajax
Thuật ngữ AJAX xuất hiện đầu tiên vào ngày 18/2/2005 trong một bài báo có tên
AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công
ty AdapativePath. Ông định nghĩa và tóm gọn lại từ cụm từ “Asynchronous JavaScript

+ CSS + DOM + XMLHttpRequest”. Ngay sau đó thuật ngữ AJAX được phổ biến cực
kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những
từ khóa được tìm kiếm nhiều nhất trên Internet.
2. Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax
Nội dung định nghĩa của Garrett về AJAX trong bài báo của mình như sau:
AJAX không phải là một công nghệ. Nó là tập hợp của nhiều công nghệ với thế mạnh
của riêng mình để tạo thành một sức mạnh mới. AJAX bao gồm:
 Thể hiện Web theo tiêu chuẩn XHTML và CSS;
 Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);
 Trao đổi và xử lý dữ liệu bằng XML và XSLT;
 Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest;
 Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript.
Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm ở
XMLHttpRequest. Đây là một kỹ thuật do Microsoft khởi xướng và tích hợp lần đầu
tiên vào IE5 dưới dạng một ActiveX. Mozilla tích hợp công nghệ này vào Mozilla 1.0/
Netscape 6 sau đó (đương nhiên toàn bộ các version sau này của Firefox đều có
XMLHttpRequest) và hiện nay đã có trong trình duyệt Safari 1.2 (Apple) và Opera 7 trở
lên. Các vấn đề về XMLHttpRequest và cách sử dụng nó trên các trình duyệt khác nhau
sẽ được chúng ta quay trở lại ở các phần tiếp theo. Sau đây là một số nét khác biệt cơ
bản giữa các ứng dụng Web truyền thống và ứng dụng Web sử dụng AJAX.
3. Ưu điểm của Ajax so với các ứng dụng web truyền thống
Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên
trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi
postback), server sẽ xử lý yêu cầu này và gửi trả lại trang HTML khác thay thế trang cũ.
Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví dụ người
4
dùng sau khi nhấn một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý
xong mới có thể tiếp tục công việc.
Ngược lại, trong các ứng dụng AJAX, người dùng có thể nhấn chuột, gõ phím liên tục
mà không cần chờ đợi. Nội dung tương ứng với từng hành động của người dùng sẽ gần

như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời) trong khi
trang Web không cần phải refresh lại toàn bộ nội dụng. Để tìm hiểu kỹ hơn điều này, ta
sẽ xem xét 2 mô hình ứng dụng như [1] đã đề cập, Mô hình cổ điển và Mô hình AJAX-
based:
Mô hình cổ điển của một ứng dụng Web (hình minh họa được lấy từ bài báo của
Garrett)
Mô hình ứng dụng Web sử dụng AJAX (theo bài báo của Garrett)
5
Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX trình duyệt phía
người dùng chỉ cần tải về phần của trang Web mà người dùng muốn thay đổi. Điều này
giúp cho ứng dụng Web phản hồi nhanh hơn, thông minh hơn. Ngoài ra, điểm đặc biệt
quan trọng trong công nghệ AJAX nằm ở chữ A (Asynchronous) – không đồng bộ – tức
là người dùng cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình
mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của phía người dùng, nó sẽ
báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện những thay đổi cần thiết.
Vậy tất cả cơ chế này hoạt động thực sự thế nào?
AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này. Khi đó, các yêu cầu
gửi (resquest) và nhận (response) do AJAX Engine thực hiện. Thay vì trả dữ liệu dưới
dạng HTML và CSS trực tiếp cho trình duyệt, Web server có thể gửi trả dữ liệu dạng
XML và AJAX Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS
cho trình duyệt hiển thị. Việc này được thực hiện trên client nên giảm tải rất nhiều cho
server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không
cần nạp lại trang. Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML
làm cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dung lượng
trang phải nạp. Đây là những lợi ích hết sức thiết thực mà AJAX đem lại.
Chúng ta sẽ xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động và
việc sử dụng Javascript kết nối chúng trong phần tiếp theo.
4. Các ứng dụng AJAX phổ biến
Google Suggest hiển thị các thuật ngữ gợi ý gần như ngay lập tức khi người sử dụng
chưa gõ xong từ khóa. Còn với Google Maps, mọi người có thể theo dõi những thay

đổi, xê dịch, kéo thả bản đồ như trên môi trường desktop. Google Suggest và Google
Maps là hai ví dụ nổi bật về phương pháp ứng dụng web thế hệ mới. Hãng dịch vụ tìm
kiếm hàng đầu thế giới đã đầu tư rất nhiều vào việc phát triển AJAX. Hầu như mọi
chương trình họ giới thiệu gần đây, từ Orkut, Gmail đến phiên bản thử nghiệm Google
Groups, đều là những ứng dụng AJAX.
Những dự án trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đang
hiện diện ngay trong thế giới thực, từ mô hình rất đơn giản như Google Suggest đến
tinh vi và phức tạp như Google Maps.
Tuy vậy, Ajax chưa thể thực hiện tất cả mọi thứ. Những ứng dụng phụ thuộc nhiều vào
máy tính cố định như Photoshop của Adobe sẽ không xuất hiện sớm trên trình duyệt.
Ngay cả Google cũng phải tạo một phần mềm bản đồ trên desktop (Google Earth) và
yêu cầu tải chương trình về để có thể hiển thị hình ảnh 3D và thực hiện một số tính
năng cải tiến khác. Hơn nữa, ứng dụng web đòi hỏi phải liên tục kết nối với Internet,
khiến công việc trên sẽ trở nên khó khăn nếu bị gián đoạn.
6
CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX
1. Đối tượng XMLHttpRequest
Yếu tố then chốt trong công nghệ Ajax là đối tượng XMLHttpRequest
Tất cả các trình duyệt ngày nay (IE7+, Firefox, Chrome, Safari, and Opera) đều có một
đối tượng được xây dựng sẵn (XMLHttpRequest) hỗ trợ công nghệ này.
Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với server. Với công
nghệ này, một phần của trang web sẽ được cập nhật mà không phải tải lại toàn bộ trang.
Cú pháp cho việc tạo một đối tượng XMLHttpRequest:
xmlhttp=new XMLHttpRequest();
Với những trình duyệt cũ như IE5 và IE6 sử dụng ActiveX Object thì:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
Do vậy mà để làm việc với tất cả các trình duyệt, bao gồm cả IE5 và IE6, chúng ta kiểm
tra phiên bản của trình duyệt rồi mới tạo đối tượng XMLHttpRequest (hay
ActiveXObject).
if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2. Các phương thức của đối tượng XMLHttpRequest
Để gửi một request tới server, chúng ta sử dụng hai phương thức là open() và send() của
đối tượng XMLHttpRequest
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
7
2.1. Phương thức open()
Phương thức này được sử dụng để thiết lập kết nối tới server
Cú pháp:
open(method,url,async)
Miêu tả:
Tham số Miêu tả
method method: có hai loại là GET và POST
GET thì đơn giản và nhanh hơn POST, và nó được sử dụng trong hầu
hết các trường hợp. Tuy nhiên ta sử dụng POST request khi mà:
 Gửi một lượng lớn dữ liệu lên server (POST không giới hạn
kích thước dữ liệu)
 Gửi đi thông tin trên một form nhập liệu người dùng (POST thì
mạnh và bảo mật hơn là GET)
url Đặc tả vị trí của file trên server
File này có thể là bất kì loại nào, .txt hay .xml hay là một file mã kịch
bản .asp hay .php
async true : bất đồng bộ

false: đồng bộ
Để AJAX có thể hoạt động bất đồng bộ, ta phải thiết lập tham số
async trong phương thức open() là true:
Gửi đi một request một cách bất động bộ là một cải tiến quan trọng
cho người phát triển web do nhiều tác vụ thực hiện trên server mất rất
nhiều thời gian. Trước khi có AJAX thì nó có thể làm cho ứng dụng bị
treo hay dừng đột ngột.
Với AJAX, ta không phải đợi trả lời từ server , thay vào đó là:
• Thực hiện hay những đoạn mã khác trong khi đợi response từ
server
• Giải quyết ngay với response khi mà nó đã ở trạng thái sẵn
sàng
2.2. Phương thức send()
Phương thức được sử dụng để gửi yêu cầu tới server
8
Cú pháp:
send(string)
Miêu tả:
Tham số Miêu tả
string Chuỗi các giá trị truyền lên server
chỉ được sử dụng cho request dạng POST
Một GET request đơn giản:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
Một POST request đơn giản:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
Để POST dữ liệu như một form HTML, ta thêm một HTTP header bằng phương thức
setRequestHeader(). Rồi đặc tả dữ liệu muốn gửi đi bằng phương thức send():
xmlhttp.open("POST","ajax_test.asp",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
Phương thức Miêu tả
setRequestHeader(header,value)
Thêm HTTP headers vào request.
header: đặc tả tên header
value: đặc tả giá trị header
3. Các thuộc tính của đối tượng XMLHttpRequest
Để nhận phản hồi từ server, ta sử dụng hai thuộc tính responseText hoặc responseXML
của đối tượng XMLHttpRequest
Property Description
responseText nhận dữ liệu phản hồi là một string
responseXML Nhận dữ liệu phản hồi là một tài liệu XML
9
3.1. Thuộc tính responseText
Nếu phản hồi từ server không phải là một tài liệu XML, ta sử dụng thuộc tính
responseText. Thuộc tính responseText trả về một chuỗi kí tự nhận được từ server.
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Ví dụ:
Khi nút được click, hàm changeContent() được kích hoạt với tham số
text file.txt , nội dung file text file.txt sẽ được đọc ra và thay thế vào vị trí ô text trên
trình duyệt.
Hàm changeContent()
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else

{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
10
if (xmlhttp.readyState==4)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
Kết quả khi mà nút được nhấn
3.2. Thuộc tính responseXML
Nếu phản hồi từ server là một tài liệu XML, ta sử dụng thuộc tính responseXML
(nhận thông tin từ file cd_catalog.xml và hiện lên trình duyệt)
xmlDoc = xmlhttp.responseXML;
var txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
Khi một request được gửi tới server, khi đó thì server sẽ phản hồi lại (response), điều
chúng ta muốn là thực hiện một vài hành động dựa trên response này. Ta sử dụng 3
11
thuộc tính quan trọng của đối tượng XMLHttpRequest. Đó là : onreadystatechange,
readyState và status

Ví dụ: Ajax nhận dữ liệu từ một file XML
Khi nút được nhấn, nó gọi hàm loadXMLDoc() với tham số xml file.xml,
hàm này sẽ đọc nội dung của tài liệu xml file.xml, bóc tách nội dung và đẩy vào một
bảng rồi hiện lên trình duyệt.
Hàm loadXMLDoc()
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
12
txt=txt + "<tr>";
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";

}
catch (er)
{
txt=txt + "<td> </td>";
}
}
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
13
Nội dung file ajax_test2.xml
<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->

<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>

<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
</CATALOG>
14
Kết quả nhận được
3.3. Thuộc tính onreadystatechange
Thuộc tính onreadystatechange sẽ đặc tả một hàm, hàm này sẽ được gọi bất cứ khi nào
mà thuộc tính readyState thay đổi giá trị
3.4. Thuộc tính readyState
Lưu trữ trạng thái của XMLHttpRequest
Có 5 trạng thái của readyState
0: request chưa đượckhởi tạo
1: kết nối tới server được thiết lập

2: nhận được request
3: đang tiến hành xử lý request
4: request đã hoàn thành và response ở trạng thái sẵn sàng
3.5. Thuộc tính status
200: "OK"
404: Page not found
Ví dụ sau đây sẽ hiện lên trình duyệt dữ liệu trả về từ server khi readyState chuyển
trạng thái sang 4, và status là 200
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
15
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
4. Ajax và PHP
Ajax có thể phối hợp với các ngôn ngữ kịch bản khác để tăng tính tương tác cho trang
web. Ví dụ như PHP, ASP, hay là JSP.
Sau đây là một ví dụ về việc sử dụng Ajax phối hợp với PHP
Chú ý là site này bắt buộc phải chạy trên webserver, nếu sử dụng WampServer hay
Appserv, hãy copy site này vào thư mục www.
Khi ta gõ một vài chữ cái trong ô text box, sự kiện onkeyup sẽ kích hoạt hàm
showHint(), hàm này có gọi ra file suggestion.php với param tương ứng, để lấy nội
dung rồi điền vào Suggestions trên trình duyệt.
Nội dung hàm showHint()
function showHint(str)
{
if (str.length==0)
{

document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
16