AJAX

เพิ่งจะได้มีเวลามานั่งลองเล่น AJAX หรือ Asynchronous JavaScript and XML โดย concept แล้วง่ายดีไม่ได้ซับซ้อนอะไร แต่เอาไปทำอะไรได้เยอะมาก หลักๆก็คือการที่สามารถใช้ JavaScript ติดต่อกับ server-side ให้ทำอะไรก็ได้เช่น query database แล้วรับข้อมูลเอามาใช้โดยไม่ต้อง reload page นั้นใหม่ โดยข้อมูลที่ได้มาก็เอาไปเปลี่ยนหรือเอาไปแสดงเพิ่มบนหน้าที่แสดงอยู่แล้วโดยการ refer ถึง element ที่ต้องการเปลี่ยนด้วย id

key component ที่เพิ่มมาก็คือ XMLHttpRequest object ซึ่งต้องสร้างขึ้นมาโดย(ในกรณี firefox)

xmlHttp=new XMLHttpRequest();

และ XMLHttpRequest object ที่สร้างขึ้นมานี้ก็จะมี property หลักๆ 3 อันด้วยกันที่นำมาใช้คือ .onreadystatechange ซึ่งจะต้อง set ให้เท่ากับ function ที่จะ run เมื่อได้รับ response จาก server กลับมาโดย function ที่ set นี้ก็จะ run ทุกครั้งที่มีการเปลี่ยน readyState ส่วน property อันที่สองก็คือ readyState นั่นเองซึ่งจะมีอยู่ 5 state ด้วยกัน

0=not initialized
1=set up
2=sent
3=in process
4=complete

ดังนั้นส่วนใหญ่ function ใน onreadystatechange เราก็ต้อง check ว่า readyState เป็น complete หรือยังก่อนที่จะเอาข้อมูลไปใช้ property อันที่สามก็คือ responseText ซึ่งจะเท่ากับ response ที่ส่งกลับมาจาก server ตัวอย่าง code ข้างล่างน่าจะทำให้ชัดเจนขึ้น

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("txtHint").innerHTML=xmlHttp.responseText
}
}

ส่วน method ในการส่ง request ไปที่ server ก็คือ open กับ send โดย open ก็จะมี parameter คือ GET/POST, url ที่จะเรียกไปที่ server และ "true" เพื่อให้ handle แบบ asynchronous

xmlHttp.open("GET",url,true)
xmlHttp.send(null)