วัตถุXMLHttpRequest _
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีวัตถุ XMLHttpRequest ในตัวเพื่อขอข้อมูลจากเซิร์ฟเวอร์
เบราว์เซอร์หลักทั้งหมดมีตัวแยกวิเคราะห์ XML ในตัวเพื่อเข้าถึงและจัดการ XML
วัตถุ XMLHttpRequest
สามารถใช้วัตถุ XMLHttpRequest เพื่อขอข้อมูลจากเว็บเซิร์ฟเวอร์
ออบเจ็กต์ XMLHttpRequest เป็นความฝันของนักพัฒนาเนื่องจากคุณสามารถ:
- อัปเดตหน้าเว็บโดยไม่ต้องโหลดหน้าซ้ำ
- ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากโหลดหน้าแล้ว
- รับข้อมูลจากเซิฟเวอร์ - หลังจากโหลดเพจแล้ว
- ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง
XMLHttpRequest ตัวอย่าง
เมื่อคุณพิมพ์อักขระในช่องป้อนข้อมูลด้านล่าง XMLHttpRequest จะถูกส่งไปยังเซิร์ฟเวอร์ และข้อเสนอแนะบางชื่อจะถูกส่งกลับ (จากเซิร์ฟเวอร์):
ตัวอย่าง
Start typing a name in the input field below:
Suggestions:
การส่ง XMLHttpRequest
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีวัตถุ XMLHttpRequest ในตัว
ไวยากรณ์ JavaScript ทั่วไปสำหรับการใช้งานมีลักษณะดังนี้:
ตัวอย่าง
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
การสร้างวัตถุ XMLHttpRequest
บรรทัดแรกในตัวอย่างด้านบนสร้างอ็อบเจ็กต์ XMLHttpRequest:
var xhttp = new XMLHttpRequest();
เหตุการณ์ onreadystatechange
คุณสมบัติreadyStateเก็บสถานะของ XMLHttpRequest
เหตุการณ์onreadystatechange จะถูกท ริกเกอร์ทุกครั้งที่ readyState เปลี่ยนแปลง
ระหว่างการร้องขอเซิร์ฟเวอร์ readyState เปลี่ยนจาก 0 เป็น 4:
0: คำขอไม่ได้เริ่มต้น
1: สร้างการเชื่อมต่อเซิร์ฟเวอร์
2: ได้รับคำขอ
3: ประมวลผลคำขอ
4: คำขอเสร็จสิ้นและการตอบสนองพร้อม
ในคุณสมบัติ onreadystatechange ระบุฟังก์ชันที่จะดำเนินการเมื่อ readyState เปลี่ยนแปลง:
xhttp.onreadystatechange = function()
เมื่อ readyState เป็น 4 และสถานะ 200 การตอบสนองก็พร้อม:
if (this.readyState == 4 && this.status == 200)
XMLHttpRequest คุณสมบัติและวิธีการ
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | 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 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
เข้าถึงข้ามโดเมน
ด้วยเหตุผลด้านความปลอดภัย เบราว์เซอร์สมัยใหม่จึงไม่อนุญาตการเข้าถึงข้ามโดเมน
ซึ่งหมายความว่าทั้งหน้าเว็บและไฟล์ XML ที่พยายามโหลดจะต้องอยู่บนเซิร์ฟเวอร์เดียวกัน
ตัวอย่างใน W3Schools ไฟล์ XML ที่เปิดอยู่ทั้งหมดที่อยู่ในโดเมน W3Schools
หากคุณต้องการใช้ตัวอย่างข้างต้นในหน้าเว็บของคุณเอง ไฟล์ XML ที่คุณโหลดจะต้องอยู่บนเซิร์ฟเวอร์ของคุณเอง
คุณสมบัติข้อความตอบกลับ
คุณสมบัติ responseText ส่งกลับการตอบกลับเป็นสตริง
หากคุณต้องการใช้การตอบกลับเป็นสตริงข้อความ ให้ใช้คุณสมบัติ responseText:
ตัวอย่าง
document.getElementById("demo").innerHTML = xmlhttp.responseText;
การตอบสนองคุณสมบัติ XML
คุณสมบัติ responseXML ส่งคืนการตอบสนองเป็นอ็อบเจ็กต์ XML DOM
หากคุณต้องการใช้การตอบกลับเป็นวัตถุ XML DOM ให้ใช้คุณสมบัติ responseXML:
ตัวอย่าง
ขอไฟล์cd_catalog.xmlและใช้การตอบกลับเป็นอ็อบเจ็กต์ XML DOM:
xmlDoc = xmlhttp.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;
รับหรือโพสต์?
GET ง่ายกว่าและเร็วกว่า POST และสามารถใช้ได้ในกรณีส่วนใหญ่
อย่างไรก็ตาม ใช้คำขอ POST เสมอเมื่อ:
- ไฟล์แคชไม่ใช่ตัวเลือก (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)
- การส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีข้อจำกัดด้านขนาด)
- ส่งอินพุตของผู้ใช้ (ซึ่งสามารถมีอักขระที่ไม่รู้จัก) POST นั้นแข็งแกร่งและปลอดภัยกว่า GET
URL - ไฟล์บนเซิร์ฟเวอร์
พารามิเตอร์ url ของเมธอด open() คือที่อยู่ของไฟล์บนเซิร์ฟเวอร์:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
ไฟล์อาจเป็นไฟล์ประเภทใดก็ได้ เช่น .txt และ .xml หรือไฟล์สคริปต์ของเซิร์ฟเวอร์ เช่น .asp และ .php (ซึ่งสามารถดำเนินการกับเซิร์ฟเวอร์ก่อนที่จะส่งการตอบกลับกลับ)
อะซิงโครนัส - จริงหรือเท็จ?
หากต้องการส่งคำขอแบบอะซิงโครนัส พารามิเตอร์ async ของเมธอด open() จะต้องตั้งค่าเป็นจริง:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
การส่งคำขอแบบอะซิงโครนัสเป็นการปรับปรุงครั้งใหญ่สำหรับนักพัฒนาเว็บ งานหลายอย่างที่ทำบนเซิร์ฟเวอร์ใช้เวลานานมาก
ด้วยการส่งแบบอะซิงโครนัส JavaScript ไม่จำเป็นต้องรอการตอบกลับของเซิร์ฟเวอร์ แต่สามารถ:
- รันสคริปต์อื่นขณะรอการตอบกลับของเซิร์ฟเวอร์
- จัดการกับการตอบสนองเมื่อการตอบสนองพร้อม
Async = จริง
เมื่อใช้ async = true ให้ระบุฟังก์ชันที่จะดำเนินการเมื่อการตอบสนองพร้อมในเหตุการณ์ onreadystatechange:
ตัวอย่าง
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = เท็จ
ในการใช้ async = false ให้เปลี่ยนพารามิเตอร์ตัวที่สามในเมธอด open() เป็นเท็จ:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
ไม่แนะนำให้ใช้ async = false แต่สำหรับคำขอเล็กๆ น้อยๆ บางอย่างก็ใช้ได้
โปรดจำไว้ว่า JavaScript จะไม่ทำงานต่อไป จนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดทำงาน
หมายเหตุ:เมื่อคุณใช้ async = false อย่าเขียนฟังก์ชัน onreadystatechange - เพียงแค่ใส่โค้ดหลังคำสั่ง send()
ตัวอย่าง
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML Parser
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีตัวแยกวิเคราะห์ XML ในตัว
XML Document Object Model (DOM) มีวิธีการมากมายในการเข้าถึงและแก้ไข XML
อย่างไรก็ตาม ก่อนเข้าถึงเอกสาร XML จะต้องโหลดเอกสารนั้นลงในวัตถุ XML DOM
ตัวแยกวิเคราะห์ XML สามารถอ่านข้อความธรรมดาและแปลงเป็นวัตถุ XML DOM
การแยกวิเคราะห์สตริงข้อความ
ตัวอย่างนี้แยกวิเคราะห์สตริงข้อความเป็นอ็อบเจ็กต์ XML DOM และดึงข้อมูลจากมันด้วย JavaScript:
ตัวอย่าง
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
เบราว์เซอร์เก่า (IE5 และ IE6)
Internet Explorer เวอร์ชันเก่า (IE5 และ IE6) ไม่สนับสนุนอ็อบเจ็กต์ XMLHttpRequest
ในการจัดการ IE5 และ IE6 ให้ตรวจสอบว่าเบราว์เซอร์รองรับวัตถุ XMLHttpRequest หรือไม่ หรือสร้าง ActiveXObject:
ตัวอย่าง
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Internet Explorer เวอร์ชันเก่า (IE5 และ IE6) ไม่สนับสนุนวัตถุ DOMParser
ในการจัดการ IE5 และ IE6 ให้ตรวจสอบว่าเบราว์เซอร์สนับสนุนวัตถุ DOMParser หรือสร้าง ActiveXObject:
ตัวอย่าง
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
ตัวอย่างเพิ่มเติม
ดึงข้อมูลส่วนหัวของทรัพยากร (ไฟล์)
ดึงข้อมูลส่วนหัวเฉพาะของทรัพยากร (ไฟล์)
วิธีที่หน้าเว็บสามารถสื่อสารกับเว็บเซิร์ฟเวอร์ในขณะที่ผู้ใช้พิมพ์อักขระในช่องใส่ข้อมูล
วิธีที่เว็บเพจสามารถดึงข้อมูลจากฐานข้อมูลด้วยอ็อบเจ็กต์ XMLHttpRequest
สร้าง XMLHttpRequest เพื่อดึงข้อมูลจากไฟล์ XML และแสดงข้อมูลในตาราง HTML