XML DOM - XMLHttpRequest วัตถุ

XMLHttpRequest ตัวเลือก

วัตถุ XMLHttpRequest มีการให้เข้าถึง HTTP โปรโตคอลทั้งหมด รวมถึงความสามารถที่จะทำการส่งคำขอ POST และ HEAD รวมถึงคำขอ GET ทั่วไป XMLHttpRequest สามารถส่งคำตอบของเซิร์ฟเวอร์ Web ทั้งที่เป็นรูปแบบของข้อความหรือเอกสาร DOM แบบเดียวกัน

ถึงแม้ว่าจะมีชื่อว่า XMLHttpRequest แต่มันไม่จำกัดในการใช้กับเอกสาร XML ได้ มันสามารถรับเอกสารของทุกรูปแบบของเอกสารข้อความได้

วัตถุ XMLHttpRequest ที่มีชื่อว่า AJAX เป็นความสำคัญหนึ่งของโครงสร้างโปรแกรม Web ของ Web แอปพลิเคชัน

การสนับสนุนของบราวเซอร์

XMLHttpRequest ได้รับการสนับสนุนอย่างดีโดยเกือบทุกบราวเซอร์ที่ใช้แบบย่อระบบปฏิบัติการคอมพิวเตอร์ ซึ่งมีความเชื่อมโยงกับการสร้างวัตถุ XMLHttpRequest คือเช่นกัน ใน IE 5 และ IE 6 ต้องใช้ฟังก์ชัน ActiveXObject() ที่เป็นเฉพาะ IE ตามที่เห็นใน XMLHttpRequest ตัวเลือก ที่นี้เปิดเผย

มาตรฐาน W3C

XMLHttpRequest ยังไม่มีมาตรฐาน แต่ W3C ได้เริ่มงานที่จะมีมาตรฐาน สารอ้างอิงในคู่มือนี้เป็นต้นของงานร่างมาตรฐาน

ความสัมพันธ์ของ XMLHttpRequest ในปัจจุบันเหมือนกันมาก แต่มีความแตกต่างเล็กน้อยกับมาตรฐาน ตัวอย่างเช่น การแสดงผลอาจเป็น null ขณะที่มาตรฐานต้องใช้ศัพท์ว่าง หรือการตั้งค่า readyState อยู่ที่ 3 แต่ไม่มีการประกันว่าหัวข้อทั้งหมดเหมือนกัน

คุณสมบัติ

readyState

สถานะของคำร้อง HTTP ของ XMLHttpRequest ในตอนที่ XMLHttpRequest ถูกสร้างครั้งแรก ค่าของนี่เริ่มต้นที่ 0 จนรับคำตอบ HTTP ทั้งหมด

แต่ละสถานะที่มีชื่อที่ไม่เป็นทางการ ตารางด้านล่างนี้ระบุสถานะ ชื่อและความหมาย

สถานะ ชื่อ รายละเอียด
0 Uninitialized สถานะที่เริ่มต้น โอบเจก XMLHttpRequest ได้ถูกสร้างหรือถูกปลดล้างโดยเมธอด abort()
1 Open เรียกเมธอด open() แล้ว แต่ยังไม่เรียกเมธอด send() คำร้องขอยังไม่ได้ส่ง
2 Sent เรียกเมธอด Send() แล้ว คำร้องขอ HTTP ได้ส่งไปยังเซิร์ฟเวอร์ออนไลน์ ยังไม่ได้รับคำตอบ
3 Receiving หัวข้อที่ได้รับทั้งหมด คำตอบที่ยังไม่เสร็จสมบูรณ์ตอนนี้
4 Loaded การรับคำตอบของ HTTP ได้รับครบถ้วนแล้ว

ค่าของ readyState จะไม่ลดลง ยกเว้นว่าถ้ามีการเรียกเมธอด abort() หรือ open() ระหว่างกระบวนการร้องขอ ในทุกครั้งที่ค่าของคุณสมบัตินี้เพิ่มขึ้น จะเกิดเหตุการณ์ onreadystatechange

responseText

ส่วนที่ตอบทั้งหมดที่ได้รับโดยโซนเซิร์ฟเวอร์ (ไม่รวมหัวข้อ) หรือถ้ายังไม่ได้รับข้อมูล จะเป็นศัพท์ว่าง

ถ้า readyState ต่ำกว่า 3 แล้ว คุณสมบัตินี้จะเป็นศัพท์ว่าง ขณะที่ readyState เท่า 3 คุณสมบัตินี้จะคืนค่าส่วนที่ได้รับแล้วของคำตอบ ถ้า readyState เท่า 4 คุณสมบัตินี้จะเก็บค่าของส่วนที่ตอบทั้งหมด

