Giới thiệu về AJAX

AJAX (Tham khảo từ http://developer.mozilla.org)

Bài viết này hướng dẫn bạn những kiến thức cơ bản về AJAX và cho bạn hai bài thực hành đơn giản để bạn có thể từng bước làm quen và bắt đầu với AJAX.
Qua bài viết này, bạn sẽ biết được những gì?
1. AJAX là gì?
2. Làm thế nào để tạo được một HTTP Request.
3. Bắt Server Response.
4. Ví dụ đơn giản.
5. Làm việc với XML Response.
1. AJAX là gì?
AJAX được viết tắt từ Asynchronous Javascript and XML, tức là Javascript và XML không đồng bộ. Nói một cách ngắn gọn, nó dùng đối tượng (object) XMLHttpRequest (nonstandard) để giao tiếp với Server-side scripts. Nó có thể gửi cũng như nhận các thông tin ở nhiều hình dạng khác nhau như XML, HTML hay thậm chí là các file text. AJAX có thể làm tất cả những việc trên mà không cần phải resfresh lại trang web, cho phép bạn cập nhật được một phần của trang web dựa trên những sự kiện từ phía người dùng.
Hai tính năng bạn cần ghi nhớ:
- Tạo các request tới server mà không cần phải reloading page.
- Phân tích và làm việc với các tài liệu XML.
2. Làm thế nào để tạo được một HTTP Request?
Để tạo được một HTTP Request tới server bằng cách sử dụng Javascript, bạn cần tạo một instance của một lớp chức năng như một lớp được giới thiệu trong IE giống như một đối tượng ActiveX, gọi là XMLHTTP. Các trình duyệt khác như Mozila, Safari….cũng theo như vậy, bổ sung một lớp XMLHttpRequest hỗ trợ các phương thức (Method) và thuộc tính (Properties) của đối tượng Microsoft’s original ActiveX.
Vậy, để tạo một instance qua các browser của lớp yêu cầu, bạn làm như sau:
// ---------------------------------//
Var httpRequest;
If (window.XMLHttpRequest){ // Morzila, Safari…
httpRequest = new XMLHttpRequest();
} else if(window.ActiveXObject){ //IE
httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
//----------------------------------//
Một vài phiên bản của Mozilla không làm việc nếu response từ server không kèm theo XML mime-type header. Để loại bỏ vấn đề này, bạn có thể dùng thêm một phương thức mở rộng để gọi đè lên header gửi bởi server, trong trường hợp nó không phải là hình thức text/xml.
//-------------------------------------//
httpRequest = new XMLHttpRequest();
httpRequest.overrideMimeType(‘text/xml’);
//--------------------------------------//
Tiếp theo, bạn muốn quyết định cần nhận được gì từ response của server qua request của mình. Lúc này bạn cần chỉ cho đối tượng HTTP Request hàm Javascript nào sẽ làm việc với quá trình xử lý của response. Điều này được thực hiện bằng cách đặt thuộc tính onreadystatechange của đối tượng tới tên của hàm Javascript mà bạn muốn sử dụng. Vd:
//----------------------------------------//
httpRequest.onreadystatechange = nameOfTheFunction;
//----------------------------------------//
* Lưu ý là không có dấu ngoặc đơn đóng mở cho tên hàm và cũng không có một tham số nào truyền vào vì bạn đã trỏ một tham chiếu tới hàm hơn là thực sự gọi nó. Ngoài ra, thay vì đưa ra tên của một function, bạn có thể sử công nghệ của Javascript để định nghĩa function (gọi là “anonymous function”) và định nghĩa các action sẽ được xử lý với response. Vd:
//---------------------------------------------//
httpRequest.onreadystatechange = function(){
//….
};
//----------------------------------------------//
Tiếp theo nữa, sau khi khai báo những gì định sẽ nhận được từ response của server, bạn cần tạo một request thực sự bằng cách gọi các phương thức open() và send() của lớp HTTP request. Vd:
//---------------------------------------------//
httpRequest.Open(‘GET’,’http://www.example.org/some.file’,true);
httpRequest.Send(null);
//---------------------------------------------//
Tham số đầu tiên của phương thức Open() là HTTP request method – GET, POST, HEAD hay bất kì phương thức nào bạn muốn dùng mà được hỗ trợ bởi server. Viết các tên phương thức này bằng chữ in hoa như trên chuẩn của HTTP nếu không một số Browser (như FireFox) sẽ không xử lý request này.
Tham số thứ hai là URL của page mà bạn request. Vì lý do bảo mật nên bạn không thể gọi các page trên các domain 3rd-party. Đảm bảo chính xác tên của các domain trên tất cả các page mà bạn request nếu không bạn sẽ nhận được báo lỗi “Permission Denied” khi bạn gọi phương thức Open().
Thứ ba là tập hợp các tham số của request không đồng bộ. Nếu là TRUE, function của Javascript sẽ cứ tiếp tục chạy và chờ trong khi response của server chưa tới. Đây chính là chứ A trong Ajax.
Tham số truyền vào phương thức Send() có thể là bất kỳ dữ liệu nào mà bạn muốn gửi tới server nếu POST-ing request. Dữ liệu có thể ở dạng một chuỗi query. Vd:
//----------------------------------------------------//
Name=value&&anothername=othervalue&so=on
//----------------------------------------------------//
Lưu ý rằng nếu bạn muốn POST dữ liệu, bạn phải thay đổi kiểu MIME type của request như sau:
//----------------------------------------------------//
httpRequest.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
//----------------------------------------------------//
Nếu không server sẽ từ chối dữ liệu POST.
3. Handling the Server Response:
Ghi nhớ rằng khi bạn đã gửi một request, bạn đã phải cung cấp tên Javascript function được thiết kế để bắt response.
//-----------------------------------------------------//
httpRequest.onreadystatechange = nameofthefunction;
//-----------------------------------------------------//
Hãy xem những function này sẽ làm gì? Trước tiên, function cần kiểm tra trạng thái của request. Nếu trạng thái của request có giá trị là 4 thì tức là đã nhận được đầy đủ repsonse từ server và bạn có thể tiếp tục xử lý.
//----------------------------------------------------//
If (httpRequest.readystatus==4){
// everthing is good, the repsonse is received.
} else {
// still not ready
}
//-----------------------------------------------------//
* Sau đây là danh sách các giá trị của readystate:
- 0: chưa khởi tạo.
- 1: đang nạp;
- 2: đã nạp;
- 3: tương tác;
- 4: hoàn thành;
Tiếp theo là kiểm tra status code của HTTP response. Tất cả các code được liệt kê dưới ở trang W3C, chúng ta chỉ quan tâm tới 200 OK Response cho mục đích của mình.
//-----------------------------------------------//
If(httpRequest.status == 200){
//perfect!
} else {
// there was a problem with the request.
// for example the response may be a 404 (Not found).
// or 500 (Internal server error) response codes.
}
//------------------------------------------------//
Bây giờ, sau khi đã kiểm tra tình trạng của request và HTTP status code của response là bạn phải làm gì với dữ liệu mà server đã gửi cho bạn. Bạn có hai lựa chọn để truy cập dữ liệu:
- httpRequest.responseText – sẽ trả về một server response ở dạng text.
- httpRequest.respon***ML – sẽ trả về response dưới dạng một đối tượng XML document mà bạn có thể xử lý qua các hàm Javascript DOM.
4. Ví dụ đơn giản:
Bây giờ hãy tổng hợp tất cả lại và thực hiện một HTTP request đơn giản. Đoạn mã javascript của chúng ta sẽ request một HTML document, test.html có chứa một dòng text là “I’m a test”. Và sau đó chúng ta sẽ alert() nội dung của file test.html.
//---------------------------------------------------//
<script type=”text/javascript” language=”javascript”>
Function makeRequest(url){
Var httpRequest;
If(window.XMLHttpRequest) { // Mozilla, Safari…
httpRequest = new XMLHttpRequest();
if(httpRequest.overrideMimeType) {
httpRequest.overrideMimeType(‘text/xml’);
}
}
Else if(window.ActiveXObject) { // IE
Try{
httpRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
Catch (e) {
Try{
httpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
Catch (e) {}
}
}
If (!httpRequest) {
Alert(‘Giving up: (Cannot create XMLHTTP instance)’);
Return false;
}
httpRequest.onreadystatechange = function(){alert(httpRequest);};
httpRequest.open(‘GET’,url,true);
httpRequest.send(‘’);
}
Function alertContents(httpRequest)
{
If(httpRequest.readystate ==4){
If(httpRequest.status == 200){
Alert(httpRequest.responseText);
}else{
Alert(‘There was a problem with the request.’);
}
}
}
</script>
<span style=”cursor: pointer; text-decoration: underline” onclick=”makerRequest(‘test.html’)”>Make a request </span>
//---------------------------------------------------//

Ở ví dụ trên:
- Khi người dùng click vào link “Make a request” trên browser;
- Gọi hàm makeRequest() và truyền vào tham số tên là test.html của một file html trong cùng một thư mục.
- Request được thực hiện và được truyền vào hàm alertContents();
- alertContents() kiểm tra nếu đã nhận được response thì hiển thị nội dung của test.html.
Ghi nhớ: httpRequest.MimeType(‘Text/XML’); sẽ bị lỗi Javascript console trong phiên bản FireFox 1.5 trở lên.
Nếu bạn đang request một phần của đoạn code mà sẽ trả về XML, bạn phải đặt một số response header nếu page của bạn làm việc trên IE và Mozilla. Nếu bạn không đặt header Content-Type: application/xml, IE sẽ bung ra lỗi Javascript: ‘Object Expected’ ở ngay sau dòng mà bạn cố truy cập xml document. Nếu bạn không đặt header Cache-Control: no-cache, browser sẽ cache lại response và không bao giờ re-submit lại request.
Nếu biến httpRequest được sử dụng toàn cục, các function cạnh tranh gọi makeRequest() sẽ overwrite lên nhau. Khai báo biến httpRequest cục bộ trong function và truyền vào alertContents() để tránh trường hợp trên.
Để đăng ký callback function onreadystatechange, bạn không thể có bất ký tham số nào. Đây là lý do dòng code sau đây không chạy:
//--------------------------------------------------------//
httpRequest.onreadystatechange = alertContents(httpRequest); // does not work
//--------------------------------------------------------//
Vậy, để đăng ký function thành công, bạn phải truyền vào tham số thông qua anchrynous function hoặc sử dụng httpRequest như một biến cục bộ. Vd:
//--------------------------------------------------------//
httpRequest.onreadystatechange = function(){alertContents(httpRequest);};
httpRequest.onreadystatechange = alertContents;
//--------------------------------------------------------//
Trong trường hợp giao tiếp bị lỗi (server down), một exception sẽ được bắt trong phương thức onreadystatechange khi ta cố thử truy cập biến status. Vd:
//--------------------------------------------------------//
Function alertContents(httpRequest){
Try{
If(httpRequest.readstatus == 4){
If(httpRequest.status==200){
Alert(‘httpRequest.responseText’);}
Else{alert(‘There was a problem with the request’);
}
}
}
Catch (e) { alert(‘Caugh Exception: ’+e.description);
}
}
//--------------------------------------------------------//

5. Làm việc với XML Response:
Ở ví dụ trước, sau khi response tới HTTP, ta đã dùng responseText của đối tượng request, chứa nội dung của file test.html. Giờ ta áp dụng chúng sang test.xml
<?xml version=”1.0”?>
<root>
I’m a test
</root>
 onclick = “makeRequest(‘test.xml’)”;
 var xmldoc = httpRequest.respon***ML;
Var root_node = xmldoc.getElementByTagName(‘root’).item(0);
Alert(root_node.firstChild.data);
HẾT