AJAX - 服务器响应

Ang onreadystatechange attribute

readyState Ang attribute ay nag-iimbak ng estado ng XMLHttpRequest.

onreadystatechange Ang attribute ay tinukoy ang function na dapat itawag kapag nagbabago ang readyState.

status Ang attribute at statusText Ang attribute ay naglalaman ng estado ng XMLHttpRequest object.

Property Paglalarawan
onreadystatechange Tinukoy ng function na dapat itawag kapag nagbabago ang readyState attribute.
readyState

Nag-iimbak ng estado ng XMLHttpRequest.

  • 0: Ang kahilingan ay hindi pa nainitialisasyon
  • 1: Ang koneksyon sa server ay nabuo
  • 2: Ang kahilingan ay natanggap
  • 3: Ang kahilingan ay kasalukuyang ginagawa
  • 4: Ang kahilingan ay nakumpleto at ang tugon ay handa
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

Para sa kumpletong listahan, bisitahin mo ang Tutumbay ng Http Mensahe
statusText iba't-ibang estado ng pagbabalik (halimbawa "OK" o "Not Found"),

Bawat readyState, ang onreadystatechange function ay tinatawag.

Kapag nagbabago ang readyState Para sa 4,status Para sa 200 Kapag, handa na ang tugon:

实例

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

亲自试一试

Komento:onreadystatechange ay tinatanggal lima beses (0-4), bawat readyState Lahat ay nagbabago.

Mga paggamit ng callback function

Ang callback function ay isang function na pinapasa bilang argumento sa ibang function.

Kung mayroon kang maraming AJAX na mga gawain sa iyong websayt, dapat mong lumikha ng isang function na gumagawa ng XMLHttpRequest object, at isang callback function para sa bawat AJAX na gawain.

Ang function na ito ay dapat maglalaman ng URL at ang function na dapat ituring kapag handa na ang tugon.

实例

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) {
  // Dapat mangyari dito ang aksyon
 } 
function myFunction2(xhttp) {
  // Dapat mangyari dito ang aksyon
 }

亲自试一试

Property ng tugon ng server

Property Paglalarawan
property ng responseText Makukuha ang tugon data sa anyo ng string
responseXML Makukuha ang tugon data sa anyo ng XML data

Paraan ng tugon ng server

Paraan Paglalarawan
getResponseHeader() Makukuha ang partikular na header information mula sa server
getAllResponseHeaders() Makukuha ang lahat ng header information mula sa server

property ng responseText

property ng responseText Ang property na ito ay ibibigay ng server na tugon bilang string ng JavaScript, kaya maari kang gamitin ito tulad ng:

实例

document.getElementById("demo").innerHTML = xhttp.responseText;

亲自试一试

property ng responseXML

Ang XML HttpRequest object ay may nakalalabing XML parser.

ResponseXML Katangian sa XML DOM object ang tugon ng server.

Ginagamit ang katangian na ito upang magbigay ng tugon bilang XML DOM object.PagsusuriPara sa XML DOM object:

实例

Hilingin ang file music_list.xml，at para sa pag-iinterpret ng tugon:

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", "music_list.xml", true);
xhttp.send();

亲自试一试

Sa katunayan na ito ang DOM na pagtuturo sa DOM XML na kaalaman na kaalaman ka.

getAllResponseHeaders() 方法

getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

实例

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

亲自试一试

getResponseHeader() 方法

getResponseHeader() 方法返回来自服务器响应的特定头部信息。

实例

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

亲自试一试