Tutorial PHP Ajax beserta Contohnya

Apa itu Ajax?

AJAX bentuk lengkapnya adalah Asynchronous JavaNaskah & XML. Ini adalah teknologi yang mengurangi interaksi antara server dan klien. Hal ini dilakukan dengan memperbarui hanya sebagian dari halaman web daripada seluruh halaman. Interaksi asinkron dimulai dengan JavaSkrip. Tujuan AJAX adalah untuk menukar sejumlah kecil data dengan server tanpa penyegaran halaman.

JavaNaskah adalah bahasa skrip sisi klien. Itu dijalankan di sisi klien oleh browser web yang mendukung JavaNaskah.JavaKode skrip hanya berfungsi di browser yang memiliki JavaSkrip diaktifkan.

XML adalah akronim untuk Extensible Markup Language. Bahasa ini digunakan untuk mengodekan pesan dalam format yang dapat dibaca manusia dan mesin. Bahasa ini seperti HTML tetapi memungkinkan Anda membuat tag khusus. Untuk detail lebih lanjut tentang XML, lihat artikel di XML

Mengapa menggunakan AJAX?

Hal ini memungkinkan pengembangan aplikasi web interaktif yang kaya seperti aplikasi desktop.
Validasi dapat dilakukan saat pengguna mengisi formulir tanpa mengirimkannya. Hal ini dapat dicapai dengan menggunakan penyelesaian otomatis. Kata-kata yang diketik pengguna dikirimkan ke server untuk diproses. Server merespons dengan kata kunci yang sesuai dengan yang dimasukkan pengguna.
Dapat digunakan untuk mengisi kotak dropdown tergantung pada nilai kotak dropdown lainnya
Data dapat diambil dari server dan hanya bagian tertentu dari halaman yang diperbarui tanpa memuat seluruh halaman. Ini sangat berguna untuk bagian halaman web yang memuat hal-hal seperti
Tweets
Komentar
Pengguna yang mengunjungi situs, dll.

Cara Membuat Aplikasi PHP Ajax

Kami akan membuat aplikasi sederhana yang memungkinkan pengguna mencari framework PHP MVC yang populer.

Aplikasi kita akan memiliki kotak teks tempat pengguna mengetikkan nama kerangka kerja.

Kami kemudian akan menggunakan mvc AJAX untuk mencari kecocokan kemudian menampilkan nama lengkap framework tepat di bawah formulir pencarian.

Langkah 1) Membuat halaman indeks

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>

SINI,

“onkeyup=”showName(this.value)”” mengeksekusi JavaFungsi skrip showName setiap kali tombol diketik di kotak teks. Fitur ini disebut pelengkapan otomatis

Langkah 2) Membuat halaman kerangka kerja

kerangka kerja.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;

?>

Langkah 3) Membuat skrip 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();

}

SINI,

“if (str.length == 0)” periksa panjang string. Jika nilainya 0, maka skrip lainnya tidak dijalankan.
“if (window.XMLHttpRequest)…” Internet Explorer versi 5 dan 6 menggunakan ActiveXObject untuk implementasi AJAX. Versi dan browser lain seperti Chrome, FireFox gunakan XMLHttpRequest. Kode ini akan memastikan bahwa aplikasi kita berfungsi di IE 5 & 6 serta IE dan browser versi tinggi lainnya.
“xmlhttp.onreadystatechange=function…” memeriksa apakah interaksi AJAX selesai dan statusnya 200 lalu memperbarui rentang txtName dengan hasil yang dikembalikan.

Langkah 4) Menguji aplikasi PHP Ajax kami

Dengan asumsi Anda telah menyimpan file index.php Di phututs/ajax, telusuri ke URL http://localhost/phptuts/ajax/index.php

Ketik huruf C di kotak teks Anda akan mendapatkan hasil berikut.

Contoh di atas menunjukkan konsep AJAX dan bagaimana hal itu dapat membantu kita membuat aplikasi interaksi yang kaya.

Ringkasan

AJAX adalah akronim untuk Asynchronous JavaNaskah dan XML
AJAX adalah teknologi yang digunakan untuk membuat aplikasi interaksi kaya yang mengurangi interaksi antara klien dan server dengan hanya memperbarui sebagian halaman web.
Internet Explorer versi 5 dan 6 menggunakan ActiveXObject untuk mengimplementasikan operasi AJAX.
Internet explorer versi 7 ke atas dan browser Chrome, Firefox, Opera, dan Safari menggunakan XMLHttpRequest.