Phản hồi máy chủ trong AJAX - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

Phản hồi máy chủ trong AJAX

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

Thuộc tính onreadystatechange

Thuộc tính readyState giữ trạng thái của XMLHttpRequest. Thuộc tính onreadystatechange định nghĩa một hàm sẽ được thực hiện khi readyState thay đổi.

Thuộc tính status và thuộc tính statusText giữ trạng thái của đối tượng XMLHttpRequest.

Thuộc tính Mô tả
onreadystatechange Định nghĩa một hàm được gọi khi thuộc tính readyState thay đổi
readyState Giữ trạng thái của XMLHttpRequest.
0: yêu cầu không khởi tạo
1: thiết lập kết nối máy chủ
2: yêu cầu nhận được
3: yêu cầu xử lý
4: yêu cầu hoàn thành và phản hồi đã sẵn sàng
status 200: “OK”
403: “Forbidden”
404: “Page not found”
statusText Trả lại văn bản trạng thái (như “OK” hoặc “Not Found”)

Hàm onreadystatechange được gọi là 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:

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(); 
}

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 hàm gọi lại

Hàm gọi lại là một hàm truyền như một 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 hiện đối tượng XMLHttpRequest và một hàm gọi lại cho mỗi tác vụ AJAX.

Các cuộc gọi hàm nên có URL và hàm để gọi khi đáp ứng đã sẵn sàng.

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 máy chủ

Thuộc tính Mô tả
responseText Nhận được dữ liệu phản hồi dưới dạng một chuỗi
responseXML Nhận dữ liệu phản hồi dưới dạng dữ liệu XML

Phương thức phản hồi máy chủ

Thuộc tính Mô tả
getResponseHeader() Trả về thông tin tiêu đề cụ thể từ tài nguyên máy chủ
getAllResponseHeaders() Trả lại tất cả thông tin phần đầu từ tài nguyên máy chủ

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 cho phù hợp:

document.getElementById(“demo”).innerHTML = xhttp.responseText;

Thuộc tính responseXML

Đối tượng XML HttpRequest có trình phân tích cú pháp XML. Thuộc tính responseXML trả về phản hồi của máy chủ như một đố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 một đối tượng XML DOM:

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();

Phương thức getAllResponseHeaders()

Phương thức getAllResponseHeaders() trả về tất cả các thông tin phần đầu từ phản hồi của máy chủ.

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 phần đầu cụ thể từ phản hồi của máy chủ.

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();