PHP development basic tutorial AJAX real-time search
# Ajax Real -time Search
## Ajax can provide users with a more friendly and interactive search experience.
# Examples
In the example below, we will demonstrate a real -time search. When you type the data .- Real-time search has many advantages over traditional search:
- When data is entered, matching results will be displayed
- As you continue typing data, filter the results
- If there are too few results, delete characters to get a wider range
The output effect is shown on the right
The results in the above example are searched in an XML file (3.xml). To keep this example small and simple, we only provide 6 results. This example includes three parts- HTML form page
##PHP file
-
XML file
HTML form page
Source code 1.php is as follows
<!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)建在服務(wù)器響應(yī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";
}
}
//向服務(wù)器上的文件發(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> Source code explanation:
If the input box is empty (str.length==0), this function will clear the content of the livesearch placeholder and exit the function.
If the input box is not empty, then showResult() will perform the following steps:
Create an XMLHttpRequest object
Create Function executed when the server response is ready
Sends a request to a file on the server
Please note the parameter (q) added to the end of the URL (Including the content of the input box)
PHP file
The server called by JavaScript in the above paragraph The page is a PHP file named "2.php".
The source code in "2.php" will search the XML file for titles that match the search string and return the results:
See 2.php for the source code
<?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é)果
?>If JavaScript sends any text (i.e. strlen($q) > 0), what happens:
PHP creates an XML DOM object of the "links.xml" file
Traverse all <title> elements (nodetypes = 1) to find the text that matches the text passed by JavaScript
Find the link containing the correct title and set it For the "$response" variable, if more than one match is found, all matches are added to the variable.
If no match is found, set the $response variable to "no suggestion".
$response is the output sent to the "livesearch" placeholder
XML file
See 3.php
for the source code<?xml version="1.0" encoding="UTF-8"?> <pages> <link> <title>HTML a 標簽</title> <url>http://miracleart.cn/tags/tag-a.html</url> </link> <link> <title>HTML br 標簽</title> <url>http://miracleart.cn/tags/tag-br.html</url> </link> <link> <title>CSS background 屬性</title> <url>http://miracleart.cn/cssref/css3-pr-background.html</url> </link> <link> <title>CSS border 屬性</title> <url>http://miracleart.cn/cssref/pr-border.html</url> </link> <link> <title>JavaScript Date 對象</title> <url>http://miracleart.cn/jsref/jsref-obj-date.html</url> </link> <link> <title>JavaScript Array 對象</title> <url>http://miracleart.cn/jsref/jsref-obj-array.html</url> </link> </pages>
Learning experience
This example mainly includes the following knowledge points:
Form basics
onkeyup Event: Occurs when the keyboard key is released
Function call, function value passing
Creation of AJAX XMLHttpRequest object, server response The function executed at the time, sends a request to the file on the server: see 1-5 for learning experience
HTML DOM getElementById() method: Returns the first object with the specified ID Quote
l XML related knowledge
Create XML DOM object
Load XML file to new XML DOM object
Get the object of a specific tag name: getElementsByTagName()
Get the child section collection of a specific element: HTML DOM childNodes
Get the node value of the first button element: HTML DOM nodeValue
Return the first child node of the element: HTML DOM item() method
Related functions:
Strlen(): Returns the length of the string
Stristr() : Search for the first occurrence of a string in another string
