AJAX - Phản hồi của máy chủ
Thuộc tính onreadystatechange
Thuộc tính readyState giữ trạng thái của XMLHttpRequest.
Thuộc tính onreadystatechange xác định một hàm sẽ được thực thi khi readyState thay đổi.
Thuộc tính trạng thái và thuộc tính statusText giữ trạng thái của đối tượng XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Hàm onreadystatechange được gọi mỗi khi readyState thay đổi.
Khi readyState là 4 và trạng thái là 200, phản hồi đã sẵn sàng:
Thí dụ
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Tệp "ajax_info.txt" được sử dụng trong ví dụ trên, là một tệp văn bản đơn giản và trông giống như sau:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Sự kiện onreadystatechange được kích hoạt bốn lần (1-4), một lần cho mỗi thay đổi trong readyState.
Sử dụng chức năng gọi lại
Hàm gọi lại là một hàm được truyền dưới dạng tham số cho một hàm khác.
Nếu bạn có nhiều hơn một tác vụ AJAX trong một trang web, bạn nên tạo một hàm để thực thi đối tượng XMLHttpRequest và một hàm gọi lại cho mỗi tác vụ AJAX.
Lệnh gọi hàm phải chứa URL và hàm nào sẽ gọi khi phản hồi sẵn sàng.
Thí dụ
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Thuộc tính phản hồi của máy chủ
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
Phương thức phản hồi của máy chủ
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
Thuộc tính responseText
Thuộc tính responseText trả về phản hồi của máy chủ dưới dạng một chuỗi JavaScript và bạn có thể sử dụng nó cho phù hợp:
Thí dụ
document.getElementById("demo").innerHTML = xhttp.responseText;
Thuộc tính responseXML
Đối tượng HttpRequest của XML có trình phân tích cú pháp XML được tích hợp sẵn.
Thuộc tính responseXML trả về phản hồi máy chủ dưới dạng đối tượng DOM XML.
Sử dụng thuộc tính này, bạn có thể phân tích cú pháp phản hồi dưới dạng đối tượng DOM XML:
Thí dụ
Yêu cầu tệp cd_catalog.xml và phân tích cú pháp phản hồi:
xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",
"cd_catalog.xml", true);
xhttp.send();
Bạn sẽ tìm hiểu thêm về XML DOM trong các chương DOM của hướng dẫn này.
Phương thức getAllResponseHeaders ()
Phương thức getAllResponseHeaders () trả về tất cả thông tin tiêu đề từ phản hồi của máy chủ.
Thí dụ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
Phương thức getResponseHeader ()
Phương thức getResponseHeader () trả về thông tin tiêu đề cụ thể từ phản hồi của máy chủ.
Thí dụ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();