การเขียนโปรแกรมจัดการหน้าจอ Web ด้วย Ajax

การเขียนโปรแกรมจัดการหน้าจอ Web ด้วย Ajax



          Ajax เป็นเทคโนโลยีที่ใช้สำหรับการเขียนโปรแกรมบนWebpage ซึ่งทำให้เวลามีการเปลี่ยนแปลงข้อมูลส่วนใดส่วนหนึ่งบน Webpage แล้วทำให้ Browser มีการดึงข้อมูลมาแสดงผลบนหน้าจอเฉพาะส่วนที่มีการเปลี่ยนแปลงเท่านั้นไม่ต้องดึงข้อมูล(Reload)มาใหม่ทั้งหน้าจอ โดยมีการทำงานร่วมกันระหว่าง JavaScript และ Xml


เทคโนโลยี Ajax มีการทำงานร่วมกันของ 5 องค์ประกอบคือ  XHTML CSS Xml JavaScript และ DOM ซึ่งแต่ละองค์ประกอบมีหน้าที่การทำงานดังนี้

XHTML และ CSS ใช้ในการแสดงผลหน้าเว็บตามปกติ

DOM (Document object Model)ใช้กำหนดตำแหน่งใน Webpage ที่เราต้องกเปลี่ยนแปลงข้อมูลโดยไม่ต้อง Reload เช่น ระบุว่าให้แก้ข้อมูลที่ส่วนไหน

XML ใช้ในการเก็บข้อมูลดิบ

XMLHTTPRequest ใช้ในการเรียกข้อมูลแบบไม่ต้อง Reload ใหม่ทั้งหน้า
ข้อดีของ Ajax

·    ตอบสนองต่อผู้ใช้ได้อย่างรวดเร็วเนื่องจากการ update แบบบางส่วน

·    ผู้ใช้ไม่ต้องหยุดรอคอยการประมวลของ server เนื่องจากการติดต่อแบบ Asynchronous

·    รองรับกับบราวเซอร์หลักๆที่สามารถใช้ JavaScript? ได้

·    ทำให้การประมวลผลที่ Server มีความรวดเร็วขึ้นเนื่องจากการประมวลผลที่ Server ลดลง

·    ไม่ต้องทำการติดตั้งPlug in

·    ไม่ยึดติดกับ Platform หรือภาษาที่ใช้ในการเขียนโปรแกรม

·    เป็นเทคโนโลยีใหม่ที่ไม่ได้เป็นของนักพัฒนาคนใดคนหนึ่ง นั่นคือทุกคนมีสิทธิ์เข้ามาพัฒนาโปรแกรมตัวนี้

ตัวอย่าง Ajax ดึงข้อมูลจาก text ไฟล์มาแสดงด้วย ajax

<script language="javascript" src="ajax.ja"></script>

<script language="javascript">

function doajax(){

                var ajax1=createAjax();

                ajax1.onreadystatechange=function(){

                                if(ajax1.readyState==4 && ajax1.status==200){

                                                var repl=document.getElementById('myplace');

                                                repl.innerHTML=ajax1.responseText;

                                }else{

                                                return false;

                                }

                }

                ajax1.open("GET","data.txt",true);

                ajax1.send(null);

}

</script>

<input type="button" name="Button" value="do ajax" onclick="doajax()" />

<div id="myplace">

</div>

ตัวอย่าง Ajax ที่ใช้ในการเรียก Procedure หรือ Function

ajax.commandwait(1,2,3);

เป็น ajax คำสั่งที่มีการทำงานเป็นตัวเรียกใช้งาน Procedure หรือ function ใน package และจะรอให้คำสั่งนี้ทำงานเสร็จก่อนแต่ถ้าไม่มี wait user จะสามารถกดปุ่มได้และใส่ค่าได้ โดยคำสั่งนี้จะมีการรับ parameter 3 อย่างด้วยกันคือ

1.ชื่อ function หรือ Procedure ที่ต้องการใช้งาน

2.Query String ที่ใช้ใน function หรือ Procedure ที่เราเรียกใช้

3.ชื่อ function ที่รับค่ากลับจาก Procedure หรือ package