AJAX dapat digunakan untuk berkomunikasi secara interaktif dengan database.
Contoh basis data AJAX
Contoh berikut akan menunjukkan bagaimana halaman web membaca informasi dari database melalui AJAX:
File SQL tabel Situs Web yang digunakan dalam tutorial ini: situs web.sql.
Contoh penjelasannya adalah database MySQL
Pada contoh di atas, tabel database yang kita gunakan terlihat seperti ini:
mysql> pilih * dari situs web;+----+--------------+---------------------- -----+-------+---------+|.nama |.url |. -----+------------+-------+-------- -+|.1 |.Google |.https://www.taobao.com/ |.1 |.AS ||.2 | http://www.codercto.com/ |.4689 |.CN ||.4 |.http://weibo.com/ | |. AS |+----+--------------+------------------------- - -+-------+---------+5 baris dalam set (0,01 detik)
Contoh penjelasannya adalah halaman HTML
Ketika pengguna memilih pengguna dalam daftar drop-down di atas, fungsi bernama "showSite()" dijalankan. Fungsi ini dipicu oleh peristiwa "onchange":
kode file test.html:
< ! html > <html> <kepala> < meta rangkaian karakter = " utf-8 " > <title> Tutorial Pembuat Kode ( codercto.com ) </title> fungsi <skrip> tampilkanSitus ( str ) { jika ( str == " " ) { dokumen .getElementById ( " txtHint " ) innerHTML = " " ; jika ( jendela .XMLHttpRequest ) { // IE7+, Firefox, Chrome, Opera, kode eksekusi browser Safari xmlhttp = baru XMLHttpPermintaan ( ) ; kalau tidak { // IE6, kode eksekusi browser IE5 xmlhttp = baru ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = fungsi ( ) { jika ( xmlhttp .readyState == 4 && xmlhttp .status == 200 ) { dokumen .getElementById ( " txtHint " ) innerHTML = xmlhttp . } xmlhttp terbuka ( " DAPATKAN " , " getsite_mysql.php ?q = " + str , benar ) ; xmlhttp kirim ( ) } < / skrip > </kepala> <tubuh> <bentuk> < pilih nama = " pengguna " onchange = " showSite(ini.nilai) " > < pilihan value = " " > Pilih situs web: </ opsi > < pilihan nilai = " 1 " > Google </ opsi > < pilihan nilai = " 2 " > Taobao </ opsi > < pilihan value = " 3 " > Tutorial Pembuat Kode </ opsi > < pilihan nilai = " 4 " > weibo </ opsi > < pilihan nilai = " 5 " > Facebook </ opsi > </pilih> </bentuk> <br> < div id = " txtHint " > < b > Informasi situs web ditampilkan di sini... </ b > </ div > </tubuh> </html> Fungsi showSite() melakukan langkah-langkah berikut:
Periksa apakah situs web dipilih
Buat objek XMLHttpRequest
Buat fungsi yang dijalankan ketika respons server siap
Kirim permintaan ke file di server
Harap perhatikan parameter (q) yang ditambahkan ke akhir URL (berisi konten daftar drop-down)
file PHP
Halaman server yang dipanggil di atas melalui JavaScript adalah file PHP bernama "getsite_mysql.php".
Kode sumber di "getsite_mysql.php" menjalankan kueri terhadap database MySQL dan mengembalikan hasilnya dalam tabel HTML:
kode file getsite_mysql.php:
<?php $ q = isset ( $ _GET [ " q " ] ) ? intval ( $ _GET [ " q " ] ) : ' ' ; { gema ' Silakan pilih situs web ' ; keluar ; $ con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) jika ( ! $kon ) { die ( ' Tidak dapat terhubung : ' .mysqli_error ( $ con ) ) } // Pilih basis data mysqli_select_db ( $con , " test " ) ; // Menyetel pengkodean untuk mencegah karakter Cina yang kacau mysqli_set_charset ( $ con , " utf8 " ) ; $ sql = " PILIH * DARI Situs Web WHERE id = ' " . $ q " <table border='1'><tr><th>ID</th><th>Nama Situs Web</th><th>URL Situs Web</th><th>Peringkat Alexa</th><th> Negara</th></tr> " ; while ( $row = mysqli_fetch_array ( $hasil ) ) { gema " <tr> " ; " <td> "" <td> " . $ baris [ ' nama ' ]" <td> "" <td> " . $ baris [ ' alexa ' ]" <td> " . $ baris [ ' negara ' ]" </tr> " ; gema " </tabel> " ; mysqli_close ( $con ) ? > Penjelasan: Ketika query dikirim dari JavaScript ke file PHP, apa yang terjadi:
PHP membuka koneksi ke database MySQL
Temukan pengguna yang dipilih
Buat tabel HTML, isi dengan data, dan kirim kembali placeholder "txtHint".
