มนุษย์คอมกันทรลักษ์
ส.ต.ท. ธนสิทธิ์ สิทธิ์ ร่มเย็น
สมุด
บันทึก
อนุทิน
ความเห็น
ติดต่อ

ความรู้เกี่ยวกับ Ajax Technology

การนำเทคนิค AJAX มาใช้กับ Web Programings

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;
?>

การส่งค่าระหว่าง List Menu นี้เหมาะมากครับสำหรับนำไปใช้ในแบบฟอร์มสมาชิกที่มีตัวเลือกที่สามารถเลือกได้มากกว่า 1 อย่าง
วิธีการนั้นไม่ยากอย่างที่คิดกันไว้ครับลองดู ตัวอย่าง กันก่อนครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<script LANGUAGE="JavaScript">
<!--

// PickList script- By Sean Geraty (http://www.freewebs.com/sean_geraty/)
// Visit JavaScript Kit (http://www.javascriptkit.com) for this JavaScript and 100s more
// Please keep this notice intact

// Control flags for list selection and sort sequence
// Sequence is on option value (first 2 chars - can be stripped off in form processing)
// It is assumed that the select list is in sort sequence initially
var singleSelect = true; // Allows an item to be selected once only
var sortSelect = true; // Only effective if above flag set to true
var sortPick = true; // Will order the picklist in sort sequence

// Initialise - invoked on load
function initIt() {
var selectList = document.getElementById("SelectList");
var selectOptions = selectList.options;
var selectIndex = selectList.selectedIndex;
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
pickOptions[0] = null; // Remove initial entry from picklist (was only used to set default width)
if (!(selectIndex > -1)) {
selectOptions[0].selected = true; // Set first selected on load
selectOptions[0].defaultSelected = true; // In case of reset/reload
}
selectList.focus(); // Set focus on the selectlist
}

// Adds a selected item into the picklist
function addIt() {
var selectList = document.getElementById("SelectList");
var selectIndex = selectList.selectedIndex;
var selectOptions = selectList.options;
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
var pickOLength = pickOptions.length;
// An item must be selected
while (selectIndex > -1) {
pickOptions[pickOLength] = new Option(selectList[selectIndex].text);
pickOptions[pickOLength].value = selectList[selectIndex].value;
// If single selection, remove the item from the select list
if (singleSelect) {
selectOptions[selectIndex] = null;
}
if (sortPick) {
var tempText;
var tempValue;
// Sort the pick list
while (pickOLength > 0 && pickOptions[pickOLength].value < pickOptions[pickOLength-1].value) {
tempText = pickOptions[pickOLength-1].text;
tempValue = pickOptions[pickOLength-1].value;
pickOptions[pickOLength-1].text = pickOptions[pickOLength].text;
pickOptions[pickOLength-1].value = pickOptions[pickOLength].value;
pickOptions[pickOLength].text = tempText;
pickOptions[pickOLength].value = tempValue;
pickOLength = pickOLength - 1;
}
}
selectIndex = selectList.selectedIndex;
pickOLength = pickOptions.length;
}
selectOptions[0].selected = true;
}

// Deletes an item from the picklist
function delIt() {
var selectList = document.getElementById("SelectList");
var selectOptions = selectList.options;
var selectOLength = selectOptions.length;
var pickList = document.getElementById("PickList");
var pickIndex = pickList.selectedIndex;
var pickOptions = pickList.options;
while (pickIndex > -1) {
// If single selection, replace the item in the select list
if (singleSelect) {
selectOptions[selectOLength] = new Option(pickList[pickIndex].text);
selectOptions[selectOLength].value = pickList[pickIndex].value;
}
pickOptions[pickIndex] = null;
if (singleSelect && sortSelect) {
var tempText;
var tempValue;
// Re-sort the select list
while (selectOLength > 0 && selectOptions[selectOLength].value < selectOptions[selectOLength-1].value) {
tempText = selectOptions[selectOLength-1].text;
tempValue = selectOptions[selectOLength-1].value;
selectOptions[selectOLength-1].text = selectOptions[selectOLength].text;
selectOptions[selectOLength-1].value = selectOptions[selectOLength].value;
selectOptions[selectOLength].text = tempText;
selectOptions[selectOLength].value = tempValue;
selectOLength = selectOLength - 1;
}
}
pickIndex = pickList.selectedIndex;
selectOLength = selectOptions.length;
}
}

