AJAX::Thật đơn giản
AJAX = Asynchronous JavaScript and XML
Ajax không phải là một ngôn ngữ mới, mà là một kỹ thuật giúp tạo những ứng dụng web tốt hơn, nhỏ gọn hơn, nhanh hơn, thân thiện và chuyên nghiệp hơn.
Với Ajax, JavaScript của bạn liên lạc trực tiếp với Webserver sử dụng đối tượng XMLHttpRequest của JavaScript.
Với đối tượng này, JavaScript có thể trao đổi dữ liệu với Webserver mà không cần phải load lại trang web như bạn thường thấy.
AJAX bao gồm các thành phần của web standards:
- JavaScript
- XML
- HTML
- CSS
Do đó được hổ trợ bỡi tất cả các phiên bản của trình duyệt web.
AJAX sử dụng HTTP Requests
Đối tượng XMLHttpRequest
Bằng cách sử dụng đối tượng XMLHttpRequest, một web developer có thể cập nhật dữ liệu trên trang sau khi trang được load xong!
Đối tượng XMLHttpRequest được hổ trợ trong Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, và Netscape 7.
OK chưa nào? Thử một ứng dụng AJAX đầu tiên nhé!
1. Đầu tiên, tạo một trang HTML với tên “testAjax.htm” có nội dung như sau:
-
<html>
-
<body>
-
<form name="myForm">
-
Name: <input type="text" name="username" />
-
Time: <input type="text" name="time" />
-
</form>
-
</body>
-
</html>
2. Nào chúng ta cùng AJAX:
Sửa trang “testAjax.htm” bằng cách thêm đoạn JavaScript
-
<html>
-
<body>
-
<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("Trình duyệt của bạn không hổ trợ AJAX");
-
return false;
-
}
-
}
-
}
-
}
-
</script>
-
<form name="myForm">
-
Name: <input type="text" name="username" />
-
Time: <input type="text" name="time" />
-
</form>
-
</body>
-
</html>
Đầu tiên tạo biến xmlHttp để giữ đối tượng XMLHttpRequest
Do các trình duyệt web khác nhau có cách tạo đối tượng XMLHttpRequestkhác nhau, nên các bạn hiểu vì sao chúng ta try catch nhiều như vậy.
Internet Explorer sử dụng một ActiveXObject, trong khi đó các trinh duyệt khác sử dụng đối tượng built-in JavaScript có tên gọi XMLHttpRequest.
Cụ thể như sau:
Đầu tiên thử tạo đối tượng:
XMLHttp=new XMLHttpRequest() (sử dụng cho trình duyệt Firefox, Opera, và Safari).
Nếu không thành công, thử tiếp:
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”) (sử dụng cho Internet Explorer 6.0+).
Nếu không thành công nữa, thì thử tiếp:
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”) (sử dụng cho Internet Explorer 5.5+)
Nếu không thành công nữa thì bạn biết điều gì xảy ra rồi:
Xuất hiện thông báo “Trình duyệt của bạn không hổ trợ AJAX”
Trước khi gởi dữ liệu đến Server, chúng ta phải hiểu rõ 3 thuộc tính quang trọng của đối tượng XMLHttpRequest
a. Thuộc tính onreadystatechange
Sau khi gởi Request lên server chúng ta phải đón nhận dữ liệu Server trả về, thuộc tính này chứa hàm thực thi khi nhận được dữ liệu từ Server,code sau tạo một hàm rỗng như vừa trình bày:
-
xmlHttp.onreadystatechange=function()
-
{
-
// Chúng ta sẽ thực hiện một vài tác vụ ở đây
-
}
b. Thuộc tính readyState
Thuộc tính này lưu giữ trạng thái Response từ server. Mỗi lần readyState thay đổi, hàm onreadystatechange sẽ được thực thi.
Sau đây là bảng giá trị của readyState:
- 0 : Request chưa được khởi tạo
- 1 : Request đã được set up
- 2 : Request đã được gởi đi
- 3 : Request đang được xử lý
- 4 : Request thành công
Vì thế code chúng ta cần phải như thế này để xử lý khi Request thành công:
-
xmlHttp.onreadystatechange=function()
-
{
-
if(xmlHttp.readyState==4)
-
{
-
// Thao tác với dữ liệu từ Server trả về
-
}
-
}
c. Thuộc tính responseText
Đây là thuộc tính chứa dữ liệu từ Server trả về. Trong code, chúng ta muốn ô Input Time hiển thị giá trị trả về, làm như sau:
-
xmlHttp.onreadystatechange=function()
-
{
-
if(xmlHttp.readyState==4)
-
{
-
document.myForm.time.value=xmlHttp.responseText;
-
}
-
}
Cách gởi Request đến Server:
-
xmlHttp.open("GET","time.asp",true);
-
xmlHttp.send(null);
Code hoàn thiện tại Client
File: testAjax.htm
-
<html>
-
<body>
-
<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);
-
xmlHttp.send(null);
-
}
-
</script>
-
<form name="myForm">
-
Name: <input type="text" onkeyup="ajaxFunction();" name="username" />
-
Time: <input type="text" name="time" />
-
</form>
-
</body>
-
</html>
Xử lý trên Server như thế nào?
Đây là ví dụ ASP cho trang: time.asp
-
<%
-
response.expires=-1
-
response.write(time)
-
%>
Hãy gởi vài lời phản hồi theo mẫu dưới đây