AJAX - XMLHttpRequest ออบเจก

XMLHttpRequest ออปเจกเป็นหลักฐานของ AJAX

  1. สร้าง XMLHttpRequest
  2. กำหนดฟังก์ชันคลับแบ็ค
  3. เปิดออปเจกท์ XMLHttpRequest
  4. ส่งคำขอไปยังเซิร์ฟเวอร์

XMLHttpRequest

ทุกบราวเซอร์ที่สมัยนี้เข้าถึง XMLHttpRequest.

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

สร้าง XMLHttpRequest

ทุกเบราว์เซอร์สมัยใหม่ (Chrome, Firefox, IE, Edge, Safari, Opera) มี XMLHttpRequest ภายในตัว XMLHttpRequest.

กรรมฐานสร้าง XMLHttpRequest

variable = new XMLHttpRequest();

กำหนดฟังก์ชันคลับแบ็ค

ฟังก์ชันคลับแบ็ค คือฟังก์ชันที่ถูกส่งผ่านเป็นอุปกรณ์เพื่อการเรียกใช้ฟังก์ชันอื่น

ในกรณีนี้ ฟังก์ชันคลับแบ็คควรมีรหัสที่ต้องการทำเมื่อตอบรับพร้อม

xhttp.onload = function() {
  // สิ่งที่คุณต้องการทำเมื่อตอบรับพร้อม
}

ส่งคำขอ

เพื่อส่งคำขอสู่เซิร์ฟเวอร์ คุณสามารถใช้ XMLHttpRequest ของ XMLHttpRequest open() และ send() วิธี:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ตัวอย่าง

// สร้าง XMLHttpRequest
const xhttp = new XMLHttpRequest();
// กำหนดฟังก์ชันคลับแบ็ค
xhttp.onload = function() {
  // คุณสามารถใช้ข้อมูลที่นี่
}
// ส่งคำขอ
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ทดสอบด้วยตัวเอง

การเข้าถึงหลายโดเมน (Cross Domain Access)

ด้วยเหตุผลความปลอดภัย โปรแกรมน่าทะเบียนสมัยใหม่ไม่อนุญาตให้เข้าถึงหลายโดเมน

นี้หมายความว่าหน้าเว็บและไฟล์ XML ที่มันพยายามโหลดต้องอยู่บนเซิร์ฟเวอร์เดียวกัน

ตัวอย่างบน CodeW3C.com โหลด XML ไฟล์ที่ตั้งอยู่ในโดเมน CodeW3C.com

ถ้าคุณต้องการใช้ตัวอย่างดังกล่าวบนหน้าเว็บหนึ่งของคุณ ไฟล์ XML ที่คุณโหลดต้องอยู่บนเซิร์ฟเวอร์ของคุณเช่นกัน

วิธี XMLHttpRequest

วิธี บรรณาธิการ
new XMLHttpRequest() สร้าง XMLHttpRequest ใหม่
abort() ยกเลิกคำขอปัจจุบัน
getAllResponseHeaders() กลับค่าของหัวข้อ
getResponseHeader() กลับค่าของหัวข้อที่เฉพาะ
open(method, url, async, user, psw)

กำหนดคำขอ

  • methodค่าที่เป็นไปได้: ประเภทคำขอ GET หรือ POST
  • urlค่าที่เป็นไปได้: ตำแหน่งไฟล์
  • asyncค่าที่เป็นไปได้: true (แบบอัตโนมัติ) หรือ false (แบบไม่อัตโนมัติ)
  • userค่าที่เป็นไปได้: ชื่อผู้ใช้
  • pswค่าที่เป็นไปได้: รหัสผ่าน
send() ส่งคำขอสู่เซิร์ฟเวอร์ สำหรับคำขอ GET
send(string) ส่งคำขอสู่เซิร์ฟเวอร์ สำหรับคำขอ POST
setRequestHeader() เพิ่มตัวเลือก/ค่าเพื่อใส่ในหัวข้อที่จะส่ง

ตัวแปรของ XMLHttpRequest

