Tìm hiểu về kỹ thuật AJAX

Xây dựng ứng dụng minh họa bằng PHP

1/19/2010
Cao Đẳng Kĩ Thuật Cao Thắng
Dương Vì Phát
 Tìm hiểu về AJAX

Chương 1: Giới thiệu về AJAX

1.1 AJAX = Asynchronous JavaScript and XML

AJAX không phải là một công nghệ mới hay một ngôn ngữ lập trình mới, đó là một kỹ
thuật cho phép tạo các ứng dụng website tốt hơn, nhanh hơn và có tính tương tác hơn.

Với AJAX, JavaScript có thể giao tiếp trực tiếp với Server, bằng cách sử dụng đối tượng
XMLHttpRequest. Với Object này, JavaScript có thể trao đổi dữ liệu với Web Server, mà
không phải reload lại trang web.

AJAX sử dụng kiểu truyền dữ liệu bất đồng bộ (HTTP requests) giữa trình duyệt web và
web server, cho phép trang web có thể request một phần thông tin từ Server thay vì cả
trang web.

Kỹ thuật AJAX làm cho các ứng dụng Internet nhỏ hơn, nhanh hơn và thân thiện hơn với
người dùng cuối.

1.2 AJAX is Based on Web Standards

AJAX là kỹ thuật dựa trên các nền tảng Web:

 JavaScript
 XML
 CSS
 HTML

Các nền tảng trên đều được hỗ trợ tốt trên nhiều trình duyệt Web khác nhau, nhiều hệ
thống khác nhau do đó AJAX cũng không lệ thuộc vào trình duyệt web hay hệ thống nào.
(The web standards used in AJAX are well defined, and supported by all major browsers.
AJAX applications are browser and platform independent.)

1.3 AJAX is About Better Internet Applications

Web applications have many benefits over desktop applications; they can reach a larger
audience, they are easier to install and support, and easier to develop. (Ứng dụng Web có
nhiều ưu điểm so với ứng dụng Desktop, nó có thể vươn đến lượng người sử dụng rất lớn,
dễ dàng cài đặt và hỗ trợ, dễ dàng phát triển hơn).

Dương Vì Phát Trang 1

However, Internet applications are not always as "rich" and user-friendly as traditional
desktop applications. (Tuy nhiên, ứng dụng Web lại không nhiều chức năng và không
thân thiện với người dùng như các ứng dụng Desktop truyền thống).

With AJAX, Internet applications can be made richer and more user-friendly. (Với AJAX,
ứng dụng web có thể phong phú hơn và thân thiện hơn)

Chương 2: AJAX Http Requests

2.1 AJAX Uses HTTP Requests

Với cách code JavaScript truyền thống, nếu bạn muốn lấy bất kì thông tin nào từ database
hoặc từ một file trên server, hoặc muốn gửi thông tin người dùng đến Server, bạn sẽ phải
tạo một form HTML và gửi dữ liệu đến Server bằng phương thức GET hoặc POST.
Người dùng sẽ phải nhấp chuột vào nút submit để gửi/nhận thông tin, đợi phản hồi của
server và sau đó đợi trang web load lại với các kết quả được trả về.

Bởi vì server sẽ trả về một trang web mới mỗi khi người dùng submit input nên ứng dụng
web truyền thống có thể chạy rất chậm và có xu hướng kém thân thiện với người dùng.

Với AJAX, JavaScript giao tiếp trực tiếp với server, thông qua đối tượng JavaScript
XMLHttpRequest. Với HTTP Request, một trang web có thể gửi request và nhận
response từ web server mà không phải reloading lại trang. Người dùng vẫn ở tại trang
hiện tại, và họ sẽ không nhận thấy mọi việc đang diễn ra phía sau đó. (Request hoặc send
data đến server đều diễn ra trong background)

2.2 The XMLHttpRequest Object

Bằng cách sử dụng đối tượng XMLHttpRequest, web developer có thể cập nhật lại
trang web với dữ liệu từ server sau khi trang web đã được load!

