ตัวอย่างนี้เป็นแนวทาง สำหรับการแจ้งเตือนว่ามีการเพิ่มรายการใหม่เข้ามาในฐานข้อมูล
ในลักษณะเช่น เมื่อมีรายการสั่งซื้อเข้ามาใหม่ หรือเมื่อมีเพิ่มข้อมูลสินค้าใหม่ หรือเมื่อมีการสมัคร
สมาชิกเข้ามาใหม่ ประมาณนี้เป็นต้น หลักการคือ ใช้ ajax ดึงจำนวนรายการทั้งหมดมาแสดง
ในครั้งแรก และเก็บค่าไว้ใน data attribute ของ html5 โดยใช้การกำหนดเวลาให้ทำงานทุกๆ เวลา
ที่กำหนด ใช้ setInterval() ฟังก์ชั่น และเมื่อมีข้อมูลเข้ามาใหม่ ให้นำค่าที่ส่งกลับมาในรอบที่ 2
หรือรอบถัดไป มาเช็คกับค่าเดิม ถ้าเป็นค่าที่มากกว่าค่าเดิม ก็ให้ขึ้นแจ้งเตือน ในที่นี้จะใช้รูปแบบ
alert() ธรรมดา สามารถไปประยุกต์เพิ่มเติมได้
ก่อนอื่นสร้างไฟล์สำหรับดึงจำนวนข้อมูลทั้งหมดที่ต้องการเช็ค
ไฟล์ dbconnect.php
<?php
$mysqli = new mysqli("localhost", "root","","test");
/* check connection */
if ($mysqli->connect_errno) {
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
if(!$mysqli->set_charset("utf8")) {
printf("Error loading character set utf8: %s\n", $mysqli->error);
exit();
}
ไฟล์ ajax_checkitem.php
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("dbconnect.php");
$sql = "
SELECT COUNT(id_data1) as total FROM tbl_temp
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
$row = $result->fetch_assoc();
$json_data[] = array(
"num_total" => $row['total']
);
}
// แปลง array เป็นรูปแบบ json string
if(isset($json_data)){
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
}
?>
ไฟล์ ajax ของเราจะส่งกลับข้อมูลมาในรูปแบบ json string
โดยใช้ property ชื่อว่า num_total ที่เก็บจำนวนรายการทั้งหมด ส่งกลับมา
สามารถประยุกต์เพิ่มค่าอื่นๆ เพิ่มเติมได้
ตัวอย่างไฟล์ดึงข้อมูล
ไฟล์ mydemo.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style type="text/css">
#place_total{
color:red;
font-weight:bold;
}
</style>
<br>
<div style="margin:auto;">
<!--// ใช้ แท็ก a กำนหด id สำหรับอ้างอิง และกำหนด data attrubute ชื่อ totalitem-->
<a data-totalitem="" id="place_total">0</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
<script type="text/javascript">
$(function(){
///////////
// ตัวแปรสำหรับเก็บค่าจำนวนล่าสุด
var curentTotal = null;
var getNewItem = function(){
$.post("ajax_checkitem.php",function(response){
// ถ้ามีการส่งข้อมูลกลับมา
if(response && response.length){
// เก็บค่าเดิมจาก data attribute ชื่อ totalitem
curentTotal = $("#place_total").data("totalitem");
if(curentTotal==""){ // ครั้งแรกจะเป็นค่าว่าง
// กำหนด data attribute ชื่อ totalitem ให้มีค่าเท่ากับค่าที่ได้จาก ajax
$("#place_total").data('totalitem',''+response[0].num_total+'');
}else{
// ถ้าค่าที่ส่งกลับมา มากกว่าค่าเดิม
if(response[0].num_total > curentTotal){
alert("มีรายการมาใหม่");
// กำหนด data attribute ชื่อ totalitem ให้มีค่าเท่ากับค่าที่ได้จาก ajax ค่าใหม่
$("#place_total").data('totalitem',''+response[0].num_total+'');
}
}
// แสดงข้อความเป้จำนวนรายการทั้งหมด
$("#place_total").text(response[0].num_total);
}
});
};
// เรียกใช้งานฟังก์ชั่นครั้งแรกเมื่อเข้ามาหน้านี้
getNewItem();
// กำหนดทำงานทุกๆ 7000 เท่ากับ 7 วินาที // 1000 = 1 วินาที
setInterval(function(){
getNewItem();
},7000);
//////////////
});
</script>
</body>
</html>
เนื้อหาข้างต้นเป็นแนวทางสำหรับประยุกต์แจ้งเตือนรายการใหม่อย่างง่ายด้วย ajax การกำหนดความถึ่ของเวลา
ถ้ากำหนดน้อย อาจทำให้ server ทำงานหนัก ควรกำหนดในเวลาที่เหมาะสมขึ้นกับว่าต้องการข้อมูลที่อัพเดท
มากน้อยเพียงใด เช่นถ้าต้องการข้อมูลอัพเดท ทุกๆ 30 วินาที ก็กำหนด 30000 แบบนี้เป็นต้น
