onreadystatechange Event
onreadystatechange event
เมื่อส่งคำขอไปแม่ข่าย ต้องมีการทำบางการกระทำบนฐานของการตอบสนอง
onreadystatechange event ได้รับการสับเปลี่ยนทุกครั้งเมื่อคุณสมบัติ readyState เปลี่ยนแปลง
คุณสมบัติ readyState เก็บสถานะของ XMLHttpRequest
อ๊อบเจค XMLHttpRequest มีคุณสมบัติสำคัญ 3 คุณสมบัติ
คุณสมบัติ |
คำอธิบาย |
onreadystatechange |
เก็บฟังก์ชัน (หรือชื่อฟังก์ชัน) ที่จะเรียกอย่างอัตโนมัติทุกครั้งเมื่อคุณสมบัติ readyState เปลี่ยนแปลง |
readyState |
เก็บสถานะของ XMLHttpRequest จาก 0 to 4:
0: คำขอยังไม่ได้เริ่มต้น
1: ก่อตั้งการเชื่อมต่อแม่ข่าย
2: คำขอได้รับแล้ว
3: ประมวลผลคำขอ
4: คำขอสิ้นสุดและการตอบสนองพร้อมแล้ว |
status |
200: OK
404: ไม่พบเพจ |
ใน onreadystatechange event เป็นการระบุถึงสิ่งที่จะเกิดขึ้น เมื่อการตอบสนองจากแม่ข่ายพร้อม ที่จะประมวลผล
เมื่อ readyState เป็น 4 และ status เป็น 200 หมายถึงการตอบสนองพร้อมแล้ว
ตัวอย่าง
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
หมายเหตุ onreadystatechange event มีการเปลี่ยน 4 ครั้ง หนึ่งครั้งต่อการเปลี่ยน readyState แต่ละครั้ง
การใช้ฟังก์ชัน Callback
ฟังก์ชัน callback เป็นฟังก์ชันที่ส่งผ่านเป็นพารามิเตอร์ไปยังอีกฟังก์ชัน
ถ้ามีงาน AJAX มากกว่าหนึ่งงานบนเว็บไซต์ ควรสร้างฟังก์ชันมาตรฐาน 1 ฟังก์ชันสำหรับการสร้างอ๊อบเจค XMLHttpRequest และเรียกฟังก์ชันนี้สำหรับแต่ละงานของ AJAX
ฟังก์ชันที่เรียกสามารถเก็บ URL และสิ่งที่จะทำบน onreadystatechange (ซึ่งบางครั้ง มีความแตกต่างในการเรียกแต่ละครั้ง)
ตัวอย่าง
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
});
}
}
|
