AJAX et PHP
Explication des exemples - Page HTML
Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera exécutée. Cette fonction est déclenchée par l'événement "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>Explication du code source :
Si la zone de saisie est vide (str.length == 0), cette fonction effacera le contenu de l'espace réservé txtHint et quittera la fonction.
Si la zone de saisie n'est pas vide, alors showHint() effectuera les étapes suivantes?:
·?? Créer un objet XMLHttpRequest
·? Créer une fonction à exécuter lorsque le la réponse du serveur est prête
·???Envoyer une requête au fichier sur le serveur
·???Veuillez faire attention au paramètre (q) ajouté à la fin de l'URL (contient le contenu de l'entrée box)
Fichier PHP
La page du serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "gethint.php".
Le code source dans "gethint.php" vérifie le tableau de noms et renvoie le nom correspondant au navigateur?:
<?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";
//從請(qǐng)求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;
?>Explication?: Si JavaScript envoie du texte (c'est-à-dire strlen($q ) > ; 0), puis?:
1. Recherchez les noms correspondant aux caractères envoyés par JavaScript
2 Si aucune correspondance n'est trouvée, définissez la cha?ne de réponse sur "aucune suggestion"
3. Si un ou plusieurs noms correspondants sont trouvés, définissez la cha?ne de réponse avec tous les noms 4. Envoyez la réponse à l'espace réservé "txtHint"
.
