หน้าแรก>บทช่วยสอนการเขียนโปรแกรมเครือข่าย>บทช่วยสอนของอาแจ็กซ์

AJAX - เหตุการณ์ onreadystatechange

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-01-03 10:24:01

เหตุการณ์พร้อมระบุการเปลี่ยนแปลง

เมื่อคำขอถูกส่งไปยังเซิร์ฟเวอร์ เราจำเป็นต้องดำเนินการบางอย่างตามการตอบสนอง

เมื่อใดก็ตามที่ readyState เปลี่ยนแปลง เหตุการณ์ onreadystatechange จะถูกทริกเกอร์

แอตทริบิวต์ readyState เก็บข้อมูลสถานะของ XMLHttpRequest

ต่อไปนี้เป็นคุณสมบัติที่สำคัญสามประการของวัตถุ XMLHttpRequest:

คุณสมบัติ อธิบาย
พร้อมสถานะการเปลี่ยนแปลง เก็บฟังก์ชัน (หรือชื่อฟังก์ชัน) ที่จะถูกเรียกเมื่อใดก็ตามที่คุณสมบัติ readyState เปลี่ยนแปลง
พร้อมสถานะ

มีสถานะของ XMLHttpRequest แล้ว เปลี่ยนจาก 0 เป็น 4

0: คำขอไม่ได้เตรียมใช้งาน

1: สร้างการเชื่อมต่อเซิร์ฟเวอร์แล้ว

2: ได้รับคำขอแล้ว

3: คำขอกำลังได้รับการประมวลผล

4: คำขอเสร็จสมบูรณ์และการตอบกลับพร้อมแล้ว

สถานะ 200: "ตกลง" 404: ไม่พบเพจ

ในเหตุการณ์ onreadystatechange เราระบุงานที่จะดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อมที่จะประมวลผล

เมื่อ readyState เท่ากับ 4 และสถานะเป็น 200 การตอบสนองจะพร้อม:

ตัวอย่าง

xmlhttp.onreadystatechange = ฟังก์ชัน ( ) - ถ้า ( xmlhttp . readyState == 4 && xmlhttp . สถานะ == 200 ) - เอกสาร . getElementById ( " myDiv " ) innerHTML = xmlhttp ;​​​​ -

หมายเหตุ: เหตุการณ์ onreadystatechange จะถูกทริกเกอร์ 4 ครั้ง (0 - 4) ตามลำดับ: 0-1, 1-2, 2-3, 3-4 ซึ่งสอดคล้องกับการเปลี่ยนแปลงของ readyState แต่ละครั้ง

ใช้ฟังก์ชันโทรกลับ

ฟังก์ชันการโทรกลับเป็นฟังก์ชันที่ถูกส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชันอื่น

หากคุณมีงาน AJAX หลายงานบนไซต์ของคุณ คุณควรเขียนฟังก์ชัน มาตรฐาน สำหรับการสร้างออบเจ็กต์ XMLHttpRequest และเรียกใช้ฟังก์ชันนั้นสำหรับงาน AJAX แต่ละรายการ

การเรียกใช้ฟังก์ชันควรมี URL และงานที่จะดำเนินการเมื่อมีเหตุการณ์ onreadystatechange เกิดขึ้น (ซึ่งอาจแตกต่างกันไปสำหรับการโทรแต่ละครั้ง):

ตัวอย่าง

การทำงาน ฟังก์ชั่นของฉัน ( ) - loadXMLDoc ( " /try/ajax/ajax_info.txt " , ฟังก์ชัน ( ) - ถ้า ( xmlhttp . readyState == 4 && xmlhttp . สถานะ == 200 ) - เอกสาร . getElementById ( " myDiv " ) innerHTML = xmlhttp ;​​​​ } ) ;​
บทความที่เกี่ยวข้อง