AJAX - การตอบกลับของ เซิร์ฟเวอร์
ทรัพย์สิน onreadystatechange
คุณสมบัติreadyStateเก็บสถานะของ XMLHttpRequest
คุณสมบัติonreadystatechangeกำหนดฟังก์ชันที่จะดำเนินการเมื่อ readyState เปลี่ยนแปลง
คุณสมบัติสถานะและคุณสมบัติstatusTextเก็บสถานะของอ็อบเจ็กต์ 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") |
ฟังก์ชัน onreadystatechange ถูกเรียกทุกครั้งที่ readyState เปลี่ยนแปลง
เมื่อ readyState เป็น 4 และสถานะ 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();
}
ไฟล์ "ajax_info.txt" ที่ใช้ในตัวอย่างข้างต้น เป็นไฟล์ข้อความธรรมดาและมีลักษณะดังนี้:
<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>
เหตุการณ์ onreadystatechange ถูกทริกเกอร์สี่ครั้ง (1-4) หนึ่งครั้งสำหรับการเปลี่ยนแปลงแต่ละครั้งใน readyState
การใช้ฟังก์ชันโทรกลับ
ฟังก์ชันเรียกกลับเป็นฟังก์ชันที่ส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันอื่น
หากคุณมีงาน AJAX มากกว่าหนึ่งงานในเว็บไซต์ คุณควรสร้างหนึ่งฟังก์ชันสำหรับดำเนินการอ็อบเจ็กต์ XMLHttpRequest และฟังก์ชันเรียกกลับหนึ่งฟังก์ชันสำหรับงาน AJAX แต่ละงาน
การเรียกใช้ฟังก์ชันควรมี URL และฟังก์ชันใดที่จะเรียกใช้เมื่อการตอบสนองพร้อม
ตัวอย่าง
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
}
คุณสมบัติการตอบกลับของเซิร์ฟเวอร์
| Property | Description |
|---|---|
| responseText | get the response data as a string |
| responseXML | get the response data as XML data |
วิธีการตอบกลับของเซิร์ฟเวอร์
| Method | Description |
|---|---|
| getResponseHeader() | Returns specific header information from the server resource |
| getAllResponseHeaders() | Returns all the header information from the server resource |
คุณสมบัติข้อความตอบกลับ
คุณสมบัติresponseTextส่งคืนการตอบสนองของเซิร์ฟเวอร์เป็นสตริง JavaScript และคุณสามารถใช้ตามนั้นได้:
ตัวอย่าง
document.getElementById("demo").innerHTML = xhttp.responseText;
การตอบสนองคุณสมบัติ XML
ออบเจ็กต์ XML HttpRequest มีตัวแยกวิเคราะห์ XML ในตัว
คุณสมบัติresponseXMLส่งคืนการตอบสนองของเซิร์ฟเวอร์เป็นอ็อบเจ็กต์ XML DOM
การใช้คุณสมบัตินี้ คุณสามารถแยกวิเคราะห์การตอบสนองเป็นวัตถุ XML DOM:
ตัวอย่าง
ขอไฟล์cd_catalog.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",
"cd_catalog.xml", true);
xhttp.send();
คุณจะได้เรียนรู้มากขึ้นเกี่ยวกับ XML DOM ในบท DOM ของบทช่วยสอนนี้
เมธอด 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();