// Selection - invoked on submit
function selIt(btn) {
var pickList = document.getElementById("PickList");
var pickOptions = pickList.options;
var pickOLength = pickOptions.length;
if (pickOLength < 1) {
alert("No Selections in the PicklistnPlease Select using the [->] button");
return false;
}
for (var i = 0; i < pickOLength; i++) {
pickOptions[i].selected = true;
}
return true;
}

//-->
</SCRIPT>


2. นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<form NAME="theform" ID="theform" ACTION="whatever" onSubmit="return selIt();">
<table>
<tr>
<td>
<select NAME="SelectList" ID="SelectList" SIZE="5" multiple="multiple" style="width: 150px">
<option VALUE="01sel">Selection 01</option>
<option VALUE="02sel">Selection 02</option>

<option VALUE="03sel">Selection 03</option>
<option VALUE="04sel">Selection 04</option>
<option VALUE="05sel">Selection 05</option>
<option VALUE="06sel">Selection 06</option>
<option VALUE="07sel">Selection 07</option>
<option VALUE="08sel">Selection 08</option>
<option VALUE="09sel">Selection 09</option>
<option VALUE="10sel">Selection 10</option>
</select>

</td>
<td>
<input TYPE="BUTTON" VALUE="->" ONCLICK="addIt();"></input>
<br>
<input TYPE="BUTTON" VALUE="<-" ONCLICK="delIt();"></input>
</td>
<td>
<select NAME="PickList" ID="PickList" SIZE="5" multiple="multiple" style="width: 150px">
<option VALUE="01sel">Selection 01</option>
</select>
</td>
</tr>
<tr>
<td ALIGN="left">
<input TYPE="reset" VALUE="Reset" ONCLICK="javascript: window.location.href = 'picklist.html'">
</td>

<td>
</td>
<td ALIGN="right">
<input TYPE="submit" VALUE="Submit">
</td>
</tr>
</table>
</form>

3. ใส่โค้ดต่อไปนี้ลงไปในส่วนของ <body>

 <body onLoad="initIt();">

 
                  ลูกเล่นเล็กๆน้อยๆเกี่ยวกับภาพครับ       

ในวันนี้ผมจะมาแนะนำเทคนิคการใส่ลูกเล่นให้ภาพที่ลักษณะทึบแสง เมื่อนำเคอร์เซอร์เมาส์ไปวางบนรูปก็จะปรากฏภาพที่ชัดเจนวิธีการนั้นไม่ยากครับ
ดู ตัวอย่าง ครับ เทคนิคนี้จะแบ่งออกเป็นสองแบบคือ

แบบที่ 1 เมื่อนำเมาส์ไปวางที่รูปจะปรากฏเส้นขอบขึ้น วิธีการให้ทำดังนี้ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน  <head>....</head> ครับ 

<style type="text/css">
      .borderit img{
      border: 1px solid #ccc;
      }      
.borderit:hover img{
        border: 1px solid navy;
        }
      
.borderit:hover{
        color: red; /* irrelevant definition to overcome IE bug */
        }
    </style>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน  <body>....</body> ครับ 

<a href="http://www.thaimisc.com" class="borderit"><img border="0" src="logo.gif" /></a>

 

 

แบบที่ 2 เมื่อนำเมาส์ไปวางที่รูปภาพจะปรากฏชัดเจนขึ้น วิธีการให้ทำดังนี้ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<style type="text/css">
.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
</style>


2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<a href="http://www.thaimisc.com/" class="opacityit"><img border="0" src="email.gif" /></a> 

