AJAX thần chưởng: tầng 1 – tải dữ liệu từ một trang khác

AJAX (tiếng Anh: “Asynchronous JavaScript And XML” – nghĩa là “JavaScript và XML không đồng bộ”) là một nhóm các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application). Và bây giờ, chúng ta cùng nhau luyện Ajax thần chưởng :D

Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 nãm 2005 để chỉ kỹ thuật này, mặc dù các hỗ trợ cho Ajax đã có trên các chương trình duyệt từ 10 nãm trước. Ajax là một kỹ thuật phát triển web có tính tương tác cao bằng cách kết hợp các ngôn ngữ:

• HTML (hoặc XHTML) với CSS trong việc hiển thị thông tin
• Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị
• Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web. (Mặc dù, việc trao đổi này có thể được thực hiện với nhiều định dạng như HTML, văn bản thường, JSON và thậm chí EBML, nhưng XML là ngôn ngữ thường được sử dụng).
• XML thường là định dạng cho dữ liệu truyền, mặc dầu bất cứ định dạng nào cũng có thể dùng, bao gồm HTML định dạng trước, văn bản thuần (plain text), JSON và ngay cả EBML.

Giống như DHTML, LAMP hay SPA, Ajax tự nó không phải là một công nghệ mà là một thuật ngữ mô tả việc sử dụng kết hợp một nhóm nhiều công nghệ với nhau. Trong thực tế, các công nghệ dẫn xuất hoặc kết hợp dựa trên Ajax như AFLAX cũng đã xuất hiện.

Lang mang giới thiệu về AJAX cho các bạn mới làm quen như vậy đủ rồi :D
Giờ chúng ta sẽ cùng tập luyện chiêu đầu tiên trong AJAX đại pháp: AJAX thần chưởng :D

Ta sẽ làm gì ????

Ta sẽ viết một ứng dụng sử dụng AJAX để hiển thị dữ liệu lên một website được tải lên từ trước, từ ứng dụng này các bạn sẽ có những khải niệm căn bản và phương cách căn bản để có thể triển khai những đoạn AJAX “xịn”, phức tạp hơn.

Tôi giả sử hiện tôi đang có một trang web được triệu gọi từ cách đây … hàng ngàn năm (ặc! – nhưng như vậy mới giống luyện chưởng :D ). Trong hiện tại, chúng ta cần cập nhật một vài thứ trên trang web ấy nhưng không cần load lại toàn bộ trang kẻo … rớt bụi ^_^. Cụ thể hơn, chúng ta sẽ có một website hiển thị thời gian được lấy từ máy chủ, và chúng ta muốn cập nhật lại thời gian trên website ấy sau … 1 nghìn năm :D

Và chúng ta bắt tay vào việc ấy như sau :D

Bước 1: Tạo ra một trang web bình thường

Đoạn code tôi viết đơn giản như sau:
[code lang=”php”] Hiện tại thời gian trên máy chủ là: <span id="timer"><?=date("H:m:s d/m/Y")?></span><br />
<input type="button" value="Xem giờ" />
[/code]

Đoạn này khá đơn giản nên chắc tôi không cần giải thích gì hơn nữa, kết quả chúng ta có như sau:

Bước 2: Bắt đầu luyện Ajax thần công

Để lấy thời gian mới từ máy chủ, tôi sử dụng 1 file khác, tôi đặt tên và clock.php và có nội dung như sau:

[code lang=”php”] <?=date("H:m:s d/m/Y")?>
[/code]

Tôi bắt đầu bằng việc tạo sự kiện Onclick cho nút Xem giờ vừa tạo ở trên. Mục đích là để khi click chuột vào nút này, hệ thống sẽ gọi một hàm cho phép tôi cập nhật lại giờ hệ thống mà không cần phải tải lại toàn bộ website.

Tôi sửa lại nút Xem giờ như sau

[code lang=”html”] <input type="button" value="Xem giờ" onClick="_getTime()" />
[/code]

Rồi ! Giờ đến lúc xây dựng hàm _getTime() để thực hiện việc lấy giờ:

[code lang=”javascript”] <script language="javascript">
var xmlhttp;
function _getTime()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="clock.php";
xmlhttp.onreadystatechange=changeTime;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function changeTime()
{
if (xmlhttp.readyState==4)
{
document.getElementById("timer").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null;
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
</script>
[/code]

Hàm _getTime() sẽ thực hiện việc nhận lệnh click vào button ở trên, gọi đối tượng xmlhttp (được tạo từ hàm GetXmlHttpObject() sau đó nhận nội dung từ file clock.php và hiển thị ngược lại nội dung trả về từ file clock.php để hiển thị vào đối tượng có id là timer thông qua hành động được khai báo tại hàm changeTime().

Bạn cần nhớ rằng, do tính chất bảo mật. File clock.php phải được đặt trong cùng hệ thống hosting mà không thể sử dụng từ một hệ thống lưu trữ khác.

Ví dụ trên tương đối dễ hiểu và dễ sử dụng cho các bạn mới bắt đầu làm quen với AJax thần chưởng :) , các bạn có thể tùy biến đoạn code trong file clock.php để có thể làm được nhiều việc khác nhau.

Chúc các bạn thành công :D