Ajax – Ví dụ minh họa sử dụng XMLHttpRequest

Trong bài trước, tôi đã giới thiệu sơ lược về đối tượng XMLHttpRequest cùng một số phương thức, thuộc tính của đối tượng này. Và để hiểu rõ hơn, chúng ta cần làm một vài ví dụ đơn giản, qua đó bạn có thể thấy được phần nào cách dùng và áp dụng đối tượng này vào ngữ cảnh cụ thể.

Khi đã tạo xong một đối tượng XMLHttpRequest, bạn có thể sử dụng nó để gửi một yêu cầu bất đồng bộ đến server. Để đơn giản hơn, ta gửi yêu cầu và lấy về trang Welcome.htm, nội dung của trang này như sau:

Đoạn mã 1‑ Mã nguồn trang Welcome.htm

Chào mừng bạn đến vớiAJAX!

Bây giờ ta hãy xem phương thức sendRequest gửi một yêu cầu bất đồng bộ đến trang này:

Đoạn mã 2‑ Phương thức gửi request tới một địa chỉ url

function sendRequest(url) { if (xmlHttp) { xmlHttp.open(“GET”, url, true); // true = async     (1) xmlHttp.onreadystatechange = onCallback; //          (2)  xmlHttp.send(null);                                          //                      (3) } }

Phương thức sendRequest trên nhận vào một tham số url mà bạn sẽ gửi yêu cầu HTTP tới. Kế tiếp (1) mở một kết nối với cờ bất đồng bộ (asynchronous) là true. Sau khi một kết nối được tạo ra, (2) sẽ gán thuộc tính onreadystatechange của đối tượng XMLHttpRequest đến một hàm cục bộ tên là onCallback. Lý do phải dùng cách này là vì đây là một lời gọi bất đồng bộ, bạn không biết khi nào khi nào nó sẽ hoàn thành và được trả lại. Một hàm callback được sử dụng để bạn có thể nhận được kết quả khi yêu cầu gửi đi được hoàn tất hoặc trạng thái của nó được cập nhật. Sau khi xác định kiểu nội dung trong request header, bạn gọi (3) để gửi HTTP request  tới server. Giá trị status bằng 200 nghĩa là request thành công.

Đoạn mã 3‑ Hàm hồi quy (callback) sẽ được thực thi sau khi request thành công

function onCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200){ var r = document.getElementById(‘results’); r.innerHTML = xmlHttp.responseText; } else { alert(‘Error: ‘ + xmlHttp.status); } } }

Toàn bộ mã nguồn của ví dụ này được tạo trong trang AjaxExample1.htm.

Đoạn mã 4‑ Phiên bản 1 của trang AjaxExample1.htm

(Kết quả sẽ hiển thị ở đây)



Và ta có kết quả khi hiển thị trên IE:

Figure 1: Một ví dụ đơn giản về request bất đồng bộ trongAjax
Hình minh họa trên  cho thấy kết xuất của ví dụ trên khi bạn chạy mã nguồn. Bạn có thể nhận thấy tiêu đề của cửa sổ là từ trang AjaxExample1.htm nhưng nội dung hiển thị lại là từ trang Welcome.htm. Vì ta đặt hàm gọi sự kiện gửi request trong window.onload nên mỗi khi trang được load lên bạn chỉ thấy nội dung dòng chữ này. Điều này có thể làm bạn có thể trang web chẳng làm gì cả ngoài việc hiển thị nội dung của chính nó.
Để giúp bạn nhận biết rõ ràng hơn bây giờ ta thêm một button vào trang để khi nào nhấn button đó thì request mới được gửi đi, đồng thời với việc hiển thị nội dung trả về trong thẻ ta sẽ xuất thêm ra một cửa sổ thông báo bằng hàm alert. Mã nguồn của trang trên được sửa lại như sau (những phần được đánh dấu):

Đoạn mã 5- Phiên bản 2 của trang AjaxExample1.htm

(Kết quả sẽ hiển thị ở đây)


Click me!





Hãy xem kết quả thế nào sau khi nhấn button Click me! trên trang, rõ ràng là trang web đã lấy tất cả nội dung của tập tin Welcome.htm:

Vậy là thành công trong việc tạo trang web ứng dụngAjaxđầu tiên, tuy nhiên số lượng code cần viết có thể làm bạn thấy bối rối và khó nhớ. Bạn nghĩ đến việc đưa chúng vào một tập tin .js riêng, nhưng điều này là không cần thiết vì đã có sẵn một thư viện tích hợp sẵn các phương thức để làm việc với javascript và Ajax. Chúng ta sẽ tìm hiểu về thư viện này trong bài sau.
https://yinyangit.wordpress.com