Đối tượng XMLHttpRequest trong AJAX

Đối tượng XMLHttpRequest là gì ?

Bạn cần phải biết rằng đối tượng XMLHttpReqrest là chìa khóa then chốt của kỹ thuật AJAX. Tất cả trình duyệt Web hiện đại đều hỗ trợ đối tượng XMLHttpRequest.

Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với một Server ở Background. Tức là với đối tượng XMLHttpRequest này, bạn có thể cập nhật các phần nhỏ của trang mà không cần tải lại toàn bộ trang.

Đối tượng XMLHttpRequest (viết tắt là XHR) là một API có thể được sử dụng bởi JavaScript, Jscript, VBScript và một số ngôn ngữ phát triển ứng dụng Web khác để truyền tải và thao tác dữ liệu XML tới và từ một WebServer bởi sử dụng HTTP bằng cách thiết lập một kênh kết nối độc lập giữa Client-Side và Server-Side.

Dữ liệu được trả về từ các lời gọi tới đối tượng XMLHttpRequest sẽ thường được cung cấp bởi Database ở Backend. Ngoài định dạng XML, đối tượng XMLHttpRequest cong được sử dụng để lấy dữ liệu trong các định dạng khác, chẳng hạn như JSON hay định dạng thuần text.

Tạo đối tượng XMLHttpRequest trong AJAX

Xin nhắc lại lần nữa là tất cả trình duyệt hiện đại (Chrome, IE7+, FireFox, Safari và Opera) đều đã có sẵn và hỗ trợ đối tượng XMLHttpRequest.

Dưới đây là cú pháp để tạo đối tượng XMLHttpRequest trong AJAX:

 
Ten_bien = new XMLHttpRequest();

Với các phiên bản IE cũ hơn (chẳng hạn như IE5 và IE6) sử dụng đối tượng ActiveXObject:

 
Ten_bien = new ActiveXObject("Microsoft.XMLHTTP");

Trong khi lập trình phát triển các ứng dụng Web, để bao tất cả các trường hợp và để xử lý mọi trình duyệt như trong trường hợp này (để bao cả IE5 và IE6), bạn cần kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest không. Nếu có, bạn tạo một đối tượng XMLHttpRequest; còn nếu không, bạn tạo một đối tượng ActiveXObject:

 
var xhttp;
if (window.XMLHttpRequest){
   xhttp= new XMLHttpRequest();
   } else {
    //tao doi tuong ActiveXObject neu trinh duyet khong ho tro XMLHttpRequest
   xhttp= new ActiveXObject("Microsoft.XMLHTTP");
}

Quảng cáo

Các phương thức của đối tượng XMLHttpRequest trong AJAX

Phương thức abort()
Hủy Request hiện tại.
Phương thức getAllResponseHeaders()
Trả về HTTP Header dưới dạng một chuỗi.
Phương thức getResponseHeader( ten_truong_header )
Trả về giá trị của một trường HTTP Header cụ thể.
Phương thức open( method, URL )

open( phuong_thuc, URL, async )

open( phuong_thuc, URL, async, ten_nguoi_dung )

open( phuong_thuc, URL, async, ten_nguoi_dung, mat_khau )

Các form phương thức open() này được sử dụng để xác định phương thức (tham số phuong_thuc), đường dẫn URL, và một số thuộc tính tùy ý khác cho một Request.

Trong đó:
- Tham số phuong_thuc có thể là một trong các giá trị GET, POST, hoặc HEAD. Bạn cũng có thể sử dụng các phương thức PUT, DELETE. Tuy nhiên hai phương thức này chủ yếu được sử dụng trong các ứng dụng REST app.
- Tham số async xác định xem Request nên được xử lý theo cách không đồng bộ hoặc đồng bộ. Tham số này nhận hai giá trị true cho không đồng bộ, false cho đồng bộ.
Phương thức send( content )
Gửi Request tới Server.
setRequestHeader( header, value )

Thêm một cặp header/value tới trường HTTP Header để gửi đi.

Các thuộc tính của đối tượng XMLHttpRequest trong AJAX

Sự kiện onreadystatechange
Một Event Handler lắng nghe và xử lý một sự kiện khi có thay đổi về trạng thái nào diễn ra.

readyState

Thuộc tính này định nghĩa trạng thái hiện tại của đối tượng XMLHttpRequest.

Quảng cáo

Bảng dưới đây liệt kê các giá trị cho thuộc tính readyState:

Trạng thái	Miêu tả
0	Requet chưa được khởi tạo
1	Request đã được thiết lập.
2	Request đã được gửi.
3	Request đang được xử lý.
4	Kết thúc Request.

responseText
Trả về phản hồi dưới dạng một chuỗi.
responseXML
Trả về phản hồi dưới định dạng XML. Thuộc tính này trả về một đối tượng XML để có thể được parse bởi sử dụng các phương thức và thuộc tính của mô hình DOM.
status
Trả về trạng thái dưới dạng một số (ví dụ: 404 cho "Not Found", 200 cho "OK")
statusText
Trả về trạng thái dưới dạng một số (ví dụ: "Not Found", "OK").

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Loạt bài hướng dẫn học Ajax cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Trang trước

Trang sau