GORAGOD.com

AJAX สามารถทำการอัปเดทข้อมูลโดยที่ไม่ต้องผ่านฟอร์ม หรือ Submit หน้าได้ครับ เช่นการเลือก select แล้วไปอัปเดทฐานข้อมูลทันที โดยที่ไม่ต้องกดปุ่มเพื่อส่งค่า

<select id="s_a" onchange="do_selectchange(this)">
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a2">a2</option>
</select>
<select id="s_b" onchange="do_selectchange(this)">
<option value="b1">b1</option>
<option value="b2">b2</option>
<option value="b2">b2</option>
</select>
<script type="text/javascript">
function do_selectchange( sel )
{
  var query = 'id='+sel.id+'&value='+sel.value; //ค่าที่ส่งมาใช้เพื่อส่งไปอัปเดท
  var req = Inint_AJAX();
  req.onreadystatechange = function ()
  {
    if ( req.readyState == 4 )
    {
      if ( req.status == 200 )
      {
        alert( req.responseText ); //เมื่ออัปเดทเรียบร้อย (อาจแสดงข้อความว่าอัปเดทเรียบร้อยก็ได้)
      };
    };
  };
  req.open( "POST" , "update.php" ); //สร้าง connection
  req.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); // set Header
  req.send( query ); //ส่งค่า
}
</script>

ตัวอย่างผมมี select อยู่ 2 ตัว เมื่อเลือกตัวใดตัวหนึ่ง จะเกิด event onchange ไปเรียก Javascript ทำงานให้ส่งค่าไปโดย AJAX โดยจะถูกส่งไปยัง update.php และรับค่ากลับมาแล้วแสดงผลค่าที่รับไปที่ req.responseText

<?
  //กำหนดให้ IE อ่าน page นี้ทุกครั้ง ไม่ไปเอาจาก cache
  header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header ("Cache-Control: no-cache, must-revalidate");
  header ("Pragma: no-cache");
  //กำหนดภาษา
  header("content-type: application/x-javascript; charset=utf-8");

  //ค่าที่ถูกส่งมาด้วยจาก AJAX
  $id = $_POST[id];
  $value = $_POST[value];

  //อัปเดทลงฐานข้อมูลที่นี่ //ตัวอย่างคืนค่าที่ส่งมากลับไปแสดงผล
  echo 'id='.$id.'&value='.$value;
?>

ไฟล์ update.php ครับ รับค่ามาจาก AJAX ในตัวอย่างผมส่งค่าที่รับมากลับคืนไปเพื่อแสดงผล ถ้าต้องการไปอัปเดทฐานข้อมูลก็ให้เขียนโค้ดอัปเดทฐานข้อมูลตามปกติได้เลย ครับ