XML HttpRequest

ทุกบราวเซอร์สมัยใหม่ทุกตัวมี XMLHttpRequest ออบเจกภายในตัวตนของมันเพื่อขอข้อมูลจากเซิร์ฟเวอร์.

XMLHttpRequest ออบเจก

XMLHttpRequest ออบเจกสามารถใช้ในการขอข้อมูลจากเซิร์ฟเวอร์ของเว็บ:

XMLHttpRequest ออบเจกเป็นทนายฝันของนักพัฒนาเพราะคุณสามารถ:

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

ตัวอย่าง XMLHttpRequest

ขณะที่คุณใส่ตัวอักษรในช่องบอกข้อความด้านล่างนี้ XMLHttpRequest จะถูกส่งไปยังเซิร์ฟเวอร์และกลับมากับคำแนะนำชื่อบางอย่าง (จากเซิร์ฟเวอร์):

ตัวอย่าง

กรุณาใส่ชื่อในช่องบอกข้อความด้านล่าง:

ชื่อ: คำแนะนำ: ในบทวิชา AJAX ของบทความนี้มีการชี้แจงตัวอย่างดังกล่าว.

ส่ง XMLHttpRequest

ในตัวอย่างข้างต้นคือความหมายของตัวอย่างที่ใช้ JavaScript ภาษาสำหรับ XMLHttpRequest:

ตัวอย่าง

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // การกระทำที่มีความเหมาะสมที่จะทำเมื่อเอกสารพร้อมใช้งาน:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

ลองเองด้วยตัวเอง

บรรยายตัวอย่าง

บรรยายตัวอย่างที่แรกในตัวอย่างข้างต้นสร้าง: XMLHttpRequest ออบเจก:

var xhttp = new XMLHttpRequest();

onreadystatechange ฟังก์ชันที่กำหนดให้ทำงานทุกครั้งที่ค่าสถานะของ XMLHttpRequest ปรับเปลี่ยน:

xhttp.onreadystatechange = function()

เมื่อ readyState ค่าของ 4 และ status ขณะที่ค่าของคุณ 200 แล้วตอบรับจะเสร็จสิ้น:

if (this.readyState == 4 && this.status == 200)

responseText 属性以文本字符串形式返回服务器响应。

文本字符串可用于更新网页：

document.getElementById("demo").innerHTML = xhttp.responseText;

您将在本教程的 AJAX 章节中学到有关 XMLHttpRequest 对象的更多内容。