AJAX bắt đầu được phổ biến trong năm 2005 mà công đầu thuộc về Google (với Google
Suggest)

Google Suggest sử dụng đối tượng XMLHttpRequest to create a very dynamic web
interface: Khi bạn gõ vào Search box của Google, một đoạn JavaScript sẽ gửi các kí tự
mà bạn gõ vào server và server sẽ trả về danh sách các suggestions (các gợi ý về từ khóa
tìm kiếm dựa theo những gì bạn đã gõ vào Search box).

XMLHttpRequest được hỗ trợ trong Internet Explorer 5.0+, Safari 1.2, Mozilla Firefox
1.0, Opera 8+ và Netscape 7.

Dương Vì Phát Trang 2

Chương 3: AJAX Examples

3.1 Your First AJAX Application

Để hiểu cách AJAX hoạt động, chúng ta nên bắt đầu với một ứng dụng AJAX nhỏ.

Đầu tiên, tạo một form HTML với 2 text field, username và time. Field username sẽ được
điền bởi User và field time sẽ được điền bởi AJAX, đặt tên file này là "testAJAX.html"

<html>
<body>
<form name="myForm">
Name: <input type="text" name="username" />
Time: <input type="text" name="time" />
</form>
</body>
</html>

 Bạn có thể nhận ra rằng đoạn code cho form HTML này không hề có nút Submit
 Yếu tố quyết định của AJAX là đối tượng XMLHttpRequest
 Các trình duyệt khác nhau sử dụng các phương thức khác nhau để khởi tạo đối
tượng XMLHttpRequest: Internet Explorer sử dụng ActiveXObject trong khi các
trình duyệt khác sử dụng đối tượng sẵn có của JavaScript gọi là XMLHttpRequest.
 Để tạo đối tượng này và có thể chạy trơn tru trên nhiều trình duyệt Web khác nhau,
chúng ta sẽ sử dụng kết hợp các lệnh "Try Catch".

Tiếp theo, thêm đoạn code JavaScript dưới đây vào file "testAJAX.html":

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try

Dương Vì Phát Trang 3

 {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
}
</script>

Cụ thể hơn, với trình duyệt IE5 thì khởi tạo đối tượng XMLHttpRequest bằng cách:

var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

IE6:

var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

Còn với trình duyệt IE7+, Firefox, Safari, Opera, Chrome…

var xmlhttp = new XMLHTTPRequest();

Vậy, với đoạn Try Catch trên thì trước hết sẽ khởi tạo xmlhttp = new XMLHTTPRequest();
Nếu thất bại thì sẽ khởi tạo xmlhttp = new ActiveXObject("Msxml12.XMLHTTP"); Nếu
lại thất bại thì sẽ khởi tạo xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); và
cuối cùng nếu tất cả các cách trên đều không được thì xuất thông báo "Trình duyệt của
bạn không hỗ trợ AJAX".

Tuy đoạn code trên hơi dài và phức tạp nhưng bạn có thể sử dụng chúng mỗi khi bạn
muốn khởi tạo một instance của đối tượng XMLHttpRequest, chỉ việc copy và paste thôi.
Và đoạn code trên có thể tương thích với mọi trình duyệt Web hiện nay.

Dương Vì Phát Trang 4

3.2 AJAX - More About the XMLHttpRequest Object
Các thuộc tính quan trọng của đối tượng XMLHttpRequest, bạn nên nắm rõ chúng trước
khi xây dựng một ứng dụng sử dụng tổ hợp công nghệ AJAX

1. Thuộc tính onreadystatechange: Sau khi gửi request đến Server, chúng ta cần
một hàm có thể nhận dữ liệu được gửi về từ Server, thuộc tính onreadystatechange
sẽ xác định hàm được gọi lên để xử lý response từ server. Hàm được lưu trong
thuộc tính onreadystatechange sẽ tự động được gọi mỗi khi ReadyState bị thay đổi.

