Pengantar Panggilan Ajax

Diterbitkan: 2021-11-01

Selamat datang di Pengantar kami untuk Ajax! Pada artikel ini kita akan membahas dasar-dasar Ajax dan bagaimana menggunakannya dalam contoh dunia nyata. Kami juga akan melihat contoh panggilan Ajax-PHP. Meskipun kami telah melakukan yang terbaik untuk menyederhanakan tutorial ini, pengetahuan tentang Javascript, PHP, dan WordPress sangat penting untuk memahami sepenuhnya apa yang berikut ini. Dengan pemikiran ini, mari kita mulai!

Apa itu Ajax?

Ajax adalah singkatan dari Asynchronous JavaScript and XML.

Ajax bukanlah bahasa pemrograman, tetapi serangkaian teknik yang menggabungkan teknologi web yang ada untuk membuat aplikasi web yang lebih baik.

Meningkatkan Situs Web dengan Ajax

Ajax memiliki banyak kegunaan. Di antaranya, salah satu fungsi teratas adalah panggilan Ajax. Panggilan Ajax memungkinkan situs web memperbarui sebagian kontennya atas tindakan pengguna tanpa perlu memuat ulang halaman. Dengan demikian, berbeda dengan permintaan HTTP biasa, kami tidak perlu menunggu respons server untuk terus berinteraksi dengan situs web.

Secara tradisional, permintaan HTTP dibuat ke server web dan setelah diproses, server mengembalikan output yang diperbarui dalam pemuatan halaman baru. Dalam permintaan Ajax, urutan tindakan ini terjadi di belakang layar, secara tidak sinkron, sehingga pengguna tidak terganggu. Itu meningkatkan interaktivitas dan daya tanggap dan membuat situs web lebih dinamis.

Bagaimana Fungsi Panggilan Ajax?

Panggilan Ajax dimulai dengan pengguna akhir melakukan tindakan di ujung depan situs web (misalnya, mengklik tombol). Saat tindakan itu dilakukan, peristiwa Javascript dipicu dan pendengarnya memanggil fungsi.

Di dalam fungsi, panggilan Ajax diaktifkan dan, dengan bantuan XML, informasi dikemas dan permintaan dikirim ke skrip server.

CATATAN: Saat ini, di hampir semua kesempatan, JSON lebih disukai daripada XML karena lebih cepat, lebih mudah dibaca dan diprogram, dan banyak lagi.

Di dalam skrip, permintaan diproses dengan bantuan bahasa skrip sisi server seperti PHP, Java, Ruby, Python, dll.

Respons dikirim kembali ke klien, dan fungsi panggilan balik memperbarui bagian konten yang sesuai dengan data yang diterima.

Mari kita lihat bagaimana ini bekerja dalam sebuah contoh

Contoh Panggilan Ajax Sederhana

Mari kita buat aplikasi Pencarian yang memungkinkan Anda melihat hasil pencarian secara real time saat mencari melalui daftar judul artikel.

Kami akan menggunakan PHP sebagai bahasa skrip sisi server, dan akan memandu Anda melalui ini, dari sudut pandang pengguna akhir.

Langkah 1: Formulir HTML

Pertama, kita membutuhkan kotak teks yang akan diisi pengguna dengan teks dan tempat untuk menampilkan hasilnya. Jadi mari kita buat formulir HTML sederhana dan elemen yang akan menampilkan hasilnya.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Langkah 2: Fungsi Javascript

Saat pengguna memasukkan teks, kami ingin melihat hasil waktu nyata, jika tersedia. Kami akan menggunakan event Javascript onkeyup yang menjalankan fungsi saat pengguna melepaskan kunci pada keyboard.

Fungsi harus mendapatkan teks saat ini sebagai parameter untuk melanjutkan proses.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Mari kita isi fungsinya.

Langkah 3: Permintaan

Di dalam fungsi, pertama-tama kita harus membuat objek XMLHttpRequest untuk berinteraksi dengan server dan kemudian memanggil fungsi lain yang akan melakukan sesuatu dengan nilai yang diteruskan dalam fungsi foundArticles() kita.

Dalam proses yang dijelaskan di atas, interaksi dengan server diselesaikan dengan menggunakan pengendali peristiwa perubahan status Javascript XMLHttpRequest.onready , yang dipanggil saat properti readyState diubah. Mari kita perjelas langkah-langkah ini lebih lanjut:.

  • Properti readyState mengembalikan status XMLHttpRequest tempat klien berada.
  • Kapanpun readyState berubah, event readystatechange akan diaktifkan.
  • Properti onreadystatechange berisi event handler yang akan dipanggil saat event readystatechange diaktifkan.

Langkah 4: Apa yang harus dilakukan dengan permintaan

Sekarang, kita perlu melakukan sesuatu saat operasi selesai, dan setelah berkonsultasi dengan status apa yang tersedia, kita menyetelnya ke status 4.

Jadi, ketika operasi selesai, teks di dalam elemen HTML dengan id txtHint harus diganti dengan respons server. Ini adalah saat kita harus menggunakan properti responseText , yang mengembalikan teks yang diterima dari server setelah permintaan dikirim.

Sekarang mari tambahkan kode di dalam fungsi foundArticles() yang sesuai dengan apa yang baru saja kita jelaskan di atas.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

CATATAN: Kami harus menunjukkan di sini bahwa merender HTML seperti ini, tanpa menghindarinya, adalah praktik yang buruk dari segi keamanan dan kami hanya melakukan ini demi tutorial ini agar kode dibuat sesederhana mungkin. Untuk amannya, jangan gunakan kode apa pun yang disediakan dalam artikel ini untuk penggunaan di dunia nyata!

Selanjutnya kita harus mengirim permintaan ke server dan menggunakan data yang dikembalikan.

Langkah 5: Data

Dalam contoh ini data akan disimpan dalam file PHP. Kami membuat file data.php di bawah folder yang sama dan menyertakan kode berikut:

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Jangan bingung tentang $req = $_REQUEST["req"]; garis. Beginilah cara skrip mengambil kueri di dalam file custom.js yang akan segera kita lihat.

Langkah 6: Metode Permintaan

Kami akan menggunakan metode open() dari objek XMLHttpRequest kami untuk menginisialisasi permintaan, dan metode send() untuk bertukar data dengan server.

Parameter yang kami gunakan untuk metode open() adalah:

  • Metode. Artinya metode permintaan HTTP ( “GET”, “POST”, “PUT”, “DELETE” dll).
  • URL tujuan pengiriman permintaan.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Seperti yang Anda lihat, metode open() menginisialisasi permintaan GET ke "data.php?req=" + URL str.

URL kemudian akan digunakan oleh $req = $_REQUEST[“req”]; variabel di dalam file data.php untuk mengambil nilainya.

Mari kita lihat visual dari contoh permintaan:

Pada titik ini formulir harus berfungsi dengan baik. Jika Anda masuk, misalkan kata "kursus" hasilnya harus:

“Kursus Bahasa C”,
“Kursus C++”,
“Kursus CSS3”,
“kursus JAWA”.

Kesimpulan

Ini adalah contoh dari contoh permintaan Ajax yang sangat sederhana yang merupakan teknik yang sangat populer untuk digunakan saat membangun situs web. Meskipun sederhana, semoga, kami membawa Anda lebih dekat untuk memahami perutean dalam permintaan semacam itu dan ini dapat membantu Anda memulai pengkodean Anda sendiri. Di artikel berikutnya, kami akan mengunjungi kembali Ajax, di lingkungan WordPress, jadi pantau terus!