Live Search AJAX с PHP
- Предыдущая страница AJAX responseXML
- Следующая страница AJAX RSS Reader
AJAX может предложить пользователям более удобный и интерактивный опыт поиска.
AJAX Live Search
В следующем примере AJAX мы продемонстрируем реальный поиск.
Реальный поиск по сравнению с традиционным搜索ом имеет множество преимуществ:
- Результаты отображаются по мере ввода данных
- Результаты фильтруются по мере ввода данных
- Если результатов слишком мало, удаление символов позволяет получить более широкий диапазон
Поиск в текстовом поле ниже по страницам CodeW3C.com
Этот пример включает в себя четыре элемента:
- Простая HTML форма
- JavaScript
- PHP страница
- XML документ
В этом примере результаты хранятся в XML документе (links.xml) для поиска. Для того чтобы пример был маленьким и простым, мы предоставляем только 8 результатов.
HTML форма
Это HTML страница. Она содержит простую HTML форму, CSS стили для этой формы и ссылку на JavaScript:
<html>
<head>
<script src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30"
onkeyup="showResult(this.value)"
<div id="livesearch"></div>
</form>
</body>
</html>
Пример объяснение - HTML форма
Как вы видите, HTML страница содержит простую HTML форму, в которой текстовое поле命名为 "txt1".
Так работает форма:
- Когда пользователь нажимает и отпускает клавишу на текстовом поле, срабатывает событие
- Когда событие срабатывает, выполняется функция с именем showResult()
- Под формой находится элемент <div> с именем "livesearch". Он используется в качестве占位щика для данных, возвращаемых функцией showResult()
JavaScript
JavaScript код хранится в файле "livesearch.js", подключенном к HTML документу:
var xmlHttp
function showResult(str)
{
if (str.length==0)
{
document.getElementById("livesearch").
innerHTML="";
document.getElementById("livesearch").
style.border="0px";
возврат
}
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Браузер не поддерживает HTTP Request")
возврат
}
var url="livesearch.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
функция stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("livesearch").
innerHTML=xmlHttp.responseText;
document.getElementById("livesearch").
style.border="1px solid #A5ACB2";
}
}
функция GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
возврат xmlHttp;
}
Объяснение примера:
GetXmlHttpObject и Запросы AJAX с PHP имеет примеры, аналогичные этим.
Функция showResult()
Функция выполняется каждый раз при вводе символа в текстовое поле.
Если в текстовом поле нет ввода (str.length == 0), функция устанавливает возвращаемое поле в пустое значение и удаляет любые окружающие рамки.
Однако, если в текстовом поле есть ввод, функция выполняет:
- Определение url (имя файла), отправляемого на сервер
- Добавление параметра (q) с содержимым поля ввода в url
- Добавление случайного числа для предотвращения использования сервером кэшированных файлов
- Использование функции GetXmlHttpObject для создания объекта XMLHTTP и уведомления этой функции о выполнении функции stateChanged при возникновении изменений
- Использование предоставленного url для открытия объекта XMLHTTP
- Отправка HTTP-запроса на сервер
Функция stateChanged()
Эта функция выполняется каждый раз, когда состояние объекта XMLHTTP изменяется.
Когда состояние становится 4 (или "complete"), содержимое占位ника txtHint заполняется текстом ответа, и вокруг него устанавливается рамка.
PHP страница
Серверная страница, вызываемая JavaScript-кодом, это PHP-файл с именем "livesearch.php".
"livesearch.php" проверяет этот XML-документ "links.xml". Этот документ содержит заголовки и URL некоторых страниц codew3c.com.
Эти коды будут искать заголовки, соответствующие строке поиска в XML-файле, и возвращать результаты в формате HTML:
<?php
$xmlDoc = new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
//get the q parameter from URL
$q=$_GET["q"];
//lookup all links from the xml file if length of q>0
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)
{
//find a link matching the search text
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;
?>
Объяснение примера:
Если из JavaScript передан любой текст (strlen($q) > 0), происходит:
- XML DOM объект для создания файла "links.xml" в PHP
- Пробегаемся по всем элементам "title" (nodetypes = 1), чтобы найти соответствие name, переданного JavaScript
- Найден link, содержащий правильный title, и устанавливается как переменная "$response". Если найдено более одного соответствия, все соответствия добавляются к переменной
- Если не найдено соответствие, переменная $response устанавливается в "no suggestion"
- $result - это вывод, отправляемый в "livesearch" маркер
- Предыдущая страница AJAX responseXML
- Следующая страница AJAX RSS Reader
