กลับไปหน้าหลัก
Asynchronous JavaScript And XML หรือ AJAX
AJAX เป็นเทคนิควิธีการพัฒนาเว็บแอพพลิคเคชัน ให้มีความสามารถโต้ตอบกับผู้ใช้งานได้ดีขึ้น

ปกติแล้วหน้าเว็บเพจที่มีการเปลี่ยนแปลงข้อมูลอยู่เสมอๆ จะถูกสร้างด้วยโปรแกรมที่ฝั่งเซิร์ฟเวอร์ที่เรียกว่า CGI หรือ Server Side Script ซึ่งเมื่อต้องการดูข้อมูลที่เปลี่ยนไป ผู้ใช้ต้องทำการร้องขอหน้าเว็บเพจนั้นใหม่ หรือที่เรียกว่า รีโหลด (reload) แต่หากเว็บเพจนั้นใช้เทคนิค AJAX แล้วเว็บเพ็จนั้นไม่จำเป็นต้องรีโหลดหน้าใหม่ทั้งหน้า แต่จะทำการดึงข้อมูลเฉพาะส่วนที่เปลี่ยนแปลงเพื่อการแสดงผลเท่านั้น

AJAX เป็นเทคนิควิธีการที่ใช้ความสามารถของเทคโนยีหลายๆ อย่างมารวมกันอันได้แก่

XHTML และ CSS ใช้ในการแสดงผลลัพท์ข้อมูลให้ผู้ใช้ดู
Document Object Model และ จาวาสคริปต์ ใช้ในการจัดการกับข้อมูลและประมวลผลข้อมูล
XMLHttpRequest ใช้ในการร้องขอข้อมูลจาก เว็บเซิร์ฟเวอร์ และ
XML ใช้เป็นโครงสร้างของข้อมูล และเป็นสื่อในการรับส่งข้อมูล

ความเป็นมา
AJAX โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชักันอยู่แล้วดังที่กล่าวข้างต้น โดยวิวัฒนาการของ AJAX เริ่มต้นเมื่อปี ค.ศ. 2002 ไมโครซอฟท์ได้นำเสนอ XMLHttpRequest ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์ ในการร้องขอข้อมูล ซึ่งในขณะนั้นมีแต่เพียง Internet Explorer เท่านั้นที่สามารถใช้งานได้ ต่อมาเว็บบราวเซอร์อื่นๆเช่นจาก มอซิลล่า ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในบราวเซอร์ของตนด้วย จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บบราวเซอร์ต้องมี
หลักการทำงานของ AJAX
วิธีการทำงานของเว็บแอพพลิคเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอโดยใช้โปรโตคอล HTTP เพื่อติดต่อกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ(Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซอร์เวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous

แต่การทำงานของเว็บแอพลิคเคชันที่ใช้เทคนิค AJAX จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น
วิธีการเขียนโค้ด
1. สร้าง Request และ รอ Response และแสดงผลที่ได้
<script>
function submitForm() {
var req = null;
//create an instance
if(window.XMLHttpRequest){ // Object of the current windows
   req = new XMLHttpRequest(); // Firefox
}else if (window.ActiveXObject){ // ActiveX version
   req = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
// wait for the response
req.onreadystatechange = function()
{
  if(req.readyState == 4)
  {
     if(req.status == 200)
    {
      document.ajax.name.value="Hello:" + req.responseText;
    }
   else
     {
      document.ajax.name.value ="Error: returned status code " + req.status + " " + req.statusText;
     }
  }
};
req.open("POST", "hello.php", true); #สร้าง connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=tis-620"); # set Header
req.send("name="+document.ajax.name.value); // ส่ง ค่า name

</script>
<table><tr>
<FORM method="POST" name="ajax" action="">
<td>กรุณาใส่ชื่อ: <INPUT type="text" name="name" value="คุณเว็บมาสเตอร์">
</td>
<td><INPUT type="BUTTON" value="ตกลง" ONCLICK="submitForm()">
</td>
</FORM>
</tr></table>
ลองดูตัวอย่าง Demo ได้ที่นี่
ดาวน์โหลด source code ตัวอย่างได้ที่นี่
2. ต้องการให้ค่า ที่แสดง แสดงอยู่ใน Tag Div ตรงตำแหน่ง ที่เราต้องการ
<div id="data" >
&nbsp;
</div>
ใช้ document.getElementById("data").innerHTML =req.responseText;
ลองดูตัวอย่าง Demo ได้ที่นี่
3. ตัวอย่างง่าย ๆ จากการรับ Response ในรูปแบบ XML
แทน req.responseText ด้วย req.responseXML
คือ var doc = req.responseXML; // assign the Xml file to a var
var element = doc.getElementsByTagName('root').item(0); // read the first element with a dom's method
ลองดูตัวอย่าง Demo ได้ที่นี่
ดูไฟล์ XML ที่ใช้งาน ในตัวอย่าง

แหล่งข้อมูลอ้างอิง
วิกิพีเดีย