ถ้าคำตอบมีหัวข้อที่กำหนดตัวแปลภาษาของส่วนที่ตอบ ใช้ตัวแปลภาษาดังกล่าว ไม่เช่นนั้น ใช้ Unicode UTF-8 โดยความคิดคาด

responseXML

การตอบสนองต่อคำขอ และทำการประมวลเป็น XML และใช้งานเป็น วัตถุ Documentกลับ

status

ที่กลับมาจากเซิร์ฟเวอร์ รหัสสถานะ HTTPเช่น 200 แสดงถึงการสำเร็จ และ 404 แสดงถึงข้อผิดพลาด "Not Found" การอ่านค่านี้เมื่อ readyState ต่ำกว่า 3 จะทำให้เกิดข้อผิดพลาด

statusText

นี่คือค่าที่ระบุด้วยชื่อแทนที่ด้วยตัวเลขสำหรับสถานะ HTTP ของคำขอ หมายถึงเมื่อสถานะเป็น 200 ก็จะเป็น "OK" และเมื่อสถานะเป็น 404 ก็จะเป็น "Not Found" อย่างเดียวกับค่า status การอ่านค่านี้เมื่อ readyState ต่ำกว่า 3 จะทำให้เกิดข้อผิดพลาด

ฟังก์ชันที่จัดการเหตุการณ์

onreadystatechange

ฟังก์ชันที่เรียกใช้เมื่อแนวทาง readyState มีการเปลี่ยนแปลง ฟังก์ชันนี้อาจถูกเรียกหลายครั้งเมื่อ readyState อยู่ที่ 3

วิธี

abort()

ยกเลิกคำตอบปัจจุบัน ปิดการเชื่อมต่อและจบทุกกิจกรรมเคลื่อนไหวเคลื่อนที่ที่ยังไม่ได้ทำการ

วิธีนี้จะเริ่มต้น XMLHttpRequest ตัวแปรเป็นสถานะ readyState 0 และยกเลิกทุกกิจกรรมเคลื่อนไหวเคลื่อนที่ที่ยังไม่ได้ทำการ ตัวอย่างเช่น ถ้าคำขอใช้เวลาเกินไปและตอบคำขอไม่จำเป็นเพียงพอ สามารถเรียกใช้วิธีนี้

getAllResponseHeaders()

กลับหัวขอคำตอบ HTTP ในรูปของตัวว่างที่ยังไม่ถูกแยก

ถ้า readyState ต่ำกว่า 3 ก็จะกลับมาด้วยค่า null ถ้าไม่ มันจะกลับมาด้วยหัวขอทั้งหมดที่มีการส่งมาจากเซิร์ฟเวอร์ของ HTTP หัวขอถูกกลับมาในรูปของตัวว่าง แต่ละหัวขอในแถวต่างๆ และแถวที่แยกต่างๆ ด้วยสัญญาณแบ่งแถว "\r\n"

getResponseHeader()

กลับค่าหัวขอ HTTP ที่ระบุ ค่าที่ใส่เข้ามาคือชื่อหัวขอ HTTP ที่ต้องการกลับ สามารถใช้ใดๆ ขนาดของตัวอักษรเพื่อกำหนดชื่อหัวขอ และการเปรียบเทียบกับหัวขอตอบคำขอไม่แบ่งประเภทขนาดของตัวอักษร

ค่าที่กลับมาจากการใช้งานนี้คือค่าของหัวขอ HTTP ที่ระบุ ถ้าไม่ได้รับหัวขอนี้หรือ readyState ต่ำกว่า 3 ก็จะเป็นตัวว่าง ถ้าได้รับหัวขอหลายครั้งที่มีชื่อที่ระบุ ค่าของหัวขอจะถูกเชื่อมต่อกันแล้วกลับมา แบ่งทางด้วยคำ逗号 และช่องว่าง

open()

เริ่มต้นค่าตัวแปรคำขอ HTTP อย่างเช่น URL และวิธี HTTP แต่ไม่ส่งคำขอ

send()

ส่งคำขอ HTTP โดยใช้ตัวแปรที่ส่งไปยังการเรียกใช้ open() และตัวแปรที่ส่งไปยังองค์ประกอบคำขอที่เป็นตัวเลือก

setRequestHeader()

จัดตั้งหรือเพิ่ม HTTP คำขอในคำขอที่เปิดแต่ยังไม่ส่ง

XMLHttpRequest.open()

ตั้งค่าข้อมูลคำขอ HTTP

โฉม

open(method, url, async, username, password)

