AJAX - XMLHttpRequest Object
คีย์สโตนของ AJAX คืออ็อบเจ็กต์ XMLHttpRequest
- สร้างวัตถุ XMLHttpRequest
- กำหนดฟังก์ชันการโทรกลับ
- เปิดวัตถุ XMLHttpRequest
- ส่งคำขอไปยังเซิร์ฟเวอร์
วัตถุ XMLHttpRequest
เบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับXMLHttpRequestวัตถุ
สามารถ ใช้XMLHttpRequestวัตถุเพื่อแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์เบื้องหลัง ซึ่งหมายความว่าสามารถอัปเดตบางส่วนของหน้าเว็บได้โดยไม่ต้องโหลดซ้ำทั้งหน้า
สร้าง XMLHttpRequest Object
เบราว์เซอร์ที่ทันสมัยทั้งหมด (Chrome, Firefox, IE, Edge, Safari, Opera) มีXMLHttpRequestออบเจ็กต์ ในตัว
ไวยากรณ์สำหรับการสร้างXMLHttpRequestวัตถุ:
variable = new XMLHttpRequest();
กำหนดฟังก์ชันโทรกลับ
ฟังก์ชันเรียกกลับเป็นฟังก์ชันที่ส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันอื่น
ในกรณีนี้ ฟังก์ชันเรียกกลับควรมีโค้ดที่จะดำเนินการเมื่อการตอบสนองพร้อม
xhttp.onload = function() {
// What to do when the response is ready
}
ส่งคำขอ
ในการส่งคำขอไปยังเซิร์ฟเวอร์ คุณสามารถใช้เมธอด open() และ send() ของ
XMLHttpRequestอ็อบเจ็กต์:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
ตัวอย่าง
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
เข้าถึงข้ามโดเมน
ด้วยเหตุผลด้านความปลอดภัย เบราว์เซอร์สมัยใหม่จึงไม่อนุญาตการเข้าถึงข้ามโดเมน
ซึ่งหมายความว่าทั้งหน้าเว็บและไฟล์ XML ที่พยายามโหลดจะต้องอยู่บนเซิร์ฟเวอร์เดียวกัน
ตัวอย่างใน W3Schools ไฟล์ XML ที่เปิดอยู่ทั้งหมดที่อยู่ในโดเมน W3Schools
หากคุณต้องการใช้ตัวอย่างข้างต้นในหน้าเว็บของคุณเอง ไฟล์ XML ที่คุณโหลดจะต้องอยู่บนเซิร์ฟเวอร์ของคุณเอง
XMLHttpRequest Object Methods
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
XMLHttpRequest คุณสมบัติอ็อบเจ็กต์
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| 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 |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
ทรัพย์สิน onload
ด้วยXMLHttpRequestวัตถุ คุณสามารถกำหนดฟังก์ชันเรียกกลับที่จะดำเนินการเมื่อคำขอได้รับคำตอบ
ฟังก์ชั่นถูกกำหนดในonloadคุณสมบัติของXMLHttpRequestวัตถุ:
ตัวอย่าง
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
ฟังก์ชันโทรกลับหลายรายการ
หากคุณมีงาน AJAX มากกว่าหนึ่งงานในเว็บไซต์ คุณควรสร้างหนึ่งฟังก์ชันสำหรับดำเนินการXMLHttpRequestวัตถุ และหนึ่งฟังก์ชันเรียกกลับสำหรับงาน AJAX แต่ละงาน
การเรียกใช้ฟังก์ชันควรมี URL และฟังก์ชันใดที่จะเรียกใช้เมื่อการตอบสนองพร้อม
ตัวอย่าง
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
ทรัพย์สิน onreadystatechange
คุณสมบัติreadyStateเก็บสถานะของ XMLHttpRequest
คุณสมบัติกำหนด ฟังก์ชันonreadystatechangeเรียกกลับที่จะดำเนินการเมื่อ readyState เปลี่ยนแปลง
คุณสมบัติstatusและ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() {
const 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");
xhttp.send();
}
เหตุการณ์onreadystatechangeถูกทริกเกอร์สี่ครั้ง (1-4) หนึ่งครั้งสำหรับการเปลี่ยนแปลงแต่ละครั้งใน readyState