เสร็จเรียบร้อยแล้วครับ ลองทำกันดูครับเทคนิคนี้น่าจะเพิ่มความน่าสนใจให้กับเว็บของเราได้ไม่น้อยเลยครับ
มาอีกแล้วครับ ครั้งนี้มากับการทำโพลแบบ AJAX  มาดูกันเลยดีกว่าครับ
โพลล์ประกอบด้วย 4 ไฟล์ดังนี้
  • HTML form(Poll.html)
  • JavaScript (poll.js)
  • PHP(poll_vote.php)
  • text file(poll_result.txt)
ขั้นตอนแรก 
	เริ่มด้วยการสร้าง ไฟล์ Poll.html  ตามโค้ดข้างล่างนี้ครับ

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
	<div id="poll">
<h2>คุณชอบ PHP and AJAX มานานแล้วใช่ไหม?</h2>
<form>
ใช่: <input type="radio" name="vote" value="0" onclick="getVote(this.value)">
<br />ไม่ใช่: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
</form>
	</div>
</body>
</html>
เสร็จแล้วครับสำหรับ ฟอร์ม 
ขั้นตอนที่สอง
	เป็นการนำเอา JavaScript  มาใช้การความการทำงานเพื่อให้เกิดความนุ่มนวลในการเปลี่ยนแปลงข้อมูล
โดยมีตัวอย่างตัวตามโค้ดข้างล่างครับ(poll.js)

var xmlHttp

function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 } 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 

function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 

function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
return objXMLHttp
}

ขั้นตอนที่สาม
	ขั้นเป็นการนำเอาภาษา php มาใช้การบันทึำกข้อมูล (poll_vote.php)

<?php
$vote = $_REQUEST['vote'];

	//อ่านข้อมูลจากไฟล์ poll_result.txt
$filename = "poll_result.txt";
$content = file($filename);
//จำนวนความเห็นจากแต่ละ array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
		if ($vote == 0)
 {
 $yes = $yes + 1;
 }
if ($vote == 1)
 {
 $no = $no + 1;
 }
//บันทึกข้อมูลลงไฟล์ poll_result.txt
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
		<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif" //เป็นกราฟฟิกที่นำมาแสดง เช่น กราฟแ่ท่ง
width='<?php echo(100*round($yes/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" //บันทึกข้อมูลลงไฟล์ poll_result.txt
width='<?php echo(100*round($no/($no+$yes),2)); ?>'
height='20'>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>
ขั้นตอนสุดท้ายจะถูกเขียนขึ้นมาโดยไฟล์ poll_vote.php (poll_result.txt)จะประกอบด้วยข้อมูลหลักสองอย่างคือ

7||6  ซึ่งแสดงข้อมูลสองอย่างคือ ใช่ กับ ไม่ใช่
สำหรับการทำโพลโดยใช้เทคนิค Ajax ก็จบแล้ว หากท่านมีอะไรเพิ่มก็ขอเชิญร่วมแสดงความเห็นได้ ครับ
 หรือถ้าหากต้องการให้นำเสนออะไรก็บอกกล่าวได้ครับ
เขียนใน GotoKnow โดย 
 ใน ความรู้เกี่ยวกับความพิวเตอร์
คำสำคัญ (Tags): #ajax
หมายเลขบันทึก: 193937เขียนเมื่อ 13 กรกฎาคม 2008 14:18 น. ()แก้ไขเมื่อ 6 กันยายน 2013 19:17 น. ()สัญญาอนุญาต: จำนวนที่อ่านจำนวนที่อ่าน:
ความเห็น (3)
@..สายธาร..@
เขียนเมื่อ 13 กรกฎาคม 2008 14:56 น. ()

ขอบคุณ  นะคะ

eunshu
เขียนเมื่อ 15 กรกฎาคม 2008 16:11 น. ()

ข้อมูลน่าสนใจมากเลย ไว้ศึกษาเก่งแล้ว รบกวนสอนให้ด้วยนะคะ..

ud
เขียนเมื่อ 19 กรกฎาคม 2008 16:06 น. ()

ชอบมากอยากศึกษามาตั้งนานแล้ว

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
สงวนลิขสิทธิ์ © 2005-2023 บจก. ปิยะวัฒนา
และผู้เขียนเนื้อหาทุกท่าน
นโยบายความเป็นส่วนตัว (Privacy Policy)
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท