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 เพื่อส่งคำขอไปยังเซิร์ฟเวอร์ วิธีการเปิดระบุพารามิเตอร์ต่อไปนี้ -

  • method - ระบุประเภทของคำขอเช่นรับหรือโพสต์

  • url - เป็นตำแหน่งของไฟล์

  • async- ระบุว่าควรจัดการคำขออย่างไร เป็นค่าบูลีน ที่ไหน

    • 'true' หมายถึงคำขอถูกประมวลผลแบบอะซิงโครนัสโดยไม่ต้องรอการตอบกลับ Http

    • 'เท็จ' หมายถึงคำขอถูกประมวลผลพร้อมกันหลังจากได้รับการตอบกลับ Http

  • uname - คือชื่อผู้ใช้

  • pswd - คือรหัสผ่าน

5

send(string)

ใช้เพื่อส่งคำขอที่ทำงานในการผันคำกริยาด้วยวิธีการเปิด

6

setRequestHeader()

ส่วนหัวมีคู่ป้ายกำกับ / ค่าที่ส่งคำขอ

คุณลักษณะ

ตารางต่อไปนี้แสดงรายการแอตทริบิวต์ของวัตถุ XMLHttpRequest -

ส. คุณสมบัติและคำอธิบาย
1

onreadystatechange

เป็นคุณสมบัติตามเหตุการณ์ซึ่งตั้งค่าไว้ในทุกการเปลี่ยนแปลงสถานะ

2

readyState

สิ่งนี้อธิบายสถานะปัจจุบันของอ็อบเจ็กต์ XMLHttpRequest คุณสมบัติ readyState มีอยู่ห้าสถานะ -

  • readyState = 0 - หมายถึงคำขอยังไม่เริ่มต้น

  • readyState = 1 - ตั้งคำขอแล้ว

  • readyState = 2 - ส่งคำขอแล้ว

  • readyState = 3 - คำขอกำลังดำเนินการ

  • readyState = 4 - คำขอเสร็จสมบูรณ์

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