Báo cáo tìm hiểu công nghệ Ajax

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

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.
Trần Phan Thanh
Lê Văn Đảo
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í
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

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>
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
}
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";

$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
17

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

echo $response;
?>
18
Kết quả khi ta ấn vào một phím bất kì
Khi ấn phím e
Khi ấn phím a

19
CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN
GIẢN SỬ DỤNG CÔNG NGHỆ AJAX
1. Thiết kế thêm, xóa sử dụng Ajax, Mysql và Php.
Thêm nội dung vào CSDL
Cơ sở dữ liệu sau khi thêm
20
Xóa dữ liệu chỉ cận click vào dấu X

Kết quả xóa nội dung
21
2. Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) sử dụng Ajax, Php và
Mysql.
Khi gõ một từ khóa, các tên sách được gợi ý sẽ hiện ra
Khi gõ vào từ khóa Fun
22
CSDL của trang tìm kiếm
23
3. Thiết kế ứng dụng Web Chat sử dụng Ajax, Php và Mysql.
Giao diện chính
CSDL gồm 2 bảng.
webchat_lines
webchat_users

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