AJAX dan PHP
Penjelasan contoh - halaman HTML
Apabila pengguna menaip aksara dalam kotak input di atas, fungsi "showHint()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup":
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行的代碼
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 瀏覽器執(zhí)行的代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p><b>在輸入框中輸入一個(gè)姓名:</b></p>
<form>
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>Penjelasan kod sumber:
Jika kotak input kosong (str.length == 0), fungsi ini akan mengosongkan kandungan pemegang tempat txtHint dan keluar dari fungsi.
Jika kotak input tidak kosong, maka showHint() akan melaksanakan langkah berikut:
·?? Cipta objek XMLHttpRequest
·? Cipta fungsi untuk dilaksanakan apabila respons pelayan sedia
·???Hantar permintaan kepada fail pada pelayan
·???Sila beri perhatian kepada parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan input box)
Fail PHP
Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "gethint.php".
Kod sumber dalam "gethint.php" menyemak tatasusunan nama dan mengembalikan nama yang sepadan kepada penyemak imbas:
<?php
// 將姓名填充到數(shù)組中
$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";
//從請求URL地址中獲取 q 參數(shù)
$q=$_GET["q"];
//查找是否由匹配值， 如果 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];
}
}
}
}
// 如果沒有匹配值設(shè)置輸出為 "no suggestion"
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//輸出返回值
echo $response;
?>Penjelasan: Jika JavaScript menghantar sebarang teks (iaitu strlen($q ) > ; 0), kemudian:
1 Cari nama yang sepadan dengan aksara yang dihantar oleh JavaScript
2 Jika tiada padanan ditemui, tetapkan rentetan respons kepada "tiada cadangan"
3. Jika satu atau lebih nama yang sepadan ditemui, tetapkan rentetan respons dengan semua nama
4 Hantar respons kepada pemegang tempat "txtHint"
