Tutoriel de base sur le développement PHP Recherche en temps réel AJAX
Recherche en temps réel AJAX
AJAX peut offrir aux utilisateurs une expérience de recherche plus conviviale et interactive.
Exemple
Dans l'exemple suivant, nous allons démontrer une recherche en temps réel, et les résultats de la recherche peuvent être obtenus pendant que vous tapez le données .
La recherche en temps réel présente de nombreux avantages par rapport à la recherche traditionnelle?:
Lorsque les données sont saisies, les résultats correspondants seront affichés
Pendant que 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
L'effet de sortie est comme indiqué à droite
Les résultats de l'exemple ci-dessus sont recherchés dans un fichier XML (3.xml). Pour garder cet exemple petit et simple, nous ne fournissons que 6 résultats.
Cet exemple comprend trois parties
Page de formulaire HTML
Fichier PHP
-
Fichier XML
Page de formulaire HTML
Le code source 1.php est le suivant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showResult(str)
{
//如果輸入框是空的（str.length==0），該函數(shù)會清空 livesearch 占位符的內(nèi)容，并退出該函數(shù)
if (str.length==0)
{
document.getElementById("livesearch").innerHTML="";
document.getElementById("livesearch").style.border="0px";
return;
}
//輸入框不是空的，則showResult() 會執(zhí)行以下代碼
//創(chuàng)建 XMLHttpRequest 對象
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 瀏覽器執(zhí)行
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//創(chuàng)建在服務器響應就緒時執(zhí)行的函數(shù)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("livesearch").innerHTML=xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
//向服務器上的文件發(fā)送請求
xmlhttp.open("GET","2.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<!-- 鍵盤按鍵被松開時onkeyup 事件發(fā)生 ,調(diào)用showResult()函數(shù)-->
<form>
<p>在下面的文本框中輸入 "HTML"，搜索包含 HTML 的頁面：</p>
<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), cette fonction effacera le contenu de l'espace réservé livesearch et quittera le 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écutée lorsque la réponse du serveur est prête
Envoyer une requête à un fichier sur le serveur
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (y compris le contenu de la zone de saisie)
Fichier PHP
Le serveur appelé par JavaScript dans le paragraphe ci-dessus La page est un fichier PHP nommé "2.php".
Le code source dans "2.php" recherchera dans le fichier XML les titres qui correspondent à la cha?ne de recherche et renverra les résultats?:
Voir 2.php pour le code source
<?php
//創(chuàng)建XML DOM對象
$xmlDoc=new DOMDocument();
//加載XML文件到新的XML DOM對象
$xmlDoc->load("3.xml");
//將標簽名為“l(fā)ink”的對象的集合賦值給$x
$x=$xmlDoc->getElementsByTagName('link');
// 從 URL 中獲取參數(shù) q 的值
$q=$_GET["q"];
// 如果 q 參數(shù)存在則從 xml 文件中查找數(shù)據(jù)
if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
{
$y=$x->item($i)->getElementsByTagName('title');
$z=$x->item($i)->getElementsByTagName('url');
if ($y->item(0)->nodeType==1)//元素的節(jié)點類型，1：元素節(jié)點，2：屬性節(jié)點
{
// 找到匹配搜索的鏈接
if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
{
if ($hint=="")
{
$hint="<a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
else
{
$hint=$hint . "<br /><a href='" .
$z->item(0)->childNodes->item(0)->nodeValue .
"' target='_blank'>" .
$y->item(0)->childNodes->item(0)->nodeValue . "</a>";
}
}
}
}
}
// 如果沒找到則返回 "no suggestion"
if ($hint=="")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
echo $response;// 輸出結(jié)果
?> Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), que se passe-t-il?:
PHP crée un objet XML DOM du fichier "links.xml"
Parcourez tous les éléments <title> (nodetypes = 1) pour trouver le texte qui correspond au texte passé par JavaScript
Trouvez le lien contenant le titre correct et définissez-le. Pour la variable "$response", si plus d'une correspondance est trouvée, toutes les correspondances sont ajoutées à la variable.
Si aucune correspondance n'est trouvée, définissez la variable $response sur "aucune suggestion".
$response est la sortie envoyée à l'espace réservé "livesearch"
Fichier XML
Voir 3.php
pour le code source<?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a 標簽</title> <url>http://ipnx.cn/tags/tag-a.html</url> </link> <link> <title>HTML br 標簽</title> <url>http://ipnx.cn/tags/tag-br.html</url> </link> <link> <title>CSS background 屬性</title> <url>http://ipnx.cn/cssref/css3-pr-background.html</url> </link> <link> <title>CSS border 屬性</title> <url>http://ipnx.cn/cssref/pr-border.html</url> </link> <link> <title>JavaScript Date 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-date.html</url> </link> <link> <title>JavaScript Array 對象</title> <url>http://ipnx.cn/jsref/jsref-obj-array.html</url> </link> </pages>
Expérience d'apprentissage
Cet exemple comprend principalement les points de connaissances suivants?:
Bases du formulaire
événement onkeyup?: Se produit lorsque la touche du clavier est relachée
Appel de fonction, passage de valeur de fonction
Création d'un objet AJAX XMLHttpRequest, réponse du serveur Fonctions exécutées lors de l'exécution, envoi de requêtes aux fichiers sur le serveur?: voir 1-5 pour l'expérience d'apprentissage
Méthode HTML DOM getElementById()?: renvoie la valeur du premier objet avec l'ID de référence spécifié
l Connaissances liées à XML
Créer un objet XML DOM
Charger un fichier XML dans un nouveau XML DOM object
Récupère l'objet d'un nom de balise spécifique?: getElementsByTagName()
Récupère la collection de sections enfants d'un élément spécifique?: HTML DOM childNodes
Récupère la valeur du n?ud du premier élément bouton?: HTML DOM nodeValue
Renvoie le premier n?ud enfant de l'élément?: HTML DOM item ( ) méthode
Fonctions associées?:
Strlen()?: renvoie la longueur de la cha?ne
Stristr() : Recherche la première occurrence d'une cha?ne dans une autre cha?ne
