การสอน PHP Ajax พร้อมตัวอย่าง

⚡ สรุปอย่างชาญฉลาด

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

🔄 Ajax คืออะไร: เอแจ็กซ์, แบบอะซิงโครนัส Javaสคริปต์และ XML จะอัปเดตส่วนหนึ่งของหน้าเว็บโดยการแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์โดยไม่ต้องรีเฟรชหน้าเว็บทั้งหมด
⚡ ทำไมต้องใช้: Ajax ช่วยให้สามารถใช้งานฟีเจอร์ต่างๆ ได้อย่างครบครันเหมือนกับโปรแกรมบนเดสก์ท็อป เช่น การเติมข้อความอัตโนมัติ การตรวจสอบความถูกต้องแบบเรียลไทม์ และเมนูแบบดรอปดาวน์ที่เชื่อมโยงกัน
🖥️ ไคลเอนต์และเซิร์ฟเวอร์: Javaสคริปต์ทำงานในเบราว์เซอร์และเรียกใช้สคริปต์ PHP ซึ่งจะส่งคืนเฉพาะข้อมูลที่จำเป็นสำหรับการอัปเดตหน้าเว็บ
🔍 ค้นหาแบบเรียลไทม์: ตัวจัดการ onkeyup จะส่งข้อมูลการกดแป้นพิมพ์แต่ละครั้งไปยังสคริปต์ PHP ซึ่งจะส่งคืนชื่อเฟรมเวิร์กที่ตรงกันทันที
📜 XMLHttpRequest: วิธีการแบบดั้งเดิมจะสร้างอ็อบเจ็กต์ XMLHttpRequest และอ่านค่า responseText เมื่อการร้องขอเสร็จสมบูรณ์
🆕 ดึงข้อมูล API: โค้ดสมัยใหม่แทนที่ XMLHttpRequest ด้วยฟังก์ชัน fetch ที่ใช้ Promise เพื่อให้การร้องขอมีความสะอาดตาและอ่านง่ายขึ้น
🤖 AI ช่วยเหลือ: เครื่องมือ AI สามารถแปลงโค้ด XMLHttpRequest เก่าให้เป็น fetch หรือ axios และช่วยแก้ไขข้อผิดพลาดในการร้องขอ Ajax ที่ล้มเหลวได้

อ่านเพิ่มเติม

อาแจ็กซ์คืออะไร?

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

Javaต้นฉบับ เป็นภาษาสคริปต์ฝั่งไคลเอ็นต์ โดยจะถูกประมวลผลบนฝั่งไคลเอ็นต์โดยเว็บเบราว์เซอร์ที่รองรับ Javaต้นฉบับ Javaโค้ดสคริปต์จะทำงานได้เฉพาะในเบราว์เซอร์ที่มี Javaเปิดใช้งานสคริปต์แล้ว

XML XML เป็นคำย่อของ Extensible Markup Language (ภาษามาร์กอัปที่ขยายได้) ใช้สำหรับเข้ารหัสข้อความในรูปแบบที่ทั้งมนุษย์และเครื่องอ่านได้ คล้ายกับ HTML แต่ช่วยให้คุณสร้างแท็กแบบกำหนดเองได้ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับ XML โปรดดูบทความเกี่ยวกับ XML XML.

ทำไมต้องใช้ AJAX?

ช่วยให้สามารถพัฒนาได้ping แอปพลิเคชันบนเว็บที่มีฟังก์ชันการทำงานครบครันและโต้ตอบได้เหมือนกับแอปพลิเคชันบนเดสก์ท็อป
การตรวจสอบความถูกต้องสามารถทำได้ในขณะที่ผู้ใช้กรอกแบบฟอร์มโดยไม่ต้องส่งแบบฟอร์ม ซึ่งสามารถทำได้โดยใช้ฟังก์ชันเติมคำอัตโนมัติ คำที่ผู้ใช้พิมพ์จะถูกส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล และเซิร์ฟเวอร์จะตอบกลับด้วยคำหลักที่ตรงกับสิ่งที่ผู้ใช้ป้อน
สามารถใช้เพื่อเติมข้อมูลลงในกล่องดรอปดาวน์โดยขึ้นอยู่กับค่าของกล่องดรอปดาวน์อื่นได้
สามารถดึงข้อมูลจากเซิร์ฟเวอร์และอัปเดตเฉพาะบางส่วนของหน้าเว็บโดยไม่ต้องโหลดหน้าเว็บทั้งหมด ซึ่งมีประโยชน์มากสำหรับส่วนต่างๆ ของหน้าเว็บที่โหลดสิ่งต่างๆ เช่น:
- Tweets
- ความคิดเห็น
- ผู้ใช้งานที่เข้าชมเว็บไซต์ และข้อมูลแบบเรียลไทม์อื่นๆ ที่คล้ายกัน

วิธีการสร้างแอปพลิเคชัน PHP Ajax

เราจะสร้างแอปพลิเคชันง่ายๆ ที่ให้ผู้ใช้สามารถค้นหาเฟรมเวิร์ก PHP MVC ยอดนิยมได้

แอปพลิเคชันของเราจะมีช่องข้อความให้ผู้ใช้พิมพ์ชื่อของเฟรมเวิร์กต่างๆ ลงไป

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

ขั้นตอนที่ 1) การสร้างหน้าดัชนี

index.php

<html>

<head>

<title>PHP MVC Frameworks - Search Engine</title>

<script type="text/javascript" src="auto_complete.js"></script>

</head>

<body>

<h2>PHP MVC Frameworks - Search Engine</h2>

<p><b>Type the first letter of the PHP MVC Framework</b></p>

