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

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

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

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

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

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

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

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

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

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

จากนั้นเราจะใช้ 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ฟังก์ชันสคริปต์ showName ทุกครั้งที่มีการพิมพ์คีย์ในกล่องข้อความ คุณลักษณะนี้เรียกว่าการเติมข้อความอัตโนมัติ

ขั้นตอนที่ 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 รวมถึง IE และเบราว์เซอร์เวอร์ชันสูงอื่นๆ
“xmlhttp.onreadystatechange=function…” ตรวจสอบว่าการโต้ตอบ AJAX เสร็จสมบูรณ์หรือไม่และสถานะเป็น 200 จากนั้นอัปเดตช่วง txtName ด้วยผลลัพธ์ที่ส่งคืน

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

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

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

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

สรุป

AJAX เป็นตัวย่อของ Asynchronous Javaต้นฉบับ และ XML
AJAX เป็นเทคโนโลยีที่ใช้ในการสร้างแอปพลิเคชันโต้ตอบที่หลากหลาย ซึ่งลดการโต้ตอบระหว่างไคลเอนต์และเซิร์ฟเวอร์โดยการอัปเดตเพียงบางส่วนของหน้าเว็บ
Internet Explorer เวอร์ชัน 5 และ 6 ใช้ ActiveXObject ในการใช้งาน AJAX
Internet explorer เวอร์ชัน 7 ขึ้นไป และเบราว์เซอร์ Chrome Firefox, Operaและ Safari ใช้ XMLHttpRequest