|
เริ่มต้นทำความรู้จักกับ Ajax Technology
|
| เขียนโดย
Poj
,
08-03-2006
|
|
ผมเชื่อว่าจะเป็นเทคโนโลยีที่ใช้กันอย่างแพร่หลายบนเว็บในอนาคต
|
Ajax (Asynchronous Javascript and XML) คือเทคโนโลยีที่รวมเอาความสามารถของ Javascript , XML, CSS และ XHTML เอาไว้ด้วยกัน
Ajax เป็นการประยุกต์เอาเทคโนโลยีเก่ามาผสมผสานจนได้เทคโนโลยีใหม่ที่น่าศึกษาและนำมาใช้งาน แต่ก่อนอื่นมาทำความเข้าใจหลักการทำงานของ Web กันก่อน ตามปกติเมื่อเราเปิด Web Browser และพิมพ์ URL ของเว็บเพจที่ต้องการ เราจะเรียกผู้ใช้ว่า client-side browser ก็จะส่งค่าไปยัง server
เพื่อขอเปิดหน้า url ที่เราพิมพ์ลงไป เช่น www.google.co.th และเมื่อทาง server ได้รับค่าที่ส่งมาก็จะส่งหน้าเว็บเพจกลับมาให้ โดยเราจะเรียก
server ว่าผู้ให้บริการหรือ server side เมื่อฝั่งผู้ใช้ได้รับข้อมูลจกา server ที่ส่งมาให้ browser ก็จะนำข้อมูลนั้นขึ้นหน้าจอ จากนั้นเมื่อเราคลิกเว็บหน้า
อื่นๆก็จะเริ่มขั้นตอนทั้งหมดใหม่อีกครั้ง ตัวอย่างเพื่อความเข้าใจจากโปรแกรมเครื่องคิดเลขแบบง่ายๆครับ เมื่อผู้ใช้ (client)ใส่ตัวเลขในค่าที่ 1 และ 2 แล้ว
คลิกเลือกว่าจะบวก ลบ คูณ หรือ หาร เพื่อหาค่าที่ต้องการข้อมูลนี้ก็จะส่งไปยัง server เพื่อเอาค่าทั้งสองที่ผู้ใช้ป้อนไปหาค่าตามที่เลือกไว้ไปจัดการ จะเห็นว่าเมื่อคลิกเลือก บวก ลบ คูณ หรือ หาร server ก็จะเอาไฟล์ action="ไฟล์ที่จะส่งค่าไป" มาจัดการคำนวณค่าออกมา จากนั้นก็จะส่งหน้า webpage หน้าใหม่
ที่แสดงผลที่คำนวณตามเงื่อนไขออกมา วิธีการนี้หน้าจอ webpage จะต้องมีการ refresh ใหม่ และการรับผลที่ส่งกลับมาจะเป็นการส่งมาแบบทั้ง
หน้า webpage แบบเต็มๆ ทำให้กิน bandwidth มาก (ดูตัวอย่างได้ที่นี่) 
แล้ว Ajax ดีกว่าตรงไหน การทำงานของ Ajax นั้นจะส่งเฉพาะข้อมูลที่ต้องการไปยัง server และส่งกลับมาเฉพาะข้อมูลที่ต้องการไม่ใช่การส่งทั้งหน้า
webpage ใหม่ โดย Ajax อาศัย object ที่ชื่อ XMLHTTP เมื่อผู้ใช้เปิดหน้าเว็บแล้วมีการส่งข้อมูล Ajax ก็จะให้ XMLHTTP ส่งค่าไปให้ server
แล้วให้ server จัดการข้อมูลนั้นตามเงื่อนไขแล้วส่งข้อมูลนั้นกลับมาในรูปแบบ XML ซึ่งก็จะใช้ javascript เป็นตัวจัดการข้อมูลที่ได้รับให้แสดงผลได้อย่าง
ถูกต้องในหน้าเว็บเพจเดิม ตัวอย่างโปรแกรมเครื่องคิดเลขอย่างง่ายที่อาศัยการทำงานของ Ajax ดูได้ (ที่นี่)ข้อดีของ Ajax มีมากมายครับ ทั้งการแสดงผลลัพธ์ที่เร็วกว่า ไม่ต้อง refresh หน้าจอใหม่ทุกครั้งอีกทั้งข้อมูลที่ส่งไป-กลับไม่ได้ส่งไปทั้งหน้า
ทำให้กิน bandwidth น้อยกว่า ตัวอย่างเว็บที่ใช้ Ajax ก็เช่น Google Mail
โค้ดของโปรแกรมเครื่องคิดเลขอย่างง่ายที่อาศัยการทำงานของ Ajax ไฟล์ชื่อ calc_xmlhttp.html<html>
<head>
<title>ตัวอย่างการใช้งาน AJAX Technology </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<style type="text/css">
<!--
body,td,th {
font-family: MS Sans Serif, Microsoft Sans Serif, Tahoma;
font-size: 10pt;
}
-->
</style></head> <body>
<script language="javascript">
// เริ่ม XmlHttp Object
function uzXmlHttp(){
var xmlhttp = false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
} if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// End XmlHttp Object //คำนวณผลบวก
function result1(){
// เอาค่าจาก form มาเก็บลง num1,num2
var num1 = document.form1.num1.value;
var num2 = document.form1.num2.value;
var result;
var url = 'ajax.php?num1=' + num1 + '&num2='+ num2;
xmlhttp = uzXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
// รับค่ากลับจาก server มาเก็บลง result
result = xmlhttp.responseText;
// นำค่าที่ได้ออกไปแสงผล
document.form1.result.value = result;
}
//คำนวณผลลบ
function result2(){
// เอาค่าจาก form มาเก็บลง num1,num2
var num1 = document.form1.num1.value;
var num2 = document.form1.num2.value;
var result;
var url = 'ajax1.php?num1=' + num1 + '&num2='+ num2;
xmlhttp = uzXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
// รับค่ากลับจาก server มาเก็บลง result
result = xmlhttp.responseText;
// นำค่าที่ได้ออกไปแสงผล
document.form1.result.value = result;
}
//คำนวณผลคูณ
function result3(){
// เอาค่าจาก form มาเก็บลง num1,num2
var num1 = document.form1.num1.value;
var num2 = document.form1.num2.value;
var result;
var url = 'ajax2.php?num1=' + num1 + '&num2='+ num2;
xmlhttp = uzXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
// รับค่ากลับจาก server มาเก็บลง result
result = xmlhttp.responseText;
// นำค่าที่ได้ออกไปแสงผล
document.form1.result.value = result;
}
//คำนวณผลหาร
function result4(){
// เอาค่าจาก form มาเก็บลง num1,num2
var num1 = document.form1.num1.value;
var num2 = document.form1.num2.value;
var result;
var url = 'ajax3.php?num1=' + num1 + '&num2='+ num2;
xmlhttp = uzXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.send(null);
// รับค่ากลับจาก server มาเก็บลง result
result = xmlhttp.responseText;
// นำค่าที่ได้ไปแสดงผล
document.form1.result.value = result;
}
</script>
<p align="center"><strong>
ตัวอย่างการใช้งาน AJAX Technology ( Asynchronous Javascript and XML)
</strong><p>
<table width="365" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">
<form name="form1" method="post" action="">
<tr bgcolor="#FFFFFF">
<td colspan="2"><div align="center"><strong>โปรแกรมเครื่องคิดเลขอย่างง่าย</strong></div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><div align="right">ตัวเลขที่ 1: </div></td>
<td><input name="num1" type="text" id="num1"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><div align="right">ตัวเลขที่ 2: </div></td>
<td><input name="num2" type="text" id="num2"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td colspan="2"><div align="center"><strong>ค่าที่รับกลับมา</strong></div></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><div align="right">ผลรวม : </div></td>
<td><input name="result" type="text" id="result"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td> </td>
<td><input type="button" name="button" value="บวก" onClick="result1();">
<input type="button" name="button" value="ลบ" onClick="result2();">
<input type="button" name="button" value="คูณ" onClick="result3();">
<input type="button" name="button" value="หาร" onClick="result4();"></td>
</tr>
</form>
</table>
<br> </body>
</html> โค้ดส่วนนี้จะทำหน้าที่รับค่าพร้อมทั้งคำนวณให้นำโค้ดด้านล่างเซฟเป็นไฟล์ตามชื่อที่ระบุ ไฟล์ ajax.php
<?php
$result = $num1 + $num2;
print $result;
?> ไฟล์ ajax1.php
<?php
$result = $num1 - $num2;
print $result;
?> ไฟล์ ajax2.php
<?php
$result = $num1 * $num2;
print $result;
?> ไฟล์ ajax3.php
<?php
$result = $num1 / $num2;
print $result;
?>
|
|
<- Back | Next ->
|
|
