Tutorial PHP Ajax beserta Contohnya

Apa itu Ajax?

AJAX singkatan dari Asynchronous JavaNaskah & XML. Ini adalah teknologi yang mengurangi interaksi antara server dan klien. Hal ini dilakukan dengan hanya memperbarui sebagian halaman web, bukan seluruh halaman. Interaksi asinkron dimulai oleh JavaSkrip. Tujuan AJAX adalah untuk bertukar sejumlah kecil data dengan server tanpa memuat ulang halaman.

JavaNaskah adalah bahasa skrip sisi klien. Bahasa ini dieksekusi di sisi klien oleh peramban web yang mendukungnya. JavaNaskah. JavaKode skrip hanya berfungsi di browser yang memiliki JavaSkrip diaktifkan.

XML XML adalah singkatan dari Extensible Markup Language. Bahasa ini digunakan untuk mengkodekan pesan dalam format yang dapat dibaca manusia dan mesin. XML mirip dengan HTML tetapi memungkinkan Anda untuk membuat tag kustom sendiri. Untuk detail lebih lanjut tentang XML, lihat artikel tentang XML. XML.

Mengapa menggunakan AJAX?

• Ini memungkinkan pengembanganping Aplikasi web yang kaya fitur dan interaktif, sama seperti aplikasi desktop.
• Validasi dapat dilakukan saat pengguna mengisi formulir tanpa mengirimkannya. Hal ini dapat dicapai dengan menggunakan fitur pelengkapan otomatis. Kata-kata yang diketik pengguna dikirim ke server untuk diproses, dan server merespons dengan kata kunci yang sesuai dengan apa yang dimasukkan pengguna.
• Ini dapat digunakan untuk mengisi kotak dropdown berdasarkan nilai dari 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, dan data langsung serupa lainnya.

Cara Membuat Aplikasi PHP Ajax

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

Aplikasi kami akan memiliki kotak teks tempat pengguna mengetikkan nama-nama framework.

Selanjutnya, kami akan menggunakan AJAX untuk mencari kecocokan, lalu menampilkan nama lengkap framework tersebut 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 akan dijalankan setiap kali tombol diketik di kotak teks. Fitur ini disebut pelengkapan otomatis (auto complete).

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)” memeriksa panjang string. Jika panjangnya 0, maka bagian skrip selanjutnya tidak akan dieksekusi.
• “if (window.XMLHttpRequest)…” Internet Explorer versi 5 dan 6 menggunakan ActiveXObject untuk implementasi AJAX. Versi dan browser lain seperti Chrome dan Firefox Gunakan XMLHttpRequest. Kode ini memastikan aplikasi kita berfungsi di IE 5 & 6 dan browser modern lainnya.
• “xmlhttp.onreadystatechange=function…” memeriksa apakah interaksi AJAX telah selesai dan statusnya adalah 200, kemudian memperbarui span txtName dengan hasil yang dikembalikan.

Langkah 4) Menguji aplikasi PHP Ajax kami

Dengan asumsi Anda telah menyimpan file index.php di phptuts/ajax, buka halaman tersebut. 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 AJAX dapat membantu kita menciptakan aplikasi yang kaya dan interaktif.

AJAX modern dengan Fetch API

Objek XMLHttpRequest di atas masih berfungsi, tetapi cabang ActiveXObject-nya untuk Internet Explorer lama tidak lagi diperlukan. Browser modern menyediakan API Fetch berbasis promise, yang melakukan permintaan yang sama dengan kode yang jauh lebih sedikit.

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;
        });
}

Versi ini melakukan pekerjaan yang sama: mengirimkan teks yang diketik ke frameworks.php dan menempatkan respons ke dalam span txtName. Ia juga menggunakan encodeURIComponent untuk melakukan escaping input dengan aman, dan rantai promise-nya mudah diperluas dengan penanganan kesalahan menggunakan blok catch.

Pertanyaan Umum Demo Slot