XMLHttpRequest là yếu tố trọng tâm trong AJAX. Đối tượng này cung cấp các chức năng trao đổi dữ liệu bất đồng bộ giữa client và server.
Cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi yêu cầu và nhận các trả lời từ server. XMLHttpRequest chưa là chuẩn
của W3C, vì thế phải dùng JavaScript theo nhiều cách khác nhau đối với các trình duyệt khác nhau để tạo một thể hiện của của XMLHttpRequest. Internet Explorer thực thi XMLHttpRequest như một đối tượng ActiveX, và các trình duyệt khác như Firefox, Safari, và Opera thực thi nó như một đối tượng JavaScript nguyên thủy.
Các tạo đối tượng XMLHttpRequest:
var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } }
Đoạn mã trên kiểm tra sự hỗ trợ đối tượng ActiveX của trình duyệt. Nếu hỗ trợ ActiveX, thì tạo một đối tượng XMLHttpRequest dùng ActiveX. Trường hợp khác, tạo đối tượng này bằng kỹ thuật tạo đối tượng JavaScript nguyên thủy. Do đó dễ dàng tạo ra các thể hiện của đối tượng XMLHttpRequest mà không quan tâm tới trình duyệt.
Ba thuộc tính quan trọng của XMLHttpRequest
- Thuộc tính onreadystatechange: Sau khi gửi yêu cầu tới server ta cần một một
hàm nào đó để nhận dữ liệu trả về từ server. Thuộc tính onreadystatechange trỏ tới một hàm mà sẽ thực hiện việc xử lý dữ liệu trả về từ server. Hàm này sẽ được gọi một cách tự động.
xmlhttp.onreadystatechange=function() {
// Các câu lệnh để xử lý dữ liệu trả về }
- Thuộc tính readyState: Lưu trữ trạng thái của dữ liệu trả về từ server, mỗi lần thuộc tính này thay đổi giá trị thì hàm onreadystatechange sẽ được thực thi. Các giá trị của readyState:
0: Yêu cầu chưa được khởi tạo 1: Yêu cầu đã được thiết lập 2: Yêu cầu đã được gửi đi 3: Yêu cầu đang được xử lý 4: Yêu cầu đã hoàn thành
Thêm câu lệnh if vào hàm onreadystatechange để kiểm tra xem server đã xử lý xong và gửi trả lời về chưa:
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){
// Lấy dữ liệu từ trả lời của server }
}
- Thuộc tính responseText: Nhận dữ liệu trả về từ server:
xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4){
document.myForm.text.value = xmlhttp.responseText; }
}
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 cho request sử dụng phương thức open() của đối tượng XMLHttpRequest. Phương thức open() có ba tham số: một biến string cho biết phương
thức dùng là 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 sử dụng phương thức send().
Ví dụ:
xmlhttp.open("GET","sample.php?text=testtesttest",true); xmlhttp.send(null);
Chương 3. PHÂN TÍCH THIẾT KẾ HỆ THỐNG TÍNH TOÁN ROI
(adsbygoogle = window.adsbygoogle || []).push({});