AJax implémente des fonctions similaires à la barre de recherche Baidu

Ce qui suit est l'implémentation ajax d'une simple fonction de barre de recherche Baidu. Lorsque l'utilisateur tape des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera exécutée. Ce qui suit est une introduction très détaillée à travers l'exemple de code ajax. Les amis intéressés par ajax devraient y jeter un œil ensemble

Pendant le stage, j'avais besoin d'utiliser la fonction de soumission asynchrone, j'ai donc essayé de comprendre. ajax et j'ai immédiatement eu l'impression de l'avoir déjà fait. L'apprentissage est vraiment une goutte d'eau dans l'océan. C'est vrai si vous ne connaissez pas jquery et ajax lorsque vous développez des applications Web, c'est vraiment inutile. que toutes les fonctions sophistiquées d'Internet peuvent être réalisées.

Sans plus tarder, voici ajax pour implémenter une simple fonction de barre de recherche Baidu Lorsque l'utilisateur tape 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" :

function showHint(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementByIdx_x("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementByIdx_x("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}

Explication du code source :

Si la zone de saisie est vide (str.length==0), cette fonction efface le contenu de l'espace réservé txtHint et quitte la fonction.

Si la zone de saisie n'est pas vide, la fonction showHint() effectue les tâches suivantes :

Crée un objet XMLHttpRequest

Exécute la fonction lorsque la réponse du serveur est prête

🎜>

Demander un fichier envoyé au serveur

Veuillez noter que nous avons ajouté un paramètre q (avec le contenu de la zone de saisie) à l'URL

Le fichier demandé est écrit en php, bien sûr ce que Tout va bien, il n'y a pas de différence essentielle avec les pages ordinaires :

<?php
// 用名字来填充数组
$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 参数
$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];
}
}
}
}
// 如果未找到提示，则把输出设置为 "no suggestion"
// 否则设置为正确的值
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出响应
echo $response;
?>

J'ai entendu dire que c'était C'est similaire à cela lorsque je suis allé à Baidu pour une interview. Le titre, après l'avoir compris, n'est rien de plus.

Ce qui précède est l'implémentation AJax introduite par l'éditeur pour implémenter des fonctions similaires à la barre de recherche Baidu (principalement vue dans les interviews). J'espère que cela sera utile à tout le monde ! !

Recommandations associées :

Analyse des raisons pour lesquelles ajax obtient des données json comme étant liées à undefined_AJAX

jquery implémente le didacticiel du plug-in de téléchargement asynchrone ajaxfileupload

Explication détaillée d'ajax et de la stratégie de même origine implémentée par JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!