1.AJAX Request
จากเนื้อหาของ AJAX XMLHttpRequest กล่าวว่า XMLHttpRequest คือวัถตุที่ใช้ในการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์โดยทำงานอยู่เบื้องหลัง ซึ่งในการแลกเปลี่ยนข้อมูลนั้นจะต้องส่ง request ไปด้วยโดยใชเมธอด open() และ send() ของวัตถุ XMLHttpRequest
ไวยากรณ์
// สร้างวัตถุ XMLHttpRequest var xhttp = new XMLHttpRequest(); xhttp.open(method, url, async); xhttp.send();
อธิบายพารามิเตอร์บรรทัดที่ 4
- method เป็นได้ทั้ง GET และ POST
- url ระบุที่อยู่ของไฟล์ปลายทาง ตัวอย่างเช่น “test.php”
- async สามารถเป็นได้ทั้ง true หรือ false (แนะนำให้ใช้ true เพราะถ้าหากเกิดความผิดพลาดขึ้นจะช่วยให้โค้ดส่วนอื่นสามารถทำงานได้ต่อไป)
ตัวอย่างการใช้ GET Request
- 1.ทั่วไป
var xhttp = new XMLHttpRequest(); xhttp.open("GET", "test.php", true); xhttp.send();
- 2.แบบมีการส่งผ่านข้อมูล โดยกำหนดพารามิเตอร์ชื่อ name มีค่าเป็น pawin
var xhttp = new XMLHttpRequest(); xhttp.open("GET", "test.php?name=pawin", true); xhttp.send();
ตัวอย่างการใช้ POST Request
- 1.ทั่วไป
var xhttp = new XMLHttpRequest(); xhttp.open("POST", "test.php", true); xhttp.send();
- 2.การส่งข้อมูลแบบฟอร์ม HTML สามารถทำได้โดยเพิ่มเมธอด setRequestHeader() และระบุข้อมูลที่ต้องการส่ง
var xhttp = new XMLHttpRequest(); xhttp.open("POST", "test.php", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("name=pawin&gender=male");
ตารางเปรียบเทียบ GET และ POST
GET | POST |
ใช้งานง่าย และรวดเร็วกว่า | ช้ากว่านิดหน่อย |
จำกัดข้อมูลในการส่งแต่ละครั้ง |
ไม่จำกัดข้อมูลในการส่งแต่ละครั้ง |
ปลอดภัยน้อยกว่า POST | ปลอดภัยมากกว่า GET |
2.AJAX Response
ก่อนอื่นมารู้จักกับคุณสมบัติ onreadystatechange เป็นคุณสมบัติที่ใช้ในการดำเนินการเมื่อ readyState เปลี่ยนไปดังตัวอย่างต่อไปนี้
ตัวอย่างที่ 1
<html> <body> <div id="demo"> <h2>The XMLHttpRequest Object</h2> <button type="button" onclick="loadDoc()">Change Content</button> </div> <script> function loadDoc() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "test.php", true); xhttp.send(); } </script> </body> </html>
ไฟล์ที่ 1 test_ajaxres.php
จากไฟล์ที่ 1 สามารถอธิบายได้ว่า ฟังก์ชัน loadDoc() ภายในมีกระบวนการทำงานดังนี้
- สร้างวัตถุ XMLHttpRequest
- ส่ง request ไปยังไฟล์ test.php
- ส่งผลลัพธ์ไปอัพเดทที่แท็กไอดีเท่ากับ demo
ตารางคุณสมบัติ XMLHttpRequest
Property | คำอธิบาย |
---|---|
onreadystatechange | กำหนดให้ฟังก์ชันเรียกใช้งานเมื่อค่าสถานะของ readyState เปลี่ยนไป |
readyState | ค่าสถานะประกอบไปด้วย 0: ยังไม่มีคำขอหรือไม่มีการทำอะไรทั้งนั้น 1: สร้างการเชื่อมต่อกับเซิร์ฟเวอร์แล้ว 2: ได้รับคำขอแล้ว 3: ประมวลผลคำขอ 4: พร้อมทำงาน |
responseText | ส่งคืนค่าข้อมูลในรูปแบบของ string |
responseXML | ส่งคืนค่าข้อมูลในรูปแบบของข้อมูล XML |
status | คืนค่าหมายเลขสถานะคำขอ 200: “OK” 403: “Forbidden” 404: “Not Found” |
statusText | การคืนค่า (“OK” หรือ “Not Found”) |