AJAX - ส่งคำขอไปยังเซิร์ฟเวอร์
ออบเจ็กต์ 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) |
รับหรือโพสต์?
GET ง่ายกว่าและเร็วกว่า POST และสามารถใช้ได้ในกรณีส่วนใหญ่
อย่างไรก็ตาม ใช้คำขอ POST เสมอเมื่อ:
- ไฟล์แคชไม่ใช่ตัวเลือก (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)
- การส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีข้อจำกัดด้านขนาด)
- การส่งอินพุตของผู้ใช้ (ซึ่งสามารถมีอักขระที่ไม่รู้จัก) POST นั้นแข็งแกร่งและปลอดภัยกว่า GET
รับคำขอ
คำขอ GET อย่างง่าย:
ตัวอย่าง
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
ในตัวอย่างข้างต้น คุณอาจได้รับผลลัพธ์ที่แคชไว้ เพื่อหลีกเลี่ยงปัญหานี้ ให้เพิ่ม ID ที่ไม่ซ้ำให้กับ URL:
ตัวอย่าง
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
หากคุณต้องการส่งข้อมูลด้วยวิธี GET ให้เพิ่มข้อมูลลงใน URL:
ตัวอย่าง
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
โพสต์คำขอ
คำขอ POST ง่ายๆ:
ตัวอย่าง
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
หากต้องการ POST ข้อมูล เช่น แบบฟอร์ม HTML ให้เพิ่มส่วนหัว HTTP ด้วย setRequestHeader() ระบุข้อมูลที่คุณต้องการส่งในเมธอด send()
ตัวอย่าง
xhttp.open("POST", "demo_post2.asp", true);
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 |
URL - ไฟล์บนเซิร์ฟเวอร์
พารามิเตอร์ url ของเมธอด open() คือที่อยู่ของไฟล์บนเซิร์ฟเวอร์:
xhttp.open("GET", "ajax_test.asp", true);
ไฟล์อาจเป็นไฟล์ประเภทใดก็ได้ เช่น .txt และ .xml หรือไฟล์สคริปต์ของเซิร์ฟเวอร์ เช่น .asp และ .php (ซึ่งสามารถดำเนินการกับเซิร์ฟเวอร์ก่อนที่จะส่งการตอบกลับกลับ)
อะซิงโครนัส - จริงหรือเท็จ?
คำขอเซิร์ฟเวอร์ควรส่งแบบอะซิงโครนัส
พารามิเตอร์ async ของเมธอด open() ควรตั้งค่าเป็นจริง:
xhttp.open("GET", "ajax_test.asp", true);
ด้วยการส่งแบบอะซิงโครนัส JavaScript ไม่จำเป็นต้องรอการตอบกลับของเซิร์ฟเวอร์ แต่สามารถ:
- รันสคริปต์อื่น ๆ ขณะรอการตอบกลับของเซิร์ฟเวอร์
- จัดการกับการตอบสนองหลังจากการตอบสนองพร้อม
ทรัพย์สิน onreadystatechange
ด้วยอ็อบเจ็กต์ XMLHttpRequest คุณสามารถกำหนดฟังก์ชันที่จะดำเนินการเมื่อคำขอได้รับคำตอบ
ฟังก์ชั่นถูกกำหนดใน คุณสมบัติ onreadystatechangeของอ็อบเจ็กต์ XMLHttpResponse:
ตัวอย่าง
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
ไฟล์ "ajax_info.txt" ที่ใช้ในตัวอย่างข้างต้น เป็นไฟล์ข้อความธรรมดาและมีลักษณะดังนี้:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ onreadystatechange ในบทต่อไป
คำขอแบบซิงโครนัส
หากต้องการดำเนินการตามคำขอแบบซิงโครนัส ให้เปลี่ยนพารามิเตอร์ที่สามในเมธอด open() เป็นเท็จ:
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 จะหยุดดำเนินการจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อม หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดทำงาน
XMLHttpRequest แบบซิงโครนัสอยู่ระหว่างการนำออกจากมาตรฐานเว็บ แต่กระบวนการนี้อาจใช้เวลาหลายปี
เครื่องมือสำหรับนักพัฒนาสมัยใหม่ควรเตือนเกี่ยวกับการใช้คำขอแบบซิงโครนัสและอาจมีข้อยกเว้น InvalidAccessError เมื่อเกิดขึ้น