XMLHttpRequest 对象

XMLHttpRequest ออปเจกต์ให้กำหนดวิธีการติดต่อกับเซิร์ฟเวอร์หลังจากหน้าเว็บนี้ได้โหลดแล้ว

มีอะไรคือ XMLHttpRequest ออปเจกต์?

XMLHttpRequest ออปเจกต์คือนาทีใจของนักพัฒนาเพราะคุณสามารถ:

  • ปรับปรุงหน้าเว็บโดยไม่ต้องทำการโหลดหน้าเว็บใหม่
  • ขอข้อมูลจากเซิร์ฟเวอร์หลังจากหน้าเว็บได้ทำงาน
  • รับข้อมูลจากเซิร์ฟเวอร์หลังจากหน้าเว็บได้ทำงาน
  • ส่งข้อมูลไปยังเซิร์ฟเวอร์แบบภายหลัง

ทุกบราวเซอร์ที่ใหม่ทุกตัวสนับสนุน XMLHttpRequest

ตัวอย่าง：สื่อสาร XML HTTP กับเซิร์ฟเวอร์เมื่อพิมพ์ข้อความ.

สร้าง XMLHttpRequest

ด้วย JavaScript แค่บรรทัดเดียว พวกเราก็สามารถสร้าง XMLHttpRequest ได้.

ในบราวเซอร์ที่ใหม่ทุกตัว (รวมถึง IE 7):

xmlhttp=new XMLHttpRequest()

ใน Internet Explorer 5 และ 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

ตัวอย่าง

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// โค้ดสำหรับบราวเซอร์ที่ใหม่ทุกตัว}
  xmlhttp=new XMLHttpRequest();
  alert("Your browser does not support XMLHTTP.");
else if (window.ActiveXObject)
  {// โค้ดสำหรับ IE5 และ IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  alert("Your browser does not support XMLHTTP.");
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  alert("Your browser does not support XMLHTTP.");
else
  {
  alert("Your browser does not support XMLHTTP.");
  alert("Your browser does not support XMLHTTP.");
alert("Your browser does not support XMLHTTP.");
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...โค้ดของเราตรงนี้...
    alert("Your browser does not support XMLHTTP.");
  else
    {
    alert("มีปัญหาในการดึงข้อมูล XML");
    alert("Your browser does not support XMLHTTP.");
  alert("Your browser does not support XMLHTTP.");
alert("Your browser does not support XMLHTTP.");
}

ด้วยการใช้คุณสมบัติ response.write ในการส่งผลลัพธ์กลับไปยังลูกค้า

หมายเหตุ：onreadystatechange คือฮันเดิลเหตุการณ์. ค่าของมัน (state_Change) คือชื่อฟังก์ชัน ซึ่งจะเรียกฟังก์ชันนี้เมื่อสถานะของ XMLHttpRequest ได้เปลี่ยนแปลง. สถานะจาก 0 (uninitialized) ถึง 4 (complete) จะเปลี่ยนแปลง. เราจะปฏิบัติการเมื่อสถานะเป็น 4 เท่านั้น.

ทำไมต้องใช้ Async=true ?

ตัวอย่างของเราใช้ "true" ในตัวแปรที่สามของ open()

ตัวแปรนี้กำหนดว่าคำขอจะทำงานแบบอะสกเอียร์หรือไม่

True หมายถึงสคริปต์จะทำงานต่อหลังที่มีการเรียกใช้ send() โดยไม่ต้องรอคำตอบจากเซิร์ฟเวอร์

เหตุการณ์ onreadystatechange ทำให้โค้ดที่มีความซับซ้อนขึ้น แต่นี่เป็นวิธีที่ปลอดภัยที่สุดเพื่อป้องกันไม่ให้โค้ดหยุดลงเมื่อยังไม่ได้รับการตอบกลับจากเซิร์ฟเวอร์

โดยการตั้งค่าตัวแปรดังกล่าวเป็น "false" คุณสามารถละเลย onreadystatechange โค้ดเพิ่มเติม หากการทำงานของโค้ดอื่นเมื่อคำขอล้มเหลวไม่ได้เป็นสิ่งที่สำคัญ

ด้วยการใช้คุณสมบัติ response.write ในการส่งผลลัพธ์กลับไปยังลูกค้า

ตัวอย่างเพิ่มเติม

นำแบบ textfile ใส่ div ด้วย XML HTTP

ทำคำขอ HEAD โดย XML HTTP

ทำคำขอ HEAD โดย XML HTTP

แสดงรายการข้อมูลในแบบ XML ด้วย XML HTTP

XML / ASP

คุณก็สามารถเปิด XML โดยเอาไปส่งไปยังหน้า ASP บนเซิร์ฟเวอร์และวิเคราะห์คำขอนี้ แล้วส่งคืนผลลัพธ์กลับมา

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  alert("Your browser does not support XMLHTTP.");
else if (window.ActiveXObject)
  //{ code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  alert("Your browser does not support XMLHTTP.");
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlHttp.responseText);
  document.write(xmlHttp.responseText);
  alert("Your browser does not support XMLHTTP.");
else
  {
  alert("Your browser does not support XMLHTTP.");
  alert("Your browser does not support XMLHTTP.");
}
</script>
</body>

</html>

หน้าแบบ ASP ที่เขียนด้วย VBScript:
<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
   for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)

%>

ด้วยการใช้คุณสมบัติ response.write ในการส่งผลลัพธ์กลับไปยังลูกค้า

TIY

XMLHttpRequest องค์ประกอบเป็นมาตราฐานของ W3C หรือไม่?

มาตราฐานที่ W3C แนะนำไม่ได้กำหนด XMLHttpRequest องค์ประกอบ

อย่างไรก็ตาม มาตราฐาน "Load and Save" ของ W3C DOM Level 3 มีบางความหมายที่คล้ายคลึงกัน แต่ยังไม่มีบราวเซอร์ใดที่ได้รับการปฏิบัติตาม

ดู