เอแจ็กซ์ (AJAX)


	เอแจ็กซ์ (AJAX)

ปรับปรุง : 2554-03-11 (ajax + php)

เอแจ็กซ์ (AJAX) = Request a Server ?

เอแจ็กซ์ (AJAX - Asynchronous JavaScript And XML) คือ เทคนิคหนึ่งในการพัฒนาเว็บแอปพลิเคชัน เพื่อให้สามารถโต้ตอบกับผู้ใช้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง (Background Processing) ทำให้ไม่ดาวน์โหลดทั้งเว็บเพจใหม่ทุกครั้ง เมื่อเปลี่ยนข้อมูลบางส่วนในเว็บเพจ ช่วยให้การตอบสนองรวดเร็วขึ้น

แนะนำเว็บ (Web Guides)
- Jesse James Garrett
- http://en.wikipedia.org/wiki/AJAX
- http://www.w3schools.com
- http://www.tmi.or.th
- http://code.google.com

ทดสอบ gallery.htm และ gallery.php
เป็นที่ประทับใจ ลองทดสอบนะครับ
มีจุดบกพร่องนิดหน่อย ลอง copy ไปแก้ดู

ความแตกต่าง

Ajax Engine คือตัวกลางระหว่างผู้ใช้ และเครื่องบริการ ทำให้ผู้ใช้สามารถทำงานได้ไม่ติดขัด การติดต่อกับเครื่องบริการจะประมวลผลในฉากหลัง (Background Processing) แล้วส่งข้อมูลมาแสดงแทนที่ข้อมูลเดิมบางส่วนบนเว็บเพจที่ถูกเปิดมาแล้วก่อนหน้านี้ แต่การประมวลผลแบบเดิมจะส่งการควบคุมไปให้กับเครื่องบริการ แล้วก็จะส่งผลลัพธ์มาแสดงแทนที่เว็บเพจเดิมทั้งหมด

ขั้นตอน : การแสดงเวลาอย่างง่าย
1. สร้าง time.htm เรียกใช้ค่าจาก time.php
2. นำค่าที่ได้มาจาก time.php แสดงใน time ของ time.htm
3. กำหนด onkeyup ใน text ให้เรียก ajaxFunction()
4. ตัวอย่างนี้ใช้ได้กับ IE เท่านั้น
time.htm
<body>
<script type="text/javascript">
function ajaxFunction() {  
  var xmlHttp;
  // Internet Explorer
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
  xmlHttp.onreadystatechange=function() {
    if(xmlHttp.readyState==4) { 
      document.myForm.time.value=xmlHttp.responseText; 
    }
  }
  xmlHttp.open("GET","time.php",true);
  xmlHttp.send(null);
}
</script>
<form name="myForm">
Name: <input type="text" name="username" 
onkeyup="ajaxFunction();">
Time: <input type="text" name="time">
</form>

time.php
<? 
echo date("d/m/Y H:i:s"); 
?> 

กดตัวอักษร เวลาจะแสดงออกมา
ซึ่งเกิดจาก time.htm ทำงานกับ time.php

ขั้นตอน : การแสดงเวลาแบบไม่ซ้ำ
1. สร้าง timeclk.htm ที่ปรับมาจาก time.htm
2. ใช้กับ Browser ได้หลายรุ่น และเวลาไม่ซ้ำ
3. ปุ่มสั่งงานด้วย onclick 
4. เวลาแสดงไม่ซ้ำ เพราะส่งค่าที่ต่างกันให้กับ time.php
timeclk.htm
<body>
<script type="text/javascript">
function a() {  
  var xmlHttp;
  var xdate = new Date();
  try { // Firefox, Opera 8.0+, Safari    
    xmlHttp=new XMLHttpRequest();    
  } catch (e) {   
    try { // Internet Explorer        
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      
  } catch (e) {      
      try {         
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");        
      } catch (e) {        
        alert("Your browser does not support AJAX!");        
        return false;        
      }      
    }    
  }
  xmlHttp.onreadystatechange=function() {
    if(xmlHttp.readyState==4) {
      document.f.time.value=xmlHttp.responseText;
    }
  }
  xmlHttp.open("GET","time.php?t=" + xdate.getTime(),true);
  xmlHttp.send(null);
}
</script>
<form name="f">
Name: <input type="text" name="username">
Time: <input type="text" name="time">
<input type=button onclick="a();" value=updating>
</form> 


แหล่งอ้างอิง : http://www.w3schools.com/PHP/php_ajax_database.asp

time.php
<? 
echo date("d/m/Y H:i:s"); 
?> 

กดตัวอักษร เวลาจะแสดงออกมา
ซึ่งเกิดจาก timeclk.htm ทำงานกับ time.php

โปรแกรมฝั่งส่งข้อมูล เช่น x.htm

<script type="text/javascript">
function ajaxFunction() {  
  var xmlHttp;
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
  xmlHttp.onreadystatechange=function() {
    if(xmlHttp.readyState==4) { document.myForm.uname.value=xmlHttp.responseText; }
  }
  xmlHttp.open("GET","y.php?user=" + document.myForm.user.value  , true);
  xmlHttp.send(null);
}
</script>
<form action=y.php method=post name="myForm">
<input name=user size=12 onkeyup="ajaxFunction();">
<input name=uname size=25 disabled style="background-color:black">
<input type=submit value=เข้าใช้>
</form>

โปรแกรมรับข้อมูลแล้วส่งกลับ เช่น y.php

<? 
session_start();
if (isset($_GET['user'])) {
$db = "sar.mdb";
$db_connection = new COM("ADODB.Connection"); 
$db_connstr="Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" . realpath($db);
$db_connection->open($db_connstr); 
$rs = $db_connection->execute("select uid,uname from users where uid = '". $_GET["user"] ."'"); 
header ("Content-Type: text/html; charset=tis-620");
if (!$rs->EOF) {
  $un = $rs->Fields(1); 
  echo $un->value;
} else { echo "ไม่พบข้อมูลนี้"; }
// http://127.0.0.1/y.php?user=science
}
?>

โปรแกรม แสดง select ชุดใหม่ เมื่อคลิ๊ก [ajaxtest.php]

<? if (isset($_REQUEST["t"])) {
echo "<select name=my_sub>";
if ($_REQUEST["t"] == "fruit") echo "<option>apple</option><option>banana</option>";
if ($_REQUEST["t"] == "drink") echo "<option>coke</option><option>pepsi</option>";
echo "</select>";
exit;
} ?><body><script type="text/javascript">
function myajax() {
var xmlHttp;
var xdate = new Date();
try { xmlHttp=new XMLHttpRequest(); } catch (e) {
try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return false; } } }
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) { 
document.getElementById("my_div").innerHTML= xmlHttp.responseText; } 
}
xmlHttp.open("GET","?t=" + document.f.first_choice.value,true);
xmlHttp.send(null);
}
</script>
<form name="f">
<select name="first_choice" onclick="myajax();">
<option value="drink" selected>เครื่องดื่ม</option>
<option value="fruit">ขนม</option>
</select>
<div id="my_div"></div>
</form>