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”) |