xmlHttp.onreadystatechange=function()
{
// We are going to write some code here
}

2. Thuộc tính readyState: Thuộc tính này cho biết trạng thái của đối tượng request:
a. readyState = 0: request chưa được khởi tạo - The request is not initialized
b. readyState = 1: request đã được thiết lập - The request has been set up
c. readyState = 2: request đã được gửi - The request has been sent
d. readyState = 3: request đang được xử lý - The request is in process
e. readyState = 4: request hoàn tất - The request is complete

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
// Get the data from the server's response
// Lấy dữ liệu từ Server khi server hoàn tất việc
response - tức là ta đã có thể lấy được dữ liệu cần lấy.
}
}
3. Thuộc tính responseText: Dữ liệu từ Server gửi về có thể được lấy ra từ thuộc
tính responseText.
Trở lại với ví dụ "testAJAX.html", chúng ta sử dụng AJAX lấy giá trị từ Server để
điền vào field "time", vậy đoạn code cần thiết sẽ là:

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
Dương Vì Phát Trang 5
 4. Thuộc tính responseXML: Thay vì trả về response của server dưới dạng Text như
responseText property, responseXML sẽ trả về một đối tượng dữ liệu XML (XML
Document)

3.3 AJAX - Request a Server

Để bắt đầu việc gửi một Request đến Server, chúng ta phải sử dụng method open() và
send().

Method open() cần 3 đối số, đối số thứ nhất sẽ xác định phương thức được dùng gửi
Request (GET hay POST), đối số thứ hai xác định URL của Server-Side Script sẽ xử lý
Request này, đối số thứ ba xác định Request có được xử lý bất đồng bộ (asynchronously)
hay không? ('true' hoặc 'false').

Ví dụ:

xmlHttp.open("GET","time.php",true);

Method send(data) sẽ gửi request đến Server, nếu method gửi request là GET thì data =
null, ngược lại, nếu method gửi request là POST thì data sẽ được truyền đi. (Phải thiết lập
lại Header của trang bằng method setRequestHeader như trong ví dụ sau trước khi cần
Request bằng phương thức POST)
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state

changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);

Trở lại với ví dụ "testAJAX.html", do form không có một button nào nên chúng ta sẽ tận
dụng event onkeyup của field "username", mỗi khi người dùng gõ phím vào field
"username" thì AJAX sẽ gửi request về Server và lấy thời gian hiện tại của Server và fill
vào field "time":

<form name="myForm">

Dương Vì Phát Trang 6

Name: <input type="text"
onkeyup="ajaxFunction();" name="username" />
Time: <input type="text" name="time" />
</form>

Sửa lại hàm ajaxFunction():

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
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("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open("GET","time.asp",true);
Dương Vì Phát Trang 7
 xmlHttp.send(null);
}
</script>

Đoạn code xử lý bên phía Server, file time.php:

<?php

echo date("h:i:s");

?>

Và… Chạy thử nào!

Dương Vì Phát Trang 8

Tạm thời dừng lại ở phần cơ bản này, Mình sẽ cập nhật tiếp, chắc chắn

Theo W3Schools

Mục lục
Chương 1: Giới thiệu về AJAX ....................................................................................... 1
1.1 AJAX = Asynchronous JavaScript and XML ......................................................... 1
1.2 AJAX is Based on Web Standards ......................................................................... 1
1.3 AJAX is About Better Internet Applications .......................................................... 1
Chương 2: AJAX Http Requests ...................................................................................... 2
2.1 AJAX Uses HTTP Requests .................................................................................. 2
2.2 The XMLHttpRequest Object ................................................................................ 2
Chương 3: AJAX Examples............................................................................................. 3
3.1 Your First AJAX Application ................................................................................ 3
3.2 AJAX - More About the XMLHttpRequest Object ................................................ 5
3.3 AJAX - Request a Server ....................................................................................... 6

Dương Vì Phát Trang 9