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 จะรู้สึกขัดแย้งในใจ ให้ทำความเข้าใจเสียใหม่
ความรู้ says:
07/11/2554 at 07/11/2554
สุดยอดความรู้