AJAX - ตอบสนองจากเซิร์ฟเวอร์

อนุปรมาณการ onreadystatechange

readyState อนุปรมาณการสถานะ XMLHttpRequest

onreadystatechange กำหนดฟังก์ชันที่จะถูกเรียกใช้เมื่อสถานะ readyState มีการเปลี่ยนแปลง

status อนุปรมาณการ statusText อนุปรมาณการสถานะ XMLHttpRequest

คุณสมบัติเซิร์ฟเวอร์ตอบโต้ วิธี
onreadystatechange กำหนดฟังก์ชันที่จะถูกเรียกใช้เมื่อสถานะ readyState ของอนุปรมาณการมีการเปลี่ยนแปลง
readyState

สำหรับระบบสถานะ XMLHttpRequest

  • 0: คำขอยังไม่ได้รับการเริ่มต้น
  • 1: การเชื่อมต่อกับเซิร์ฟเวอร์เรียบร้อย
  • 2: คำขอได้รับ
  • 3: กำลังทำงานคำขอ
  • 4: คำขอได้รับการทำงานเสร็จและคำตอบเสร็จพร้อม
status
  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Page not found"

สำหรับรายการเต็ม โปรดเข้าเว็บไซต์ คู่มือ Http ข้อความ
statusText เป็นข้อความสถานะที่คืน (เช่น "OK" หรือ "Not Found")

ความสำคัญ ในแต่ละครั้ง

เมื่อ readyState มีการเปลี่ยนแปลง ฟังก์ชัน onreadystatechange จะถูกเรียกใช้ readyState สำหรับ 4，status สำหรับ 200 ในขณะที่มีการเตรียมรับคำตอบ

ตัวอย่าง

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

ทดลองด้วยตัวเอง

หมายเหตุ:onreadystatechange จะถูกกระตุ้นห้าครั้ง (0-4) และในแต่ละครั้ง readyState ทั้งหมดเปลี่ยนแปลง

ใช้ฟังก์ชันคลับแบค

ฟังก์ชันคลับแบคคือฟังก์ชันที่ถูกส่งผ่านเป็นอุปกรณ์สำหรับฟังก์ชันอื่น

ถ้าเว็บไซต์ของคุณมีงาน AJAX หลายอย่าง คุณควรสร้างฟังก์ชันที่ดำเนินการ XMLHttpRequest และฟังก์ชันคลับแบคสำหรับงาน AJAX แต่ละอัน

该函数应当包含 URL 以及当响应就绪时调用的函数。

ตัวอย่าง

ฟังก์ชันนี้ควรมี URL และฟังก์ชันที่จะเรียกของมันเมื่อตอบโต้เสร็จสมบูรณ์
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
  function loadDoc(url, cFunction) {
  var xhttp;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      xhttp = new XMLHttpRequest();
    };
  };
  cFunction(this);
  xhttp.send();
};
xhttp.open("GET", url, true);
  function myFunction2(xhttp) {
 }; 
function myFunction1(xhttp) {
  function myFunction2(xhttp) {
 };

ทดลองด้วยตัวเอง

// ระบุการกระทำตรงนี้

คุณสมบัติเซิร์ฟเวอร์ตอบโต้ วิธี
คุณสมบัติ responseText คุณสมบัติ
responseXML ย้อนรับข้อมูลในรูปแบบสตริง

ย้อนรับข้อมูลในรูปแบบ XML

วิธีเซิร์ฟเวอร์ตอบโต้ วิธี
getResponseHeader() คำอธิบาย
getAllResponseHeaders() ย้อนรับข้อมูลหัวข้อเฉพาะที่เรียกขอจากเซิร์ฟเวอร์

ย้อนรับข้อมูลหัวข้อทั้งหมดจากเซิร์ฟเวอร์

คุณสมบัติ responseText responseText

ตัวอย่าง

คุณสมบัติ ที่ย้อนรับค่าตอบโต้จากเซิร์ฟเวอร์ในรูปแบบ JavaScript สตริง ดังนั้นคุณสามารถใช้ได้เช่นนี้:

ทดลองด้วยตัวเอง

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

คุณสมบัติ responseXML

ResponseXML คุณสมบัติ ที่มีอยู่ใน XML HttpRequest วัตถุมี XML parser ภายในตัว

ด้วยคุณสมบัตินี้ คุณสามารถเอาตอบโต้กลับมาในรูปแบบ XML DOM วัตถุเพื่อย้อนรับการแปลงภาษาสำหรับ XML DOM วัตถุ:

ตัวอย่าง

คำขอไฟล์ music_list.xmlและทำการประกาศออกตัวตอบโต้:

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

ทดลองด้วยตัวเอง

คุณจะได้เรียนรู้ข้อมูลเกี่ยวกับ XML DOM มากยิ่งขึ้นในบทบาท DOM ของตูร์นิยมนี้。

เมธอด getAllResponseHeaders()

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

ทดลองด้วยตัวเอง