AJAX Example

Ứng dụng AJAX đầu tiên
Để hiểu được AJAX hoạt động như thế nào, chúng ta sẽ tạo một ứng dụng AJAX nhỏ.
Đầu tiên chúng ta sẽ tạo một form HTM gồm hai trường: Name và Time. Trường Name sẽ do người dùng nhập vào, còn trường Time sẽ được AJAX điền vào.
File HTML sẽ được đặt tên là "testAjax.htm", code giống bên dưới (chú ý là form HTML bên dưới không có nút Submit)

AJAX -Trình duyệt hỗ trợ
Yếu tố quyết định của AJAX đó là đối tượng XMLHttpRequest.
Tất cả các trình duyệt mới sử dụng gắn liền đối tượng JavaScipt XMLHttpRequest để tạo ra đối tượng XMLHttpRequest ( IE5 và IE6 sử dụng một ActiveXObject).
Thêm vào "testAjax.html" một đoạn JavaScript để tạo ra đối tượng XMLHttpRequest

Giải thích:
Tạo ra một biến xmlhhtp để lưu đối tượng XMLHttpRequest.
Xét nếu trình duyệt của người dùng là IE7+, Firefox, Opera, Chrome, Safari thì sẽ tạo ra đối tượng XMLHTTP là:
xmlhttp = new XMLHttpRequest();
Nếu là trình duyệt IE5, IE6 thì đối tượng XMLHTTP được tạo như sau:
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
Ngược lại, người dùng sẽ nhận được thông báo "Your Browser doesn't support XMLHTTP".
Chú ý: đoạn code trên có thể được sử dụng mỗi lần bạn tạo ra một đối tượng XMLHTTP, vì vậy bạn nên copy và save vào một nơi để sử dụng khi cần.
AJAX - Đối tượng XMLHttpRequest
Trước khi gửi dữ liệu đến một Server, chúng ta sẽ xem xét ba thuộc tính quan trọng của đối tượng XMLHttpRequest
1. Thuộc tính onreadystatechange
Sau khi một yêu cầu được gửi đến Server, chúng ta cần một hàm để nhận dữ liệu được trả về từ Server.
Thuộc tính onreadystatechange lưu trữ hàm sẽ xử lý phản hồi từ Server. Hàm này được lưu trữ trong thuộc tính để được gọi một cách tự động.
Đoạn code bên dưới thiết lập cho thuộc tính onreadystatechange và lưu trữ một hàm rỗng bên trong nó:
xmlhttp.onreadystatechange = function()
{
//chúng ta sẽ thêm một vài dòng code ở đây
}
2. Thuộc tính readyState
Thuộc tính readyState sẽ lưu trữ trạng thái phản hồi của Server.
Mỗi lần thuộc tính readyState thay đổi, hàm onreadystatechange sẽ được thực thi.
Các giá trị mà thuộc tính readyState có thể nhận được:
State Mô tả
0 Yêu cầu không được khởi tạo
1 Yêu cầu đã được thiết lập
2 Yêu cầu đã được gửi
3 Yêu cầu đang được xử lý
4 Yêu cầu đã được hoàn thành
Thêm vào hàm onreadystatechange câu lệnh if để kiểm tra phản hồi đã được hoàn thành chưa (điều này có nghĩa là chúng ta có nhận được dữ liệu ngay bây giờ chưa)
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
//lấy dữ liệu từ phản hồi của Server
}
}
3. Thuộc tính responseText
Dữ liêu được gửi về từ server có thể được truy xuất bởi thuộc tính responseText
Bây giờ chúng ta có thể thiết lập giá trị của trường "Time" bằng responseText:
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4)
{
document.myForm.time.value = xmlhttp.responseText;
}
}
AJAX - gửi một yêu cầu đến Server
Để gửi yêu cầu đến một Server chúng ta cần sử dụng hai phương thức open() và send().
Phương thức open() mang ba đối số. Đối số thứ nhất xác định phương thức nào sẽ được sữ dụng khi gửi yêu cầu (GET or POST), đối số thứ hai cho biết địa chỉ URL của script Server-side, đối số thứ ba cho biết yêu cầu sẽ được điều khiển bất đồng bộ hay không.
Phương thức send() gửi yêu cầu đến server.
Nếu chúng ta xác nhận file html và asp được đặt trong cùng một thư mục, thì đoạn code như sau:
xmlhttp.open("get","time.asp",true);
xmlhttp.send(null);
Bây giờ chúng ta phải xác định khi nào hàm ajaxFunction() được thực thi.
Chúng ta hãy để hàm được thực thi khi người dùng gõ vào trường "Name" bằng thuộc tính onkeyup = "ajaxFunction();
Chúng ta sẽ thêm vào file "testAjax.html" vài dòng code:

AJAX - Script ASP
Bây giờ chúng ta sẽ tạo ra một server-side script để hiển thị thời gian hiện tại trong trường time.
Thuộc tính responseText sẽ lưu trữ dữ liệu được trả về từ server, ở đây chúng ta sẽ trả về thời gian hiện tại.
Code trong trang "time.asp" như sau:
<%
response.expires = -1
response.write(time)
%>
Chú ý: lệnh response.expire thiết lập thời gian một trang web sẽ được đưa vào trình duyệt trước khi nó hết hiệu lực