CRUD Application : 4.Ajax

Ajax เป็นไปตามาตรฐานของอินเตอร์เน็ต ซึ่งรวมไปด้วย 

  • XMLHttpRequest object (ใช้ในการแลกเปลี่ยนข้อมูลแบบ asynchronously กับเซิร์ฟเวอร์)
  • JavaScript/DOM (เพื่อปฏิสัมพันธ์กับข้อมูล – แสดงผล และตอบโต้)
  • CSS (ใช้ในการจัดรูปแบบการแสดงผล)
  • XML (มักใช้เป็นรูปแบบในการถ่ายโอนข้อมูล)

Ajax มีหลักสำคัญคือ XMLHttpRequest Object ซึ่งสามารถแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์อยู่เบื้องหลัง ซึ่งเบราว์เซอร์ในปัจจุบันรองรับ XMLHttpRequest Object (Chrome, Firefox, IE7+, Edge, Safari Opera) 

ไวยากรณ์ในการสร้าง XMLHttpRequest 

variable = new XMLHttpRequest();

 

ตาราง Method หรือ ฟังก์ชันของ XMLHttpRequest Object

Method คำอธิบาย
new XMLHttpRequest() สร้างวัตถุ XMLHttpRequest
abort() ยกเลิกการร้องขอปัจจุบัน
getAllResponseHeaders() คืนค่า header ทั้งหมด
getResponseHeader() คืนค่า header ที่ระบุ
open(method,url,async,user,psw) method: มี 2 ประเภท GET หรือ POST
url: ที่อยู่ของไฟล์ที่ต้องการเรียกใช้งาน
async: true (asynchronous) or false (synchronous) 
user: กำหนด username
psw: กำหนด password
send() ส่งคำร้องไปยังเซิร์ฟเวอร์ใช้ GET
send(string) ส่งคำร้องไปยังเซิร์ฟเวอร์แบบมีค่าพารามิเตอร์ใช้ POST
setRequestHeader() เพิ่มค่าในส่วน header สำหรับการส่ง

 

ตารางคุณสมบัติของ XMLHttpRequest Object

Property คำอธิบาย
onreadystatechange กำหนดให้ฟังก์ชันเรียกใช้งานเมื่อค่าสถานะของ readyState เปลี่ยนไป
readyState ค่าสถานะประกอบไปด้วย
0: ยังไม่มีคำขอหรือไม่มีการทำอะไรทั้งนั้น
1: สร้างการเชื่อมต่อกับเซิร์ฟเวอร์แล้ว
2: ได้รับคำขอแล้ว
3: ประมวลผลคำขอ
4: พร้อมทำงาน
responseText ส่งคืนค่าข้อมูลในรูปแบบของ string
responseXML ส่งคืนค่าข้อมูลในรูปแบบของข้อมูล XML 
status คืนค่าหมายเลขสถานะคำขอ
200: “OK”
403: “Forbidden”
404: “Not Found”
ศึกษาเพิ่มเติมได้ที่ : Http Messages Reference
statusText การคืนค่า (e.g. “OK” หรือ “Not Found”)

 

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

ซึ่งในเนื้อหาที่ 4 นี้ เราจะนำหลักการของ Ajax ไปปรับใช้กับเนื้อหา 3 การตลาดออนไลน์ ที่ผ่านมา 

 

การสร้างตลาดออนไลน์โดยใช้ Ajax

1.การกรองสินค้า/ค้นหาสินค้า

อัพเดทไฟล์ view_product.php เพื่อสร้างฟังก์ชันในการใช้ ajax 

<?php
require("db.php");
include("auth.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>สินค้า</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="form">
        <p><a href="dashboard.php">Dashboard</a></p> 
        <p><b>ค้นหาสินค้า<b> : <input type="text" name="product_name" id="product_name" placeholder="ชื่อสินค้า" onkeyup="loadData(this.value)"></p>
    </div>


<?php
$data = "SELECT * FROM products ORDER BY p_id DESC";
$query = mysqli_query($con,$data);

if(@addslashes($_GET['delete'])){
    $delete = "DELETE FROM products WHERE p_id='".$_GET['delete']."'";
    if(mysqli_query($con,$delete)){
    echo "<meta http-equiv='refresh' content='0.1;view_products.php'>";
    }
}

echo "<div id='showData'>";
echo "<div class='row'>";
while($products = mysqli_fetch_array($query)){

    echo    "<div class='column'>";
    echo    "<div class='card'>";
    echo    "<img src='".$products['p_img']."'>";
    echo    "<h1>".$products['p_name']."</h1>";
    echo    "<p class='price'>".$products['p_price']."</p>";
    echo    "<p>".$products['p_desc']."</p>";
    echo    "<p><a href='purchase.php?id=".$products['p_id']."' class='aclass'><button>ซื้อสินค้า</button></a></p>";
    echo    "<p><a href='edit_product.php?id=".$products['p_id']."'>edit</a></p>";
    echo    "<a href='view_products.php?delete=".$products['p_id']."'>ลบ</a>";
    echo    "</div>";
    echo    "</div>";
}
?>



</div>
</div>

    <script>
    function loadData(str) {
    if (str.length == 0) {
        document.getElementById("showData").innerHTML = "กรุณาระบุชื่อสินค้าที่ต้องการ";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("showData").innerHTML = this.responseText;
        }
        };
        xmlhttp.open("GET", "show_product_ajax.php?q=" + str, true);
        xmlhttp.send();
    }
    }
    </script>

</body>
</html>

ไฟล์ที่ 1 view_product.php

 

สร้างไฟล์ใหม่ที่ชื่อว่า show_product_ajax.php เพื่อรับค่าและประมวลผลอยู่เบื้องหลัง

<?php
require('db.php');

$getData = $_GET['q'];

$data = "SELECT * FROM products WHERE p_name like '$getData%' ORDER BY p_id DESC";
$query = mysqli_query($con,$data);

echo "<div class='row'>";
while($result = mysqli_fetch_array($query)){
    echo    "<div class='column'>";
    echo    "<div class='card'>";
    echo    "<img src='".$result['p_img']."'>";
    echo    "<h1>".$result['p_name']."</h1>";
    echo    "<p class='price'>".$result['p_price']."</p>";
    echo    "<p>".$result['p_desc']."</p>";
    echo    "<p><a href='purchase.php?id=".$result['p_id']."' class='aclass'><button>ซื้อสินค้า</button></a></p>";
    echo    "<p><a href='edit_product.php?id=".$result['p_id']."'>edit</a></p>";
    echo    "<a href='view_products.php?delete=".$result['p_id']."'>ลบ</a>";
    echo    "</div>";
    echo    "</div>";
}
?>
</div>

ไฟล์ที่ 2 show_product_ajax.php