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 trạng thái sẵn sàng 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 trạng thái sẵn sàng thay đổi.
Khi ReadyState là 4 và trạng thái là 200, phản hồi đã sẵn sàng:
Ví 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();
}
Hãy tự mình thử »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à có dạ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 ở trạng thái sẵn sàng.
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 hàm khác.
Nếu bạn có nhiều 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.
Ví 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
}
Hãy tự mình thử »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 replyText
Thuộc tính replyText trả về phản hồi của máy chủ dưới dạng chuỗi JavaScript và bạn có thể sử dụng nó cho phù hợp:
Thuộc tính XML phản hồi
Đối tượng XML HttpRequest có một trình phân tích cú pháp XML dựng sẵn.
Thuộc tính replyXML trả về phản hồi của máy chủ dưới dạng đối tượng XML DOM.
Sử dụng thuộc tính này, bạn có thể phân tích phản hồi dưới dạng đối tượng XML DOM:
Ví dụ
Yêu cầu tệp cd_catalog.xml và phân tích 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(); Hãy tự mình thử »Bạn sẽ tìm hiểu thêm nhiều điều 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ủ.
Ví dụ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
}; Hãy tự mình thử »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ủ.
Ví 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();
Hãy tự mình thử »