Apa itu Ajax?
Bentuk lengkap AJAX adalah Asynchronous JavaScript & XML. Ini adalah teknologi yang mengurangi interaksi antara server dan klien. Ini dilakukan dengan memperbarui hanya sebagian dari halaman web daripada seluruh halaman. Interaksi asynchronous diprakarsai oleh JavaScript. Tujuan AJAX adalah untuk menukar sejumlah kecil data dengan server tanpa penyegaran halaman.
JavaScript adalah bahasa skrip sisi klien. Ini dijalankan di sisi klien oleh browser web yang mendukung JavaScript. Kode JavaScript hanya berfungsi di browser yang mengaktifkan JavaScript.
XML adalah singkatan dari Extensible Markup Language. Ini digunakan untuk menyandikan pesan dalam format yang dapat dibaca manusia dan mesin. Ini seperti HTML tetapi memungkinkan Anda membuat tag kustom Anda. Untuk detail selengkapnya tentang XML, lihat artikel di XML
Mengapa menggunakan AJAX?
- Ini memungkinkan pengembangan aplikasi web interaktif yang kaya seperti aplikasi desktop.
- Validasi dapat dilakukan saat pengguna mengisi formulir tanpa mengirimkannya. Ini dapat dicapai dengan menggunakan penyelesaian otomatis. Kata-kata yang diketik pengguna dikirimkan ke server untuk diproses. Server merespon dengan kata kunci yang cocok dengan apa yang dimasukkan pengguna.
- Ini dapat digunakan untuk mengisi kotak dropdown tergantung pada nilai kotak dropdown lain
- 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
- Tweet
- Komens
- Pengguna mengunjungi situs, dll.
Cara Membuat aplikasi PHP Ajax
Kami akan membuat aplikasi sederhana yang memungkinkan pengguna untuk mencari kerangka kerja PHP MVC populer.
Aplikasi kita akan memiliki kotak teks yang akan diketik pengguna dalam nama kerangka kerja.
Kami kemudian akan menggunakan mvc AJAX untuk mencari kecocokan kemudian menampilkan nama lengkap kerangka kerja tepat di bawah formulir pencarian.
Langkah 1) Membuat halaman indeks
Index.php
PHP MVC Frameworks - Search Engine PHP MVC Frameworks - Search Engine
Type the first letter of the PHP MVC Framework
Matches:
SINI,
-
“Onkeyup =" showName (this.value) "” menjalankan fungsi JavaScript showName setiap kali kunci diketik di kotak teks.
Fitur ini disebut pelengkapan otomatis
Langkah 2) Membuat halaman kerangka kerja
frameworks.php
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 textboxdocument.getElementById("txtName").innerHTML; //clear previous resultsreturn;}if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp=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 sisa skrip tidak akan dieksekusi.
- “If (window.XMLHttpRequest)…” Internet Explorer versi 5 dan 6 menggunakan ActiveXObject untuk implementasi AJAX. Versi dan browser lain seperti Chrome, FireFox menggunakan XMLHttpRequest. Kode ini akan memastikan bahwa aplikasi kita berfungsi baik di IE 5 & 6 serta versi IE dan browser lainnya yang lebih tinggi.
- “Xmlhttp.onreadystatechange = function…” memeriksa apakah interaksi AJAX selesai dan statusnya adalah 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 sebagai berikut.
Contoh di atas mendemonstrasikan konsep AJAX dan bagaimana AJAX dapat membantu kita membuat aplikasi interaksi yang kaya.
Ringkasan
- AJAX adalah singkatan dari Asynchronous JavaScript and XML
- AJAX adalah teknologi yang digunakan untuk membuat aplikasi interaksi kaya yang mengurangi interaksi antara klien dan server dengan hanya memperbarui bagian 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.