Permintaan AJAX dan PHP

Permintaan AJAX

Dalam contoh AJAX di bawah ini, kita akan menunjukkan bagaimana halaman web berkomunikasi dengan server web online saat pengguna memasukkan data ke formulir web.

Masukkan nama di kotak teks di bawah ini:

Saran:

Contoh ini termasuk tiga halaman:

  • Formulir HTML sederhana
  • Bagian JavaScript
  • Halaman PHP

Formulir HTML

Ini adalah formulir HTML.<br>Hal ini termasuk formulir HTML sederhana dan tautan ke JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Nama Depan:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Saran: <span id="txtHint"></span></p>
</body>
</html>

Contoh penjelasan - Formulir HTML

Seperti yang Anda lihat, halaman HTML di atas mengandung formulir HTML sederhana yang memiliki bidang input dengan nama "txt1".

Kerjaan formulir ini adalah:

  1. Ketika pengguna menekan dan melepaskan tombol di dalam area input, akan diaktifkan peristiwa
  2. Ketika peristiwa ini diaktifkan, eksekusi fungsi yang dinamai showHint()
  3. Di bawah formulir ada <span> yang dinamai "txtHint".<br>Hal ini digunakan sebagai placeholder untuk data yang dikembalikan oleh fungsi showHint().

JavaScript

Kode JavaScript disimpan di berkas "clienthint.js", yang dihubungkan ke dokumen HTML:

var xmlHttp
fungsi showHint(str)
{
jika (panjang_str==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser tidak mendukung permintaan HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Pengertian contoh:

Fungsi showHint()

Setiap kali ada karakter yang dimasukkan ke domain input, fungsi ini akan dijalankan sekali

Jika ada konten di kotak teks (str.length > 0), fungsi ini akan dijalankan seperti ini:

  1. Tentukan URL (nama berkas) yang akan dikirim ke server
  2. Tambahkan parameter (q) yang berisi konten input domain ke URL ini
  3. Tambahkan angka acak untuk mencegah server menggunakan berkas cache
  4. Panggil fungsi GetXmlHttpObject untuk membuat objek XMLHTTP, dan beritahu objek menjalankan fungsi bernama stateChanged saat peristiwa diaktifkan
  5. Buka objek XMLHTTP menggunakan URL yang diberikan
  6. Mengirim permintaan HTTP ke server

Jika domain input kosong, fungsi hanya mengosongkan konten penanda txtHint.

Fungsi stateChanged()

Ketika status objek XMLHTTP berubah, lakukan fungsi ini。

Ketika status menjadi 4 (atau "complete") penuhkan penanda txtHint dengan teks respons.

Fungsi GetXmlHttpObject()

Aplikasi AJAX hanya dapat berjalan di browser web yang mendukung XML penuh。

Kode di atas memanggil fungsi yang dinamai GetXmlHttpObject()。

Fungsi ini digunakan untuk memecahkan masalah membuat objek XMLHTTP yang berbeda untuk browser yang berbeda。

Hal ini telah dijelaskan di bab sebelumnya。

Halaman PHP

页面 server yang dipanggil oleh kode JavaScript adalah halaman server sederhana yang dinamai "gethint.php"。

"gethint.php" 中的代码会检查名字数组，然后向客户端返回对应的名字：

<?php
//isi array dengan nama-nama
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//mendapatkan parameter q dari URL
$q=$_GET["q"];
//carikan semua petunjuk dari array jika panjang q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
  {
  if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
    {
    if ($hint=="")
      {
      $hint=$a[$i];
      }
    else
      {
      $hint=$hint." , ".$a[$i];
      }
    }
  }
}
//Set output to "no suggestion" if no hint were found
//or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>

Jika ada teks yang dikirimkan dari JavaScript (strlen($q) > 0), maka:

  1. Temukan nama yang cocok dengan karakter yang dikirimkan JavaScript
  2. Jika menemukan banyak nama, masukkan semua nama ke dalam string response
  3. Jika tidak menemukan nama yang cocok, atur response menjadi "no suggestion"
  4. Jika menemukan satu atau lebih nama, atur response menjadi nama-nama tersebut
  5. Kirim response ke placeholder "txtHint"