วัตถุ XMLHttpRequest ใช้เพื่อแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์
ในการส่งคำขอไปยังเซิร์ฟเวอร์ เราใช้เมธอด open() และ send() ของวัตถุ XMLHttpRequest:
xmlhttp.open("GET", "ajax_info.txt",true);xmlhttp.send();| วิธี | อธิบาย |
|---|---|
| เปิด ( วิธีการ , url , async ) | ระบุประเภทของคำขอ URL และจะจัดการคำขอแบบอะซิงโครนัสหรือไม่ วิธีการ : ประเภทของคำขอ GET หรือ POST url : ตำแหน่งของไฟล์บนเซิร์ฟเวอร์ async : จริง (อะซิงโครนัส) หรือเท็จ (ซิงโครนัส) |
| ส่ง ( สตริง ) | ส่งคำขอไปยังเซิร์ฟเวอร์ string : ใช้สำหรับคำขอ POST เท่านั้น |
GET นั้นง่ายกว่าและเร็วกว่า POST และใช้ได้ในสถานการณ์ส่วนใหญ่
อย่างไรก็ตาม ใช้คำขอ POST ในสถานการณ์ต่อไปนี้:
ไม่สามารถใช้ไฟล์แคชได้ (อัปเดตไฟล์หรือฐานข้อมูลบนเซิร์ฟเวอร์)
ส่งข้อมูลจำนวนมากไปยังเซิร์ฟเวอร์ (POST ไม่มีการจำกัดขนาดข้อมูล)
POST มีความเสถียรและเชื่อถือได้มากกว่า GET เมื่อส่งข้อมูลผู้ใช้ที่มีอักขระที่ไม่รู้จัก
คำขอ GET ง่ายๆ:
ในตัวอย่างข้างต้น คุณอาจได้รับผลลัพธ์ที่แคชไว้
เพื่อหลีกเลี่ยงปัญหานี้ ให้เพิ่มรหัสเฉพาะให้กับ URL:
หากคุณต้องการส่งข้อมูลด้วยวิธี GET ให้เพิ่มข้อมูลลงใน URL:
คำขอ POST ง่ายๆ:
หากคุณต้องการ POST ข้อมูลเช่นแบบฟอร์ม HTML ให้ใช้ setRequestHeader() เพื่อเพิ่มส่วนหัว HTTP จากนั้นระบุข้อมูลที่คุณต้องการส่งในเมธอด send():
| วิธี | อธิบาย |
|---|---|
| setRequestHeader( ส่วนหัว, ค่า ) | เพิ่มส่วนหัว HTTP ให้กับคำขอ header : ระบุชื่อของส่วนหัว value : ระบุค่าของส่วนหัว |
พารามิเตอร์ url ของ open() วิธีการคือที่อยู่ของไฟล์บนเซิร์ฟเวอร์:
xmlhttp.open("GET", "ajax_test.html", จริง);ไฟล์นี้สามารถเป็นไฟล์ประเภทใดก็ได้ เช่น .txt และ .xml หรือไฟล์สคริปต์เซิร์ฟเวอร์ เช่น .asp และ .php (ซึ่งสามารถทำงานบนเซิร์ฟเวอร์ก่อนที่จะส่งการตอบกลับกลับ)
AJAX หมายถึง JavaScript และ XML แบบอะซิงโครนัส
ถ้าจะใช้ออบเจ็กต์ XMLHttpRequest สำหรับ AJAX จะต้องตั้งค่าพารามิเตอร์ async ของเมธอด open() ให้เป็นจริง:
xmlhttp.open("GET", "ajax_test.html", จริง);สำหรับนักพัฒนาเว็บ การส่งคำขอแบบอะซิงโครนัสถือเป็นการปรับปรุงครั้งใหญ่ งานหลายอย่างที่ทำบนเซิร์ฟเวอร์ค่อนข้างใช้เวลานาน ก่อน AJAX สิ่งนี้อาจทำให้แอปพลิเคชันหยุดทำงานหรือหยุดทำงาน
ด้วย AJAX JavaScript ไม่จำเป็นต้องรอการตอบกลับจากเซิร์ฟเวอร์ แต่แทน:
รันสคริปต์อื่นในขณะที่รอการตอบสนองของเซิร์ฟเวอร์
ประมวลผลการตอบสนองเมื่อพร้อม
เมื่อใช้ async=true ให้ระบุฟังก์ชันที่จะดำเนินการเพื่อตอบสนองต่อสถานะพร้อมในเหตุการณ์ onreadystatechange:
คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ onreadystatechange ในบทต่อๆ ไป
หากคุณต้องการใช้ async=false ให้เปลี่ยนพารามิเตอร์ตัวที่สามในเมธอด open() เป็น false:
xmlhttp.open("GET", "test1.txt",false);เราไม่แนะนำให้ใช้ async=false แต่สำหรับคำขอเล็กๆ น้อยๆ ก็สามารถทำได้
โปรดจำไว้ว่า JavaScript จะรอจนกว่าการตอบสนองของเซิร์ฟเวอร์จะพร้อมก่อนดำเนินการต่อ หากเซิร์ฟเวอร์ไม่ว่างหรือช้า แอปพลิเคชันจะหยุดทำงานหรือหยุดทำงาน
หมายเหตุ: เมื่อคุณใช้ async=false อย่าเขียนฟังก์ชัน onreadystatechange - เพียงใส่โค้ดไว้หลังคำสั่ง send():