DOM - วัตถุ XMLHttpRequest
อ็อบเจ็กต์ XMLHttpRequest สร้างสื่อระหว่างฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ของเว็บเพจที่สามารถใช้โดยภาษาสคริปต์ต่างๆเช่น JavaScript, JScript, VBScript และเว็บเบราว์เซอร์อื่น ๆ เพื่อถ่ายโอนและจัดการข้อมูล XML
ด้วยอ็อบเจ็กต์ XMLHttpRequest เป็นไปได้ที่จะอัปเดตส่วนของเว็บเพจโดยไม่ต้องโหลดซ้ำทั้งเพจร้องขอและรับข้อมูลจากเซิร์ฟเวอร์หลังจากโหลดเพจแล้วและส่งข้อมูลไปยังเซิร์ฟเวอร์
ไวยากรณ์
อ็อบเจ็กต์ XMLHttpRequest สามารถติดตั้งได้ดังนี้ -
xmlhttp = new XMLHttpRequest();ในการจัดการกับเบราว์เซอร์ทั้งหมดรวมถึง IE5 และ IE6 ให้ตรวจสอบว่าเบราว์เซอร์รองรับวัตถุ XMLHttpRequest ดังต่อไปนี้หรือไม่ -
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}ตัวอย่างการโหลดไฟล์ XML โดยใช้อ็อบเจ็กต์ XMLHttpRequest สามารถอ้างอิงได้ที่นี่
วิธีการ
ตารางต่อไปนี้แสดงวิธีการของอ็อบเจ็กต์ XMLHttpRequest -
| ส. | วิธีการและคำอธิบาย |
|---|---|
| 1 | abort() ยุติคำขอปัจจุบันที่ทำ |
| 2 | getAllResponseHeaders() ส่งคืนส่วนหัวการตอบกลับทั้งหมดเป็นสตริงหรือค่าว่างหากไม่ได้รับการตอบกลับ |
| 3 | getResponseHeader() ส่งคืนสตริงที่มีข้อความของส่วนหัวที่ระบุหรือค่าว่างถ้ายังไม่ได้รับการตอบกลับหรือไม่มีส่วนหัวในการตอบกลับ |
| 4 | open(method,url,async,uname,pswd) ใช้ในการผันคำกริยาด้วยวิธี Send เพื่อส่งคำขอไปยังเซิร์ฟเวอร์ วิธีการเปิดระบุพารามิเตอร์ต่อไปนี้ -
|
| 5 | send(string) ใช้เพื่อส่งคำขอที่ทำงานในการผันคำกริยาด้วยวิธีการเปิด |
| 6 | setRequestHeader() ส่วนหัวมีคู่ป้ายกำกับ / ค่าที่ส่งคำขอ |
คุณลักษณะ
ตารางต่อไปนี้แสดงรายการแอตทริบิวต์ของวัตถุ XMLHttpRequest -
| ส. | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | onreadystatechange เป็นคุณสมบัติตามเหตุการณ์ซึ่งตั้งค่าไว้ในทุกการเปลี่ยนแปลงสถานะ |
| 2 | readyState สิ่งนี้อธิบายสถานะปัจจุบันของอ็อบเจ็กต์ XMLHttpRequest คุณสมบัติ readyState มีอยู่ห้าสถานะ -
|
| 3 | responseText คุณสมบัตินี้ถูกใช้เมื่อการตอบสนองจากเซิร์ฟเวอร์เป็นไฟล์ข้อความ |
| 4 | responseXML คุณสมบัตินี้ถูกใช้เมื่อการตอบสนองจากเซิร์ฟเวอร์เป็นไฟล์ XML |
| 5 | status ให้สถานะของอ็อบเจ็กต์คำขอ Http เป็นตัวเลข ตัวอย่างเช่น "404" หรือ "200" |
| 6 | statusText ให้สถานะของอ็อบเจ็กต์คำขอ Http เป็นสตริง ตัวอย่างเช่น "ไม่พบ" หรือ "ตกลง" |
ตัวอย่าง
เนื้อหาnode.xmlมีดังต่อไปนี้ -
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>ดึงข้อมูลเฉพาะของไฟล์ทรัพยากร
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการที่จะดึงข้อมูลที่เฉพาะเจาะจงของไฟล์ทรัพยากรโดยใช้วิธีการgetResponseHeader ()และทรัพย์สินREADSTATE
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>การดำเนินการ
บันทึกไฟล์นี้เป็นelementattribute_removeAttributeNS.htmบนเส้นทางเซิร์ฟเวอร์ (ไฟล์นี้และ node_ns.xml ควรอยู่บนพา ธ เดียวกันในเซิร์ฟเวอร์ของคุณ) เราจะได้ผลลัพธ์ตามที่แสดงด้านล่าง -
Before removing the attributeNS: en
After removing the attributeNS: nullดึงข้อมูลส่วนหัวของไฟล์ทรัพยากร
ตัวอย่างต่อไปนี้สาธิตวิธีการดึงข้อมูลส่วนหัวของไฟล์รีซอร์สโดยใช้เมธอด getAllResponseHeaders() โดยใช้ทรัพย์สิน readyState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>การดำเนินการ
บันทึกไฟล์นี้เป็นhttp_allheader.htmlบนเส้นทางเซิร์ฟเวอร์ (ไฟล์นี้และ node.xml ควรอยู่บนเส้นทางเดียวกันในเซิร์ฟเวอร์ของคุณ) เราจะได้ผลลัพธ์ตามที่แสดงด้านล่าง (ขึ้นอยู่กับเบราว์เซอร์) -
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml