Bình thường, mỗi khi browser gởi 1 yêu cầu lên server thì nó phải reload lại trang web, tức là yêu cầu server gửi lại toàn bộ trang web.
Kĩ thuật Ajax (Asynchronous Javascript And Xml) giúp cho browser có thể gửi yêu cầu đến server và nhận response mà không cần reload lại trang web. Ngoài ra, request này có thể được thực hiện 1 cách bất đồng bộ ( trong quá trình thực hiện request, người dùng vẫn có thể tương tác với trang web)
Kĩ thuật này sử dụng đối tượng XMLHttp để thực hiện các truy vấn lên server.
Ta sẽ sử dụng javascript để thao tác trên đối tượng XMLHttp.
Bước đầu tiên cần phải thực hiện trong việc sử dụng đối tượng XMLHttp là phải tạo nó. Đối với các trình duyệt khác nhau thì việc tạo đối tượng này sẽ khác nhau.
Đối với Internet Explorer (IE), đối tượng này được cài đặt dưới dạng 1 ActiveXObject. Do đó, để tạo được nó, cần phải thực hiện câu lệnh javascript sau:
var oXmlHttp = new ActiveXObject("Microsoft.XMLHttp");
Trong đó Microsoft.XMLHttp là loại đối tượng ActiveXObject cần tạo.
Tuy nhiên, có nhiều phiên bản IE khác nhau nên để đối tượng XMLHttp cũng có nhiều phiên bản khác nhau.
Các phiên bản này là:
• Microsoft.XMLHttp
• MSXML2.XMLHttp
• MSXML2.XMLHttp.3.0
• MSXML2.XMLHttp.4.0
• MSXML2.XMLHttp.5.0
Để viết 1 đoạn code tổng quát, có thể sử dụng cho bất kì phiên bản IE nào, ta sẽ dùng câu lệnh
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
với objXMLHttp là mộ đối tượng XMLhttp trả về
xmlHttp=GetXmlHttpObject()
Sử dụng đói tượng XMLHttp
Sau khi đã tạo đối tượng XMLHttp, ta bắt đầu thực hiện việc tạo request đến server. Bước đầu tiên là gọi phương thức open, dùng để khởi tạo đối tượng. Phương thức này nhận vào 3 tham số:
• Request Type: là 1 chuỗi cho biết loại request cần thực hiện, có thể là GET hoặc POST.
• URL: là chuỗi URL cho biết địa chỉ cần gởi request đến.
• Async: là 1 giá trị boolean, cho biết request có được thực hiện 1 cách bất đồng bộ hay không.
Tham số này rất quan trọng, nó xác định cách thức mà javascript thực hiện request. Khi được thiết lập là true, request sẽ được thực hiện 1 cách bất đồng bộ, và các đoạn lệnh javascript vẫn tiếp tục được thực hiện mà không cần phải chờ response từ server. Vì vậy, ta cần phải cài đặt 1 hàm xử lí sự kiện có nhiệm vụ chờ response từ server. Nếu async là false thì các đoạn lệnh javascript kế tiếp sẽ không được thực hiện cho đến khi server gởi xong dữ liệu về. Nếu như thời gian mà server trả response về là lâu thì sẽ gây bất tiện vì người dùng không thể tương tác được với trang web trong khoảng thời gian đó. Vì vậy, cách tốt nhất là gán cho async giá trị True khi gọi hàm open.
Ví dụ: Để thực hiện 1 request yêu cầu server trả về nội dung file info.txt nằm trên thư mục chứa trang web trên server thì ta thực hiện như sau:
oXmlHttp.open("get", "info.txt", true);
Đối tượng XMLHttp có 1 thuộc tính là readyState, tham số này sẽ thay đổi khi mà request được thực hiện và khi client nhận được response từ server. Thuộc tính này có 5 giá trị như sau:
• 0 (Uninitialized): Đối tượng mới đựơc tạo nhưng hàm open chưa được gọi.
• 1 (Loading): Hàm open mới được gọi nhưng request chưa được gởi
• 2 (Loaded): Request vừa mới được gởi
• 3 (Interactive): Client đã nhận được một phần response từ server
• 4 (Complete): Tất cả dữ liệu đã được server gởi về client và kết nối đã đóng lại.
Mỗi lần thuộc tính readyState thay đổi giá trị thì sự kiện readystatechange được phát sinh và hàm xử lí sự kiện onreadystatechange được gọi. Do các browser cài đặt đối tượng XMLHttp khác nhau nên để đảm bảo trang web của mình có thể chạy được trên nhiều browser thì ta chỉ nên dùng các giá trị sau của thuộc tính readyState: 0, 1 và 4
Có thể mình viết như vạ thì sẽ có 1 số bạn sẽ không hiểu cho nên mình sẽ làm một demo nho nhỏ để các bạn xem và hiểu cách hoạt động của AJAX những mình khuyên các bạn nên hiểu về AJAX trên phương diện là hoạt động chứ đừng nên hiểu theo mô hình chung của AJAX, vì thật sự thì mô hinh AJAX sẽ rất là khó hiểu.
đầu tiên các bạn tạo 1 file ajaxHTML.htm
<html>
<head>
<script src="show.js"></script>
</head><body><form>
Select a Customer:
<!--Sứ lý sự kiện để gọi hàm ajax!-->
<select name="customers" onChange="showCustomer(this.value)">
<option value="0">click here</option>
<option value="1">Alfreds Futterkiste
</select>
</form><p>
<div id="txtHint"><b>ajax show here.</b></div>
</p></body>
</html>
tiếp theo các bạn tạo file js có tên là show.js
var xmlHttp
function showCustomer(str)
{
// khai báo đối tượng xmlHttp của trình duyệt
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
// request server goi ve file nay
var url="demo.htm"
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
// kiểm tra trạng thái dữ liệu gởi về
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
// lấy ID của thẻ DIV và thay thế nội dung của DIV bằng nội dung file mà sever gởi về
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
//khởi tạo đối tượng xmlhttp cho từng trình duyệt khác nhau
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
và đây là file mà ajax sẽ trả vè trình duyệt cho mình. demo.htm
<html>
<head>
<script src="tudien.js"></script>
</head><body>This is ajax code show !</body>
</html>
Do mình dùng trình duyệt IE7 nên không có quyền trên client do vậy mình chạy trên localhost nếu bạn nào không chạy được hoặc báo lỗi access deny thì bạn nên test trên IIS nhé.