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），该函数会清空 livesearch 占位符的内容，并退出该函数
	if (str.length==0)
	{ 
		document.getElementById("livesearch").innerHTML="";
		document.getElementById("livesearch").style.border="0px";
		return;
	}
	//输入框不是空的，则showResult() 会执行以下代码
	//创建 XMLHttpRequest 对象
	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","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<!-- 键盘按键被松开时onkeyup 事件发生 ,调用showResult()函数-->
<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
//创建XML DOM对象
$xmlDoc=new DOMDocument();
//加载XML文件到新的XML DOM对象
$xmlDoc->load("3.xml");
//将标签名为“link”的对象的集合赋值给$x
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
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)//元素的节点类型，1：元素节点，2：属性节点
		{
			// 找到匹配搜索的链接
			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;// 输出结果
?>

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://www.php.cn/tags/tag-a.html</url>
</link>
<link>
<title>HTML br 标签</title>
<url>http://www.php.cn/tags/tag-br.html</url>
</link>
<link>
<title>CSS background 属性</title>
<url>http://www.php.cn/cssref/css3-pr-background.html</url>
</link>
<link>
<title>CSS border 属性</title>
<url>http://www.php.cn/cssref/pr-border.html</url>
</link>
<link>
<title>JavaScript Date 对象</title>
<url>http://www.php.cn/jsref/jsref-obj-date.html</url>
</link>
<link>
<title>JavaScript Array 对象</title>
<url>http://www.php.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 relâché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

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showResult(str) { //如果输入框是空的（str.length==0），该函数会清空 livesearch 占位符的内容，并退出该函数 if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } //输入框不是空的，则showResult() 会执行以下代码 //创建 XMLHttpRequest 对象 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","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body>  <form> <p>在下面的文本框中输入 "HTML"，搜索包含 HTML 的页面：</p> <input type="text" size="30" onkeyup="showResult(this.value)"> <div id="livesearch"></div> </form> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Tutoriel de base sur le développement PHP Recherche en temps réel AJAX

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]