ตัวแปร method คือวิธีการ HTTP ที่ใช้ในคำขอ ค่าที่ใช้ได้นั้นประกอบด้วย GET, POST และ HEAD

ตัวแปร url คือหลักข้อมูลของคำขอ ส่วนใหญ่ของเว็บเบราว์เซอร์นำเสนอกฎหลักความปลอดภัยเดียวกันท้องถิ่น และต้องการให้ URL ตรงกันทั้งหมดกับข้อความที่มีสคริปต์

ตัวแปร async ชี้ว่าคำขอควรทำงานแบบทันที ถ้าตัวแปรนี้เป็น false คำขอจะทำงานแบบซิงเกิ้ล การเรียกใช้ send() จะถูกบล็อคจนกว่าจะได้รับคำตอบสนองเต็ม ถ้าตัวแปรนี้เป็น true หรือละเลย คำขอจะทำงานแบบทันที และปกติจะต้องการมีมือตัวแปร onreadystatechange

ตัวแปร username และ password คือตัวแปรที่สามารถละเลยได้ ใช้เพื่อให้ความสามารถการรับรองสำหรับการอนุญาตที่จำเป็นสำหรับ URL ถ้าถูกกำหนด นั่นจะทำให้ท้ายทายทุกอนุญาตที่ระบุใน URL ตัวเดียว

ชี้แจง

วิธีการนี้จะตั้งค่าข้อมูลของคำขอเพื่อใช้กับวิธีการ send() ในอนาคต มันจะตั้งค่า readyState ให้เป็น 1 ลบทั้งหมดข้อมูลหัวข้อที่ระบุก่อนหน้านี้ และข้อมูลหัวข้อตอบสนองที่ได้รับก่อนหน้านี้ และตั้งค่าตัวแปร responseText, responseXML, status และ statusText ให้เป็นค่าเริ่มต้น ขณะที่ readyState คือ 0 (เมื่อ XMLHttpRequest ตัวแปรถูกสร้างหรือวิธีการ abort() ถูกเรียกใช้) และเมื่อ readyState คือ 4 (เมื่อได้รับคำตอบสนองแล้ว) การเรียกใช้วิธีการนี้เป็นไปได้ ขณะที่เรียกใช้ในสถานะอื่น วิธีการ open() จะทำตามที่ระบุ

นอกจากจัดเก็บข้อมูลที่ใช้กับวิธีการ send() และตั้งค่า XMLHttpRequest ตัวแปรเพื่อใช้งานใหม่ วิธีการ open() ไม่มีการกระทำอื่นๆ ควรสนใจว่า เมื่อวิธีการนี้ถูกเรียกใช้ โดยทั่วไปจะไม่มีการเปิดการเชื่อมต่อแบบเครือข่ายไปยังเซิร์ฟเวอร์เว็บ

XMLHttpRequest.send()

ส่งคำขอ HTTP

โฉม

send(body)

ถ้าผ่านการเรียกใช้ open() ระบุวิธีการ HTTP คือ POST หรือ PUT ตัวแปร body ระบุของของขอคำขอเป็นตัวแปรหรือ วัตถุ Documentถ้าของคำขอไม่จำเป็นต้องใช้ตัวแปรนี้จะเป็น null สำหรับวิธีการที่ไม่ใช่ POST หรือ PUT ตัวแปรนี้ไม่สามารถใช้ได้ ควรใช้ null (บางรูปแบบไม่อนุญาตให้ละเลยตัวแปรนี้)

ชี้แจง

วิธีนี้ทำให้การขอ HTTP ถูกส่งไป ถ้าไม่มีการเรียกใช้ open() หรือเกี่ยวกับการเรียกใช้ open() ไม่ใช่ readyState 1 วิธี send() จะทิ้งข้อผิดพลาด หากไม่นั้น มันจะส่งการขอ HTTP ที่ประกอบด้วยส่วนต่างๆ ต่อไปนี้

  • วิธี HTTP ที่กำหนดไว้ก่อนหน้านี้ หรือ URL และคุณสมบัติการสร้างสมรรถนะ (ถ้ามี)
  • หัวข้อของการขอที่กำหนดไว้ก่อนหน้านี้โดย setRequestHeader() (ถ้ามี)
  • ส่งผ่านไปยังวิธีนี้ body ตัวแปร

เมื่อการขอได้ถูกเผยแพร่ วิธี send() จะตั้งค่า readyState ให้เป็น 2 และกำจัดเหตุการณ์ onreadystatechange หลัก

