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 Dương Vì Phát Trang 1
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
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 3
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
{
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 5
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
document.myForm.time.value=xmlHttp.responseText;
}
}
Dương Vì Phát Trang 6
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");
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 8
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
Copyright: Tài liệu đại học ©