AJAX - XMLHttpRequest
ออบเจ็กต์ XMLHttpRequest ใช้เพื่อขอข้อมูลจากเซิร์ฟเวอร์
ส่งคำขอไปยังเซิร์ฟเวอร์
ในการส่งคำขอไปยังเซิร์ฟเวอร์ เราใช้เมธอด open() และ send() ของXMLHttpRequestอ็อบเจ็กต์:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
URL - ไฟล์บนเซิร์ฟเวอร์
พารามิเตอร์ url ของopen()เมธอด คือที่อยู่ของไฟล์บนเซิร์ฟเวอร์:
xhttp.open("GET", "ajax_test.asp", true);
ไฟล์อาจเป็นไฟล์ประเภทใดก็ได้ เช่น .txt และ .xml หรือไฟล์สคริปต์ของเซิร์ฟเวอร์ เช่น .asp และ .php (ซึ่งสามารถดำเนินการกับเซิร์ฟเวอร์ก่อนที่จะส่งการตอบกลับกลับ)
อะซิงโครนัส - จริงหรือเท็จ?
คำขอเซิร์ฟเวอร์ควรส่งแบบอะซิงโครนัส
พารามิเตอร์ async ของเมธอด open() ควรตั้งค่าเป็นจริง:
xhttp.open("GET", "ajax_test.asp", true);
ด้วยการส่งแบบอะซิงโครนัส JavaScript ไม่จำเป็นต้องรอการตอบกลับของเซิร์ฟเวอร์ แต่สามารถ:
- รันสคริปต์อื่น ๆ ขณะรอการตอบกลับของเซิร์ฟเวอร์
- จัดการกับการตอบสนองหลังจากการตอบสนองพร้อม
ค่าดีฟอลต์สำหรับพารามิเตอร์ async คือ async = true
คุณสามารถลบพารามิเตอร์ที่สามออกจากโค้ดของคุณได้อย่างปลอดภัย
ไม่แนะนำ XMLHttpRequest แบบซิงโครนัส (async = false) เนื่องจาก JavaScript จะหยุดดำเนินการจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดทำงาน
รับหรือโพสต์?
GETง่ายกว่าและเร็วกว่าPOSTและสามารถใช้ได้ในกรณีส่วนใหญ่
อย่างไรก็ตาม ใช้คำขอ POST เสมอเมื่อ:
- ไฟล์แคชไม่ใช่ตัวเลือก (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)
- การส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีข้อจำกัดด้านขนาด)
- การส่งอินพุตของผู้ใช้ (ซึ่งสามารถมีอักขระที่ไม่รู้จัก) POST นั้นแข็งแกร่งและปลอดภัยกว่า GET
รับคำขอ
GETคำของ่ายๆ :
ตัวอย่าง
xhttp.open("GET", "demo_get.asp");
xhttp.send();
ในตัวอย่างข้างต้น คุณอาจได้รับผลลัพธ์ที่แคชไว้ เพื่อหลีกเลี่ยงปัญหานี้ ให้เพิ่ม ID ที่ไม่ซ้ำให้กับ URL:
ตัวอย่าง
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
หากคุณต้องการส่งข้อมูลด้วยGETวิธีดังกล่าว ให้เพิ่มข้อมูลลงใน URL:
ตัวอย่าง
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
วิธีที่เซิร์ฟเวอร์ใช้อินพุตและวิธีที่เซิร์ฟเวอร์ตอบสนองต่อคำขอ ได้อธิบายไว้ในบทต่อๆ ไป
โพสต์คำขอ
POSTคำของ่ายๆ :
ตัวอย่าง
xhttp.open("POST", "demo_post.asp");
xhttp.send();
หากต้องการ POST ข้อมูล เช่น แบบฟอร์ม HTML ให้เพิ่มส่วนหัว HTTP ด้วยsetRequestHeader(). ระบุข้อมูลที่คุณต้องการส่งในsend()วิธีการ:
ตัวอย่าง
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
คำขอแบบซิงโครนัส
หากต้องการดำเนินการตามคำขอแบบซิงโครนัส ให้เปลี่ยนพารามิเตอร์ที่สามในopen()เมธอดเป็นfalse:
xhttp.open("GET", "ajax_info.txt", false);
บางครั้ง async = false ใช้สำหรับการทดสอบอย่างรวดเร็ว คุณจะพบคำขอแบบซิงโครนัสในโค้ด JavaScript ที่เก่ากว่า
เนื่องจากโค้ดจะรอจนกว่าเซิร์ฟเวอร์จะเสร็จสิ้น จึงไม่จำเป็นต้องมีonreadystatechange
ฟังก์ชัน:
ตัวอย่าง
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
ไม่แนะนำ XMLHttpRequest แบบซิงโครนัส (async = false) เนื่องจาก JavaScript จะหยุดดำเนินการจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดทำงาน
เครื่องมือสำหรับนักพัฒนาสมัยใหม่ควรเตือนเกี่ยวกับการใช้คำขอแบบซิงโครนัสและอาจมีข้อยกเว้น InvalidAccessError เมื่อเกิดขึ้น