ถ้ามีการเรียกใช้ open() ก่อนหน้านี้ ตัวแปร async มีค่าเป็น false วิธีนี้จะบรรลุศาลไม่มีการกลับมา จนกระทั่ง readyState มีค่า 4 และตอบสนองของเซิร์ฟเวอร์ได้รับค่าทั้งหมด แต่ถ้าตัวแปร async มีค่าเป็น true หรือถ้าตัวแปรนี้ไม่ได้รับการกำหนด วิธี send() จะกลับมาทันที และตามที่จะได้รับรู้ด้วย ตอบสนองของเซิร์ฟเวอร์จะถูกจัดการด้วยสายทำงานใน后台

ถ้ามีการเรdirectoriesตะโดยเซิร์ฟเวอร์มี HTTP การเรdirectoriesต วิธี send() หรือสายทำงานบวกกับการเรdirectoriesตโดยอัตโนมัติ ในกรณีที่หัวข้อตอบสนอง HTTP ทั้งหมดได้รับค่าแล้ว send() หรือสายทำงานจะตั้งค่า readyState ให้เป็น 3 และกำจัดเหตุการณ์ onreadystatechange หลัก ถ้าตอบสนองยาวนาน send() หรือสายทำงานอาจจะกำจัดเหตุการณ์ onreadystatechange หลักในสถานะ 3 นี้ ซึ่งสามารถใช้เป็นตัวแสดงความคืบหน้าในการดาวน์โหลด สุดท้าย เมื่อตอบสนองเสร็จสิ้น send() หรือสายทำงานจะตั้งค่า readyState ให้เป็น 4 และกำจัดเหตุการณ์หลักครั้งสุดท้าย

XMLHttpRequest.setRequestHeader()

โฉม

setRequestHeader(name, value)

ตัวแปร name คือชื่อของหัวข้อที่ต้องการกำหนด ตัวแปรนี้ไม่ควรรวมช่องว่าง สัญญาณสองจุดหรือบรรทัด

ตัวแปร value คือค่าของหัวข้อ ตัวแปรนี้ไม่ควรรวมเครื่องหมายจุดขึ้นบรรทัด

ชี้แจง

วิธี setRequestHeader() กำหนดหัวข้อของการขอ HTTP ที่ควรมีอยู่ในคำขอที่ส่งด้วยการเรียกใช้ send() ต่อไปนี้。วิธีนี้สามารถเรียกใช้ได้เมื่อ readyState อยู่ที่ 1 ตัวอย่าง เมื่อเรียกใช้ open() แล้ว แต่ก่อนที่จะเรียกใช้ send()

ถ้าหัวข้อที่มีชื่อที่กำหนดไปแล้วถูกกำหนดแล้ว ค่าใหม่ของหัวข้อนี้คือ: ค่าที่กำหนดไปก่อน บวกด้วยเครื่องหมายประกาศรวมถึงช่องว่างและค่าที่กำหนดโดยการเรียกใช้นี้

ถ้าการเรียกใช้ open() กำหนดคุณสมบัติการรับรอง XMLHttpRequest จะส่งหัวข้อการขอรับรองที่เหมาะสมอัตโนมัติ แต่คุณสามารถใช้ setRequestHeader() ในการเพิ่มหัวข้อนี้เข้าไป อีกด้วย ถ้าเซิร์ฟเวอร์เว็บที่คุณใช้อยู่ได้บันทึกและส่ง cookie ที่เกี่ยวข้องกับ URL ที่ถูกส่งไปยัง open() หัวข้อ Cookie หรือ Cookie2 ที่เหมาะสมจะถูกบันทึกเข้าไปในคำขออัตโนมัติ คุณสามารถใช้ setRequestHeader() ในการเพิ่ม cookie นี้เข้าไปในหัวข้อ XMLHttpRequest ยังสามารถให้หัวข้อ User-Agent ค่าเริ่มต้นด้วย ถ้ามันทำสิ่งนี้ คุณจะสามารถเพิ่มค่าที่คุณกำหนดให้หัวข้อนี้เข้าไปด้วย หลังจากค่าเริ่มต้นนี้

บางส่วนของหัวข้อการขอความรับรองที่ถูกตั้งโดย XMLHttpRequest โดยอัตโนมัติ แทนที่จะตั้งโดยวิธีนี้ เพื่อที่จะตอบสนองตามข้อกำหนดของโปรโตคอล HTTP นี้ ซึ่งรวมถึงหัวข้อที่เกี่ยวข้องกับโปรกซีเซอร์ตัวนี้:

  • Host
  • Connection
  • Keep-Alive
  • Accept-charset
  • Accept-Encoding
  • If-Modified-Since
  • If-None-Match
  • If-Range
  • Range