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 ที่ใช้งาน ในตัวอย่าง

แหล่งข้อมูลอ้างอิง

วิกิพีเดีย