Bây giờ ta sẽ thảo luận xem cách sử dụng đối tượng XMLHttpRequest. Ở các phần trước đã đề cập đến cách tạo đối tượng này, bây giờ ta sẽ chỉ ra làm thế nào để gửi request tới server và xử lí các response từ server.
Request đơn giản nhất là một request mà không chứa một thông tin nào cả, tức là các form tham số truy vấn hay form gửi dữ liệu là trống. Trong thực tế thì luôn gửi các request mang thông tin đến server.
Các bước cơ bản để gửi request dùng đối tượng XMLHttpRequest là:
1. Dùng một tham chiếu tới một thể hiện của XMLHttpRequest, có thể bằng cách tạo mới hay truy cập vào một biến có thể hiện của XMLHttpRequest.
2. Khai báo cho đối tượng XMLHttpRequest về hàm sẽ xử lí các trạng thái của XMLHttpRequest. Ta hoàn thành việc này bằng cách thiết lập thuộc tính onreadystatechange của đối tượng với một con trỏ về một hàm JavaScript.
3. Gán các thuộc tính của request. Phương thức open() của đối tượng XMLHttpRequest được gán về request trạng thái đợi. Phương thức open() có ba tham số: một biến string chỉ báo (thường dùng GET hay POST), một biến string biểu diễn địa chỉ URL của tài nguyên, một biến boolean chỉ báo request sẽ là bất đồng bộ.
4. Gửi request tới server. Phương thức send() sẽ truyền request để yêu cầu tài nguyên. Phương thức send() chấp nhận một tham số, thông thường là một biến kiểu string hay một đối tượng DOM. Tham số này được truyền tới địa chỉ URL đích như là một phần của request. Khi truyển tham số cho send(), phải đảm bảo rằng kiểu phương thức được gán trong open() là POST. Sử dụng null khi không có dữ liệu nào được gửi với request.
Có thể diễn giải các bước trên như sau: cần một thể hiện của đối tượng XMLHttpRequest, chỉ ra xem nó cần làm gì khi thay đổi trạng thái, khi nào thì gửi các request và gửi như thế nào, và cuối cùng là định hướng XMLHttpRequest để truyền request.
Ta xét khái niệm con trỏ hàm, nó cũng gần giống con trỏ dữ liệu, ngoại trừ thay vì trỏ vào dữ liệu thì nó trỏ vào một hàm. Trong JavaScript, tất cả các hàm đều được định địa chỉ trong bộ nhớ và có thể tham chiếu bằng tên hàm. Điều này cho ta một cách truyền tham số qua con trỏ hàm rất linh động và mềm dẻo hay lưu trữ một con trỏ hàm trong một thuộc tính của lớp.
Đối với đối tượng XMLHttpRequest, thuộc tính onreadystatechange lưu trữ một con trỏ tới hàm callback. Hàm callback được gọi khi trạng thái nội tại của đối tượng XMLHttpRequest thay đổi. Khi một lời gọi bất đồng bộ được tạo ra, request được truyền đi, và script tiếp tục xử lí ngay lập tức – nó sẽ không đợi request được đáp ứng để tiếp tục. Mỗi lần request được gửi đi, thuộc tính readyState của đối tượng sẽ thay đổi.
Ví dụ về một Request đơn giản
Trong ví dụ này, có một trang HTML với một nút bấm. Khi nhấn vào nút bấm, sẽ khởi tạo một request bất đồng bộ gửi tới server. Server sẽ đáp ứng bằng cách gửi một file text đơn giản. Response được hiển thị nội dung trên một cửa sổ alert.
simpleRequest.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple XMLHttpRequest</title> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() {
if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "simpleResponse.xml", true); xmlHttp.send(null);
}
function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) {
alert("The server replied with:"
+ xmlHttp.responseText); } } } </script> </head> <body> <form action="#">
<input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();"/>
</form>
</body>
</html>
File response của server, simpleResponse.xml, chứa một dòng text duy nhất. Khi nhấn vào nút bấm trên trang HTML sẽ trả về một hộp alert với nội dung của file simpleResponse.xml. Request tới server được gửi một cách bất đồng bộ, cho phép trình duyệt tiếp tục đáp ứng người dùng trong khi chờ đợi response của server phía background (còn được gọi là AjaxEngine). Nếu một thao tác bất đồng bộ được chọn và nếu response của server cần vài giây để trả về, trình duyệt sẽ không thể đáp ứng người dùng trong thời gian đợi. Sự bất đồng bộ có thể cải thiện tình trạng này bằng cách tránh hiển thị khi trình duyệt bị tê liệt và không thể đáp ứng người dùng. Điều này cho phép người dùng tiếp tục làm việc trong khi server tiếp tục làm việc với request trước trong background.
Khả năng liên lạc với server; không có lỗi ngắt; với luồng làm việc của người dùng đã mở ra rất nhiều kỹ thuật cải thiện cho phía người dùng. Một ứng dụng, chẳng hạn như chứng thực dữ liệu nhập từ
người dùng. Khi một người dùng điền vào một trường dữ liệu trên form nhập, trình duyệt có thể định kỳ liên tục gửi các form giá trị tới server để kiểm chứng mà không cần ngắt quãng quá trình điền dữ liệu vào form nhập. Nếu nhập dữ liệu không đúng, người dùng có thể ngay lập tức được thông báo, trước khi form thực sự được gửi đến server để xử lí, điều này tiết kiệm được thời gian và giảm quá trình nạp dữ liệu trên server, nội dung của form sẽ không được nạp lại sau một form đệ trình không thành công.
Vấn đề bảo mật:
Bất kỳ một công nghệ nào dựa trên nền tảng trình duyệt sẽ không trọn vẹn nếu bỏ qua vấn đề bảo mật. Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt.
Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt. Internet Explorer hiển thị một cảnh báo tình trạng một nguy cơ không an toàn có thể tồn tại và cho phép người dùng sự lựa chọn có tiếp tục với request đó nữa hay không. Trình duyệt Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript.