Tìm hiểu kĩ thuật lập trình Ajax thông qua 1 ví dụ đơn giản

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

1. Giới thiệu về Ajax

Ajax là một kĩ thuật lập trình được viết tắt bởi Asynchronous JavaScript and XML được phát triển bởi Jesse James Garrett vào năm 2005.Tuy nhiên Ajax đã được biết đến trước đó hơn cả một thập kỉ.Vậy Ajax làm được gì??Ajax cập nhật lại một trang web mà không cần refesh trang đó.

Các bạn có thể thấy điều này thông qua khi ta yêu cầu 1 trang web thì sẽ có 1 thanh trạng thái cho thấy sự refesh lại trang khi ta không sử dụng Ajax.

2. Nền tảng của Ajax

Theo 1 bài viết của của Jesse Garett thì chữ X trong từ AJAX là từ viết đầu của XMLHttpRequest.Có thể nói nó la sự kết hợp bởi JavaScrip và XMLHttpRequest.

3. Ajax làm việc như thế nào?

Khả năng đầu tiên mà Ajax làm được dó là nó có thể giao tiếp với Web Server mà không cần khả năng tương tác của người dung với trang web.Với XMLHttpRequest thì điều đó hoàn toàn có thể.Ajax làm cho trang web không cần refesh lại trang do đó sẽ làm cho tốc độ truy cập web sẽ nhanh hơn.Chúng ta sẽ thấy được điều gì sẽ xảy ra khi người dùng gửi một yêu cầu:

Trình duyệt web yêu cầu nội dung của 1 trang web(không cần refesh)
Web server phân tíhc yêu cầu nhận được ,sau đó sẽ xây dựng một thông điệp XML sau đó gửi lại cho trình duyệt web
Sau khi tình duyệt web nhận được thông điệp XML,nó cập nhật nội dung của trang.
AJAX sử dụng ngôn ngữ JavaSript thông qua giao thức HTTP để gửi/ nhận thông điệp XML đến/ từ Web Server

4. Giải thích từng bước thực hiện của một ứng dụng AJAX

Một hàm JavaSript handEvent() sẽ được yêu cầu khi có 1 sự kiện xảy ra trên các thành phần HML
Trong phương thức handEvent() một đối tượng thực thể XMLHttpRequest sẽ được tạo ra
Đối tượng XMLHttpRequest tổ chức một thông điệp XML bên trong trạng thái của trang HTML sau đó gửi nó tới web server
Sau khi gửi yêu cầu , đối tượng XMLHttpRequest lắng nghe thông điệp này từ web server
đối tượng XMLHttpRequest truyền thông điejp từ web server sau đó cập nhật nó vào đối tượng DOM

5. Xem Ajax làm việc thông qua 1 ví dụ cụ thể

Đầu tiên tạo một file hiển thị (index.html) với nội dung sau:

<div>
<input type="text" id="lblTime" />
<br />
<input type="button" id="btnGetTime" value="Get Time" onclick="GetTime();" />
</div>

Trong đoan code trên thì đối tượng DOM của chúng ta là input=”text” id=”lblTime”..Nó sẽ làm việc khi chúng ta nhấn một button,ở đây là sự kiện Onclick().
Ở đoạn code này thì handEvent() chính là GetTime() từ hình ở trên

Chúng ta hãy xem đối tượng XMLHttpRequest làm việc như thế nào trong ứng dụng chúng ta?

Hãy chèn đoạn code dưới đây vào trong thẻ <script>...</script>

var xmlHttpRequest;

function GetTime()

{
//tạo đối tượng xmlHttpRequest
xmlHttpRequest = (window.XMLHttpRequest) ? 
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

//Nếu trình duyệt không hỗ trợ Ajax thì thoát ra 
if (xmlHttpRequest == null)
return;

//Khởi tạo đối tượng XMLHttpRequest 
xmlHttpRequest.open("GET", "Time.aspx", true);

//Thiết lập hàm callback 
xmlHttpRequest.onreadystatechange = StateChange;


xmlHttpRequest.send(null); 
}
function StateChange()
{
if(xmlHttpRequest.readyState == 4)
{
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
}
}

1. đối tượng XMLHttpRequest được tạo ra qua đoạn code

//tạo đối tượng XMLHttpRequest 
xmlHttpRequest = (window.XMLHttpRequest) ? 
new XMLHttpRequest() : new ActiveXObject("Msxml2.XMLHTTP");

2. Nếu trình duyệt không hỗ trợ Ajax thì nó trả về fasle

3. Tiếp theo chúng ta mở kết nối tới server với đối tượng XMLHttpRequest vừa mới tạo.

//Khởi tạo đối tượng XMLHttpRequest 
xmlHttpRequest.open("GET", "yesterday.php", true);

Ở đây chúng ta có 1 trang yesterday.php là trang mà sẽ nhận thông điệp XML đuợc lưu trên Web Server

4. Chúng ta thường nghe từ “callback” thay thế từ “postback” khi chúng ta làm việc với Ajax.Bởi vì Ajax sử dụng hàm callback để bắt lấy trả lời của server khi yêu cầu xử lý Ajax của bạn được thực hiện..Chúng ta thiết lập một tham chiếu tới hàm callback giống như thế..Ở đây StateChange là hàm mà chúng ta cập nhật hoặc gán một giá trị mới tới đối tượng DOM của chúng ta.

function StateChange()
{
if(xmlHttpRequest.readyState == 4)
{
document.getElementById('lblTime').value = xmlHttpRequest.responseText;
}
}

Nếu readystate == 4 ,chúng ta có thể cập nhật đối tượng Dom với thông điệp trả lời mà chúng ta nhận được từ web server.

5. Là một phương thức yêu cầu mà chúng ta gửi đi: GET(chú ý là nó được viết hoa). Sau đây là code mà chúng ta không cần gửi thêm bất kì thông tin nào tới server

//Gửi yêu cầu Ajax tới sevver
xmlHttpRequest.send(null);

Trong trang yesterday.php, chúng ta sẽ sử dụng hàm date để lấy dữ liệu ngày tháng ngày hôm qua và trả về cho người dùng:

<?php
$yesterday = date("d/m/Y", strtotime("-1 day"));
echo "Yesterday is " . $yesterday;
?>

Bạn có thể tải về file code đã được đóng gói dưới đây (bao gồm ví dụ Ajax cho cả hai ngôn ngữ PHP và ASP.NET)

Download

http://www.mediafire.com/download.php?wb91v6vab35uxm5