Maison > Article > développement back-end > Exemple PHP - Connaissance de la recherche en temps réel AJAX

Exemple PHP - Connaissance de la recherche en temps réel AJAX

jackloveoriginal: 2018-05-07 15:03:531236parcourir

AJAX peut offrir aux utilisateurs une expérience de recherche plus conviviale et interactive. Cet article expliquera les connaissances pertinentes de la recherche en temps réel AJAX.

AJAX Live Search

Dans l'exemple suivant, nous démontrerons une recherche en temps réel, et les résultats de la recherche peuvent être obtenus pendant que vous tapez les données.

Par rapport à la recherche traditionnelle, la recherche en temps réel présente de nombreux avantages :

Lors de la saisie de données, les résultats correspondants seront affichés

Lorsque vous continuez à saisir des données, filtrez les résultats

S'il y a trop peu de résultats, supprimez des caractères pour obtenir une plage plus large

Entrez "HTML" dans la zone de texte ci-dessous pour rechercher des pages contenant du HTML :

Les résultats dans l'exemple ci-dessus se trouvent dans un fichier XML (links.xml). Pour garder cet exemple petit et simple, nous ne fournissons que 6 résultats.

Explication des exemples - Page HTML

Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, la fonction "showResult()" sera exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :

<html><head><script>function showResult(str){    if (str.length==0)    {         document.getElementById("livesearch").innerHTML="";        document.getElementById("livesearch").style.border="0px";        return;    }    if (window.XMLHttpRequest)    {// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行        xmlhttp=new XMLHttpRequest();    }    else    {// IE6, IE5 浏览器执行        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");    }    xmlhttp.onreadystatechange=function()    {        if (xmlhttp.readyState==4 && xmlhttp.status==200)        {            document.getElementById("livesearch").innerHTML=xmlhttp.responseText;            document.getElementById("livesearch").style.border="1px solid #A5ACB2";        }    }    xmlhttp.open("GET","livesearch.php?q="+str,true);    xmlhttp.send();}</script></head><body><form><input type="text" size="30" onkeyup="showResult(this.value)"><div id="livesearch"></div></form></body></html>

Explication du code source :

Si la zone de saisie est vide (str.length==0) , la fonction effacera le contenu de l'espace réservé livesearch et quittera la fonction.

Si la zone de saisie n'est pas vide, alors showResult() effectuera les étapes suivantes :

Créer un objet XMLHttpRequest

Créer une fonction à exécuter lorsque le serveur répond est prêt

Envoyer une requête au fichier sur le serveur

Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contient le contenu de la zone de saisie)

Fichier PHP

Le paragraphe ci-dessus La page du serveur appelée via JavaScript est un fichier PHP nommé "livesearch.php". Le code source dans

"livesearch.php" recherche dans le fichier XML les en-têtes qui correspondent à la chaîne de recherche et renvoie les résultats :

<?php
$xmlDoc=new DOMDocument();$xmlDoc->load("links.xml");$x=$xmlDoc->getElementsByTagName(&#39;link&#39;);// 从 URL 中获取参数 q 的值$q=$_GET["q"];// 如果 q 参数存在则从 xml 文件中查找数据if (strlen($q)>0){    $hint="";    for($i=0; $i<($x->length); $i++)    {        $y=$x->item($i)->getElementsByTagName(&#39;title&#39;);        $z=$x->item($i)->getElementsByTagName(&#39;url&#39;);        if ($y->item(0)->nodeType==1)        {            // 找到匹配搜索的链接            if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))            {                if ($hint=="")                {                    $hint="<a href=&#39;" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "&#39; target=&#39;_blank&#39;>" .                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";                }                else                {                    $hint=$hint . "<br /><a href=&#39;" .                     $z->item(0)->childNodes->item(0)->nodeValue .                     "&#39; target=&#39;_blank&#39;>" .                     $y->item(0)->childNodes->item(0)->nodeValue . "</a>";                }            }        }    }}// 如果没找到则返回 "no suggestion"if ($hint==""){    $response="no suggestion";}else{    $response=$hint;}// 输出结果echo $response;?>

si JavaScript est envoyé n'importe quel texte (c'est-à-dire strlen($q) > 0), ce qui se passera est :

Chargez le fichier XML dans un nouvel objet XML DOM

Parcourez tous les éléments b2386ffb911b14667cb8f0f91ea547a7 afin de trouver Faites correspondre le texte passé par JavaScript

Définissez l'URL et le titre corrects dans la variable "$response". Si plusieurs correspondances sont trouvées, toutes les correspondances sont ajoutées à la variable.

Si aucune correspondance n'est trouvée, définissez la variable $response sur "aucune suggestion".

Cet article explique en détail les connaissances liées à la recherche en temps réel AJAX. Pour plus de matériel d'apprentissage, veuillez faire attention au site Web php chinois.

Recommandations associées :

Exemple à propos de PHP - Interaction entre AJAX et XML

À propos de PHP - Interaction entre AJAX et MySQL

À propos de PHP - La connexion entre AJAX et PHP

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：À propos des exemples PHP - Interaction AJAX et XMLArticle suivant：À propos des exemples PHP - Interaction AJAX et XML

Articles Liés

Voir plus