<form method="POST" action="index.php">

<p><input type="text" size="40" id="txtHint" onkeyup="showName(this.value)"></p>

</form>

<p>Matches: <span id="txtName"></span></p>

</body>

</html>

ที่นี่

“onkeyup=”showName(this.value)”” ดำเนินการ Javaฟังก์ชันสคริปต์จะแสดงชื่อทุกครั้งที่มีการพิมพ์คีย์ลงในช่องข้อความ คุณสมบัตินี้เรียกว่าการเติมข้อความอัตโนมัติ (auto complete)

ขั้นตอนที่ 2) การสร้างหน้ากรอบงาน

กรอบงาน.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

$match = "";

for ($i = 0; $i < count($frameworks); $i++) {

if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

if ($match == "") {

$match = $frameworks[$i];

} else {

$match = $match . " , " . $frameworks[$i];

}

}

}

}

echo ($match == "") ? 'no match found' : $match;

?>

ขั้นตอนที่ 3) การสร้างสคริปต์ JS

auto_complete.js

function showName(str){

if (str.length == 0){ // exit function if nothing has been typed in the textbox

document.getElementById("txtName").innerHTML=""; // clear previous results

return;

}

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

document.getElementById("txtName").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("GET","frameworks.php?name="+str,true);

xmlhttp.send();

}

ที่นี่

คำสั่ง “if (str.length == 0)” จะตรวจสอบความยาวของสตริง หากความยาวเป็น 0 สคริปต์ส่วนที่เหลือจะไม่ถูกเรียกใช้งาน
“if (window.XMLHttpRequest)…” Internet Explorer เวอร์ชัน 5 และ 6 ใช้ ActiveXObject สำหรับการใช้งาน AJAX ส่วนเวอร์ชันและเบราว์เซอร์อื่นๆ เช่น Chrome และ Firefox ใช้ XMLHttpRequest โค้ดนี้จะช่วยให้แอปพลิเคชันของเราทำงานได้ทั้งใน IE 5 และ 6 รวมถึงเบราว์เซอร์รุ่นใหม่ๆ ด้วย
“xmlhttp.onreadystatechange=function…” ตรวจสอบว่าการโต้ตอบ AJAX เสร็จสมบูรณ์และสถานะเป็น 200 หรือไม่ จากนั้นจึงอัปเดตสแปน txtName ด้วยผลลัพธ์ที่ส่งกลับมา

ขั้นตอนที่ 4) ทดสอบแอปพลิเคชัน PHP Ajax ของเรา

สมมติว่าคุณได้บันทึกไฟล์ index.php ไว้ใน phptuts/ajax แล้ว ให้เข้าไปที่โฟลเดอร์นั้น URL http://localhost/phptuts/ajax/index.php

พิมพ์ตัวอักษร C ลงในช่องข้อความ คุณจะได้รับผลลัพธ์ดังต่อไปนี้

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

AJAX สมัยใหม่ด้วย Fetch API

อ็อบเจ็กต์ XMLHttpRequest ด้านบนยังคงใช้งานได้ แต่ส่วน ActiveXObject สำหรับ Internet Explorer รุ่นเก่าไม่จำเป็นอีกต่อไปแล้ว เบราว์เซอร์สมัยใหม่มี Fetch API ที่ใช้ Promise ซึ่งทำการร้องขอแบบเดียวกันโดยใช้โค้ดน้อยกว่ามาก

function showName(str) {
    if (str.length === 0) {
        document.getElementById("txtName").innerHTML = "";
        return;
    }
    fetch("frameworks.php?name=" + encodeURIComponent(str))
        .then(response => response.text())
        .then(text => {
            document.getElementById("txtName").innerHTML = text;
        });
}

เวอร์ชันนี้ทำงานเหมือนกัน คือส่งข้อความที่พิมพ์ไปยัง frameworks.php และใส่ผลลัพธ์ลงใน span ชื่อ txtName นอกจากนี้ยังใช้ encodeURIComponent เพื่อหลีกเลี่ยงการเข้ารหัสข้อมูลที่ป้อนเข้ามาอย่างปลอดภัย และสามารถเพิ่มการจัดการข้อผิดพลาดได้ง่ายๆ โดยใช้บล็อก catch ในห่วงโซ่ Promise ของมัน

คำถามที่พบบ่อย

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

สำหรับ fetch ให้ส่งอาร์กิวเมนต์ตัวที่สองเพื่อกำหนดวิธีการส่งแบบ POST และส่งเนื้อหา (body) จากนั้นอ่านค่า $_POST ใน PHP ส่วน XMLHttpRequest ให้เรียก open('POST', url) ตั้งค่าส่วนหัว Content-Type แล้วส่งข้อมูลที่เข้ารหัสแล้ว

CORS (Cross-Origin Resource Sharing) คือระบบที่บล็อกคำขอจากเบราว์เซอร์ไปยังโดเมนอื่น เว้นแต่ว่าเซิร์ฟเวอร์นั้นจะส่งส่วนหัว Access-Control-Allow-Origin ที่ถูกต้องมา คุณสามารถเพิ่มส่วนหัวนี้ได้ที่ฝั่ง PHP หรือเรียกใช้เมธอด same-origin ก็ได้ URL เพื่อแก้ไข

ใช่แล้ว วางโค้ด XMLHttpRequest ลงไป แล้ว AI จะเขียนใหม่โดยใช้ fetch API ที่ใช้ promise หรือ axios เพิ่มการจัดการข้อผิดพลาด และคงพฤติกรรมเดิมไว้ ทดสอบผลลัพธ์ดู เพราะการจัดการการตอบกลับจะแตกต่างกันเล็กน้อย

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