z
TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG
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
Giảng viên hướng dẫn:
Sinh viên thực hiện:
Trần Phan Thanh
Lê Văn Đảo
Lớp: Công Nghệ Thông Tin 12150301
TPHCM, 07/04/2014
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
1. ASP.NET AJAX Control Toolkit 27
2. jQuery 30
TÀI LIỆU THAM KHẢO 32

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í
4
dụ người 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

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

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

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

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

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

if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
16
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_test3.php?q="+str,true);
xmlhttp.send();
}
Mã kịch bản trong file ajax_test3.php
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response

24
Đăng nhập vào để chat
Sauk khi login
25