AJAX คือ

AJAX เป็นกระบวนการรับส่งข้อมูลระหว่าง client กับ server ผ่านทางโค้ดจาวาสคริปต์ client ก็คือเบราเซอร์นั่นเอง โดยทำงานอยู่เบื้องหลัง จะไม่มีการรีเฟรชหน้าเพจแต่อย่างไร

jQuery นั้นมีคำสั่งสำหรับเขียน AJAX อยู่หลายคำสั่ง วันนี้เรามาเรียนรู้คำสั่ง $.get() กัน คำสั่ง $.get() นี้จะทำหน้าที่ส่งข้อมูลแบบ querystring ไปยังเซิฟเวอร์เพื่อร้องขอข้อมูล

คำสั่ง $.get() มีพารามิเตอร์อยู่ 4 ตัว

1. url ไฟล์ที่เราต้องการเรียกประมวลผล
2. data ตัวแปรแบบ querystring ที่ต้องการส่งไปให้ไฟล์ที่เรียกในข้อ 1
3. function ฟังก์ชั่นที่จะเรียกใช้งานเมื่อการประมวลผลของพารามิเตอร์ตัวที่ 1 ส่ง response กลับมา
4. datatype ชนิดของข้อมูลที่ส่งกลับมาจากเซิฟเวอร์ html/json/xml

พารามิเตอร์ตัวที่ 2,3,4 เป็น optional ไม่ระบุก็ได้

$.get({
  url: url,
  data: data,
  success: function,
  datatype : html/json/xml
});

ลองดูตัวอย่าง สมมติผมต้องการว่า เมื่อผมคลิกปุ่ม get จะให้ AJAX ไปดึงข้อมูลจากฐานข้อมูลมาแสดง โดยจะเอาเฉพาะข้อมูลที่มี id=4 เท่านั้น

ไฟล์ get.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
 
	$('#get').click(function(){
 
		$.get(
			'get_data.php',
			{id:4},
			function(data){
				$('#container').html(data);
			},
			'html'
		);		
 
	});
});
</script>
</head>
<body>
<p>
  <input type="button" name="get" id="get" value="Button" />
</p>
<div id="container"></div>
</body>
</html>

1. เมื่อคลิกปุ่ม get ให้เรียกใช้คำสั่ง $.get()

2. คำสั่ง $.get() จะส่งตัวแปร querystring ชื่อ id ไปให้ไฟล์ get_data.php

3. เมื่อไฟล์ get_data.php ประมวลผลเสร็จ จะส่งข้อมูลกลับมา ตัวแปร data ในฟังก์ชั่นจะเป็นตัวคอยรับ

4. เอาข้อมูลที่ได้มาไปแสดงใน container

สังเกตดูนะครับ วิธีการแพ้กตัวแปร querystring เพื่อส่งไปให้เซิฟเวอร์จะอยู่ในฟอร์แมตนี้ {id:4} ตัวแรกเป็นชื่อตัวแปร ไม่ต้องคร่อมด้วยเครื่องหมายคำพูด ตัวหลังเป็นค่า ถ้าต้องการส่งไปหลายๆตัวแปร ให้คั่นด้วยคอมม่า {id:4,name:”watcharamet”}

ไฟล์ get_data.php

<?php require_once('Connections/connection.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
 
$colname_rs_sure_or_not = "-1";
if (isset($_GET['id'])) {
  $colname_rs_sure_or_not = $_GET['id'];
}
mysql_select_db($database_connection, $connection);
$query_rs_sure_or_not = sprintf("SELECT * FROM sure_or_not WHERE sure_or_not_id = %s", GetSQLValueString($colname_rs_sure_or_not, "int"));
$rs_sure_or_not = mysql_query($query_rs_sure_or_not, $connection) or die(mysql_error());
$row_rs_sure_or_not = mysql_fetch_assoc($rs_sure_or_not);
$totalRows_rs_sure_or_not = mysql_num_rows($rs_sure_or_not);
 
echo '
<table border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td>ID : </td>
    <td>
';
echo $row_rs_sure_or_not['sure_or_not_id'];
echo '
</td>
  </tr>
  <tr>
    <td>Question : </td>
    <td>
';
echo $row_rs_sure_or_not['sure_or_not_question'];
echo '
</td>
  </tr>
  <tr>
    <td>Answer :</td>
    <td>
';
echo $row_rs_sure_or_not['sure_or_not_answer']; 
 echo '
 </td>
  </tr>
</table>
 ';
 
mysql_free_result($rs_sure_or_not);
?>

1. รอรับตัวแปร id

2. เอาตัวแปร id ไปหาในฐานข้อมูล

3. นำผลลัพธ์ที่ได้ ส่งกลับไปให้ AJAX ที่เรียกมา

มองภาพรวมทั้งหมด จะได้ว่า เมื่อคลิกปุ่ม get AJAX จะส่ง id มาให้ไฟล์ get_data.php ไฟล์ get_data.php นำ id ไปค้นในฐานข้อมูล ส่งผลลัพธ์กลับไปให้ AJAX AJAX นำข้อมูลที่ได้ไปแสดงใน div

Note

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

ถ้ายังมองว่า echo เป็นคำสั่งปริ้นต์ข้อความออกทางจอภาพ ตอนเขียน AJAX จะรู้สึกขัดแย้งในใจ ให้ทำความเข้าใจเสียใหม่