บทความนี้แปลมาจาก http://www.w3schools.com/Ajax/ajax_xmlhttprequest.asp

AJAX - More About the XMLHttpRequest Object

ก่อนที่จะส่งข้อมูลเข้าไปยังเซิฟเวอร์ ต้องขออธิบาย 3 คุณสมบัติสำคัญของ XMLHttpRequest ก่อนนะครับ

1. The onreadystatechange Property (คุณสมบัติที่มีชื่อว่า onreadystatechange )

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

ตัวคุณสมบัติ onreadystatechange นั้นได้เก็บฟังก์ชั่นที่ใช้ในกระบวนการโต้ตอบจากเซิฟเวอร์

ฟังก์ชั่นข้างล่างนี้ถูกประกาศไว้ว่างเปล่า และยังเป็นตัว onreadystatechange ในขณะเดียวกันด้วย

———————

xmlHttp.onreadystatechange=function()
{
// We are going to write some code here
}

———————

2. The readyState Property ( readyState )

คุณสมบัติตัว readyState นี้มีไว้เก็บค่าสถานะ ที่ถูกตอบกลับจากเซิฟเวอร์ แต่ละครั้งสถานะจะเปลี่ยนแปลงไปตลอด

ขณะที่ฟังก์ชัน onreadystatechange ทำงานอยู่

ข้างล่างนี้คือค่าที่เป็นไปได้ ของ readyState

——————–

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

——————–

เราจะเพิ่ม เงื่อนไข IF เข้าไปในโค้ดเดิม ดังข้างล่างนี้ เพื่อจะได้รู้ว่าเมื่อเราร้องขอไปยังเซิฟเวอร์ สามารถสำเร็จได้

———————-

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
  {
  // Get the data from the server's response
  }
}

———————-

3.The responseText Property ( คุณสมบัติที่ชื่อว่า responseText )

ข้อมูลที่ถูกส่งกลับมาจากเซิฟเวอร์นั้น จะถูกรับโดยคุณสมบัติ responseText นั่นเอง

ท่านจะจำได้ว่า จากโค้ดหน้ากรอกข้อมูล เรามี Textfield อันนึงชื่อว่า time และเรามีจุดมุ่งหมาย

ให้ช่อง time นั้นถูกกรอกเอง โดยการทำงานของ ajax ดังนั้นจากโค้ดข้างบน เราต้องใส่ตัวแปร time (เป็นชื่อ)

เพื่อให้สอดคล้องกับจุดมุ่งหมาย โดยตัวแปร time จะได้รับค่าจาก responseText นั่นเอง

——————–

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
  {
  document.myForm.time.value=xmlHttp.responseText;

  }
}

——————–

สรุปในบทนี้เราได้เรียนเรื่องอะไรบ้าง

————————

1. XMLHttpRequest Object มีคุณสมบัติสำคัญสามตัว

2. คุณสมบัติ onreadystatechange เป็นฟังก์ชั่นโต้ตอบกับเซิฟเวอร์

3. คุณสมบัติ readyState เป็นฟังก์ชั่นบอกให้ทราบถึงสถานะที่เปลี่ยนไปจากเซิฟเวอร์

4. คุณสมบัติ responseText เป็นตัวที่รับข้อมูลจากเซิฟเวอร์

————————

ในบทต่อไปเราจะเรียนรู้ว่า จะถามถึง(ask) ข้อมูลบางอันจาก เซิฟเวอร์อย่างไร.

ถ้าแปลไม่แหล่มขออภัยด้วย