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

+ 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

đổ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)

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);

{// 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

}
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® -->

<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

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

Trích đoạn ASP.NET AJAX ControlToolkit

---