เบราว์เซอร์ที่ทันสมัยทั้งหมดมีวัตถุในตัว XMLHttpRequest เพื่อขอข้อมูลจากเซิร์ฟเวอร์
เบราว์เซอร์ที่สำคัญทั้งหมดมี parser XML ในตัวการเข้าถึงและจัดการ XML
วัตถุ XMLHttpRequest
วัตถุ XMLHttpRequest สามารถใช้ในการขอข้อมูลจากเว็บเซิร์ฟเวอร์
วัตถุ XMLHttpRequest เป็น a developers dream เพราะคุณสามารถ:
- อัพเดทหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บ
- ขอข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
- ได้รับข้อมูลจากเซิร์ฟเวอร์ - หลังจากที่มีการโหลดหน้า
- ส่งข้อมูลไปยังเซิร์ฟเวอร์ - ในพื้นหลัง
ตัวอย่าง XMLHttpRequest
เมื่อคุณพิมพ์ตัวอักษรในช่องด้านล่างเป็น XMLHttpRequest จะถูกส่งไปยังเซิร์ฟเวอร์และข้อเสนอแนะบางชื่อจะถูกส่งกลับ (from the server) :
ตัวอย่าง
Start typing a name in the input field below:
Suggestions:
ส่ง XMLHttpRequest
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีวัตถุ XMLHttpRequest ในตัว
ไวยากรณ์ JavaScript ทั่วไปสำหรับใช้มันดูมากเช่นนี้
ตัวอย่าง
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); ลองตัวเอง» การสร้างวัตถุ XMLHttpRequest
บรรทัดแรกในตัวอย่างข้างต้นสร้าง Objet 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 (xhttp.readyState == 4 && xhttp.status == 200)
คุณสมบัติและวิธีการ XMLHttpRequest
| วิธี | ลักษณะ |
|---|---|
| new XMLHttpRequest() | สร้างวัตถุ XMLHttpRequest ใหม่ |
| open( method, url, async ) | ระบุชนิดของการร้องขอ method : ประเภทของคำขอ: GET หรือโพสต์ url : สถานที่ตั้งไฟล์ async : จริง (asynchronous) หรือเท็จ (synchronous) |
| send() | ส่งการร้องขอไปยังเซิร์ฟเวอร์ (used for GET) |
| send( string ) | ส่งสตริงการร้องขอไปยังเซิร์ฟเวอร์ (used for POST) |
| onreadystatechange | ฟังก์ชั่นที่จะเรียกว่าเมื่อมีการเปลี่ยนแปลงสถานที่ให้บริการ readyState |
| readyState | สถานะของ XMLHttpRequest 0 ขอไม่ได้เริ่มต้น 1: การเชื่อมต่อเซิร์ฟเวอร์ที่จัดตั้งขึ้น 2: ได้รับการร้องขอ 3: การประมวลผลคำขอ 4: ขอสำเร็จรูปและการตอบสนองพร้อม |
| status | 200: OK ไม่พบหน้า: 404 |
| responseText | ข้อมูลการตอบสนองเป็นสตริง |
| responseXML | ข้อมูลการตอบสนองเป็นข้อมูล XML |
การเข้าถึงข้ามโดเมน
สำหรับเหตุผลด้านความปลอดภัยเบราว์เซอร์ที่ทันสมัยไม่อนุญาตให้มีการเข้าถึงข้ามโดเมน
ซึ่งหมายความว่าทั้งหน้าเว็บและไฟล์ XML ก็พยายามที่จะโหลดจะต้องอยู่บนเซิร์ฟเวอร์เดียวกัน
ตัวอย่างใน w3ii ไฟล์ XML ที่เปิดอยู่ทั้งหมดตั้งอยู่บนโดเมน w3ii
หากคุณต้องการที่จะใช้ตัวอย่างข้างต้นที่หนึ่งในหน้าเว็บของคุณเอง, ไฟล์ XML ที่คุณโหลดต้องอยู่บนเซิร์ฟเวอร์ของคุณเอง
responseText ทรัพย์สิน
สถานที่ให้บริการ responseText ผลตอบแทนการตอบสนองเป็นสตริง
หากคุณต้องการที่จะใช้การตอบสนองเป็นสตริงข้อความที่ใช้ responseText ทรัพย์สิน:
responseXML ทรัพย์สิน
คุณสมบัติ responseXML ส่งกลับการตอบสนองเป็น XML DOM วัตถุ
หากคุณต้องการที่จะใช้การตอบสนองเป็นวัตถุ DOM XML ใช้ responseXML ทรัพย์สิน:
ตัวอย่าง
ขอไฟล์ cd_catalog.xml และใช้การตอบสนองเป็นวัตถุ DOM XML:
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 เมื่อ:
- ไฟล์ที่เก็บไว้ชั่วคราวไม่ได้เป็นตัวเลือก (update a file or database on the server)
- การส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีข้อ จำกัด ด้านขนาด)
- ส่งเข้าของผู้ใช้ (which can contain unknown characters) , โพสต์จะมีประสิทธิภาพมากขึ้นและปลอดภัยกว่า GET
URL ที่ - ไฟล์บนเซิร์ฟเวอร์
พารามิเตอร์ URL ของ open() วิธีการคือที่อยู่ไปยังแฟ้มบนเซิร์ฟเวอร์:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
ไฟล์ที่สามารถชนิดของไฟล์ใด ๆ เช่น .txt และ .xml หรือไฟล์สคริปต์เซิร์ฟเวอร์เช่นงูเห่าและ .php (ซึ่งสามารถดำเนินการบนเซิร์ฟเวอร์ก่อนที่จะส่งการตอบสนองด้านหลัง)
Asynchronous - จริงหรือเท็จ?
เพื่อส่งคำขอ asynchronously พารามิเตอร์ async ของ open() วิธีการจะต้องมีการตั้งค่าเป็นจริง:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
ส่ง asynchronously ร้องขอคือการปรับปรุงอย่างมากสำหรับนักพัฒนาเว็บ หลายงานที่ดำเนินการบนเซิร์ฟเวอร์เป็นเวลานานมาก
โดยการส่ง asynchronously, จาวาสคริปต์ไม่จำเป็นต้องรอการตอบสนองเซิร์ฟเวอร์ แต่แทนที่จะสามารถ:
- รันสคริปต์อื่น ๆ ในขณะที่รอการตอบกลับของเซิร์ฟเวอร์
- จัดการกับการตอบสนองเมื่อการตอบสนองที่มีความพร้อม
Async = true
เมื่อใช้ async = true ระบุฟังก์ชั่นในการดำเนินการเมื่อการตอบสนองที่มีความพร้อมในกรณี onreadystatechange:
ตัวอย่าง
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); ลองตัวเอง» Async = false
หากต้องการใช้ async = false เปลี่ยนพารามิเตอร์ที่สามในการ open() วิธีการในการเท็จ
xmlhttp.open("GET", "xmlhttp_info.txt", false);
ใช้ async = false ไม่แนะนำ แต่สำหรับคำขอเล็ก ๆ น้อย ๆ นี้สามารถตกลง
โปรดจำไว้ว่า JavaScript จะไม่มีการดำเนินการต่อไปดำเนินการจนตอบสนองของเซิร์ฟเวอร์ที่มีความพร้อม ถ้าเซิร์ฟเวอร์ไม่ว่างหรือช้าโปรแกรมจะแขวนหรือหยุด
Note: เมื่อคุณใช้ async = false ไม่ได้เขียนฟังก์ชั่น onreadystatechange - เพียงแค่ใส่รหัสหลังจาก send() คำสั่ง:
ตัวอย่าง
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; ลองตัวเอง» Parser XML
เบราว์เซอร์ที่ทันสมัยทั้งหมดมีตัวแยกวิเคราะห์ XML ในตัว
รูปแบบวัตถุเอกสาร XML (the XML DOM) มีจำนวนมากของวิธีการที่จะเข้าถึงและแก้ไข XML
อย่างไรก็ตามก่อนที่เอกสาร XML สามารถเข้าถึงได้ก็ต้องโหลดลงใน XML DOM วัตถุ
parser XML สามารถอ่านข้อความธรรมดาและแปลงเป็นวัตถุ DOM XML
แยกสตริงข้อความ
ตัวอย่างนี้จะแยกวิเคราะห์สตริงข้อความลงในวัตถุ DOM XML, และสารสกัดจากข้อมูลจากมันด้วย 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 and IE6)
รุ่นเก่าของ Internet Explorer (IE5 and 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 and 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);
}
ลองตัวเอง» 
ตัวอย่างเพิ่มเติม
ดึงข้อมูลส่วนหัวกับ getAllResponseHeaders()
ดึงข้อมูลส่วนหัวของทรัพยากร (file)
ดึงข้อมูลส่วนหัวที่เฉพาะเจาะจงกับ getResponseHeader()
ดึงข้อมูลส่วนหัวที่เฉพาะเจาะจงของทรัพยากร (file)
ดึงเนื้อหาของแฟ้มของ ASP
วิธีหน้าเว็บที่สามารถสื่อสารกับเว็บเซิร์ฟเวอร์ในขณะที่ตัวละครประเภทของผู้ใช้ในช่องใส่
ดึงเนื้อหาจากฐานข้อมูล
วิธีหน้าเว็บสามารถดึงข้อมูลจากฐานข้อมูลที่มีวัตถุ XMLHttpRequest
เรียกดูเนื้อหาของไฟล์ XML
สร้าง XMLHttpRequest เพื่อดึงข้อมูลจากไฟล์ XML และแสดงข้อมูลในตาราง HTML