คุณสมบัติ บรรณาธิการ
onload กำหนดฟังก์ชันที่จะเรียกใช้เมื่อได้รับคำขอ (โหลด)
onreadystatechange กำหนดฟังก์ชันที่จะเรียกใช้เมื่อคุณสัญญาณ readyState มีการเปลี่ยนแปลง
readyState

บันทึกสถานะ XMLHttpRequest

  • 0: คำขอยังไม่ได้เริ่มต้น
  • 1: การเชื่อมต่อกับเซิร์ฟเวอร์ได้ทำเสร็จ
  • 2: คำขอได้รับ
  • 3: กำลังปฏิบัติงานคำขอ
  • 4: คำขอได้ทำงานเสร็จและคำตอบเสร็จพร้อม
responseText กลับค่าข้อมูลตอบสนองในรูปแบบตัวอักษร
responseXML กลับค่าข้อมูลตอบสนองในรูปแบบ XML
status

กลับค่าสถานะของคำขอ

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

สำหรับรายการเต็ม โปรดเข้าถึง คู่มือคำแปลภาษา Http
statusText กลับค่าข้อความสถานะ (เช่น "OK" หรือ "Not Found")

onload คุณสมบัติ

เมื่อใช้ XMLHttpRequest คุณสามารถกำหนดฟังก์ชันคอลบแบคเพื่อทำงานเมื่อได้รับคำตอบ

โปรดใช้คุณสมบัติ onload ของ XMLHttpRequest onload กำหนดฟังก์ชันนี้ในคุณสมบัติ

ตัวอย่าง

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

ทดสอบด้วยตัวเอง

ฟังก์ชันคอลบแบคหลายฟังก์ชัน

ถ้ามีงาน AJAX หลายงานในเว็บไซต์ ควรสร้างฟังก์ชันที่ทำ XMLHttpRequest และสร้างฟังก์ชันคอลบแบคสำหรับงาน AJAX แต่ละงาน

การเรียกใช้ฟังก์ชันควรมี URL และฟังก์ชันที่จะทำงานเมื่อคำตอบพร้อม

ตัวอย่าง

loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}
function myFunction1(xhttp) {
  // นี่คือการกระทำ
}
function myFunction2(xhttp) {
  // นี่คือการกระทำ
}

onreadystatechange คุณสมบัติ

readyState คุณสมบัติบันทึกสถานะ XMLHttpRequest

onreadystatechange คุณสมบัติกำหนดฟังก์ชันคอลบแบคที่จะทำงานเมื่อค่า readyState มีการเปลี่ยนแปลง

status คุณสมบัติและ statusText คุณสมบัติบันทึกสถานะของ XMLHttpRequest

คุณสมบัติ บรรณาธิการ
onreadystatechange กำหนดฟังก์ชันที่จะเรียกใช้เมื่อมีการเปลี่ยนแปลงในค่า readyState
readyState

บันทึกสถานะ XMLHttpRequest

  • 0: คำขอยังไม่ได้เริ่มต้น
  • 1: การเชื่อมต่อกับเซิร์ฟเวอร์ได้ทำเสร็จ
  • 2: คำขอได้รับ
  • 3: กำลังปฏิบัติงานคำขอ
  • 4: คำขอได้ทำงานเสร็จและคำตอบเสร็จพร้อม
status

กลับค่าสถานะของคำขอ

  • 200: "OK"
  • 403: "Forbidden"
  • 404: "Not Found"

สำหรับรายการเต็ม โปรดเข้าถึง คู่มือคำแปลภาษา Http
statusText statusText

ส่งกลับข้อความสถานะ (เช่น "OK" หรือ "Not Found")

เมื่อ readyState มีการเปลี่ยนแปลงเป็นครั้งที่เจ็ดแล้ว ฟังก์ชัน onreadystatechange จะถูกเรียก 4 และ status คือ 200 เมื่อเหตุการณ์เรียกแบบทดสอบเสร็จแล้ว:

ตัวอย่าง

function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}

ทดสอบด้วยตัวเอง

เหตุการณ์ onreadystatechange ถูกกระตุ้นสี่ครั้ง (1-4) และแต่ละครั้งมีการเปลี่ยนแปลง readyState ซึ่งคือการเปลี่ยนแปลงเพียงครั้งเดียว