«
»

php ajax

Сегодня мы напишем простейший поиск работающий без перезагрузки страницы (юзать будем php и ajax).
Собственно основа в приложениях аякс- это объект XMLHttpRequest который юзается для отправки http запросов серверу.

Замутим мы следующее:
index.html – файл с формой поиска ниже которой будем выводить результаты.
ajax.js – файлон с ajax функциями.
search.php – к нему будет отправлять запрос на поиск.
find.gif – любая картинка которую будем показывать в момент поиска.

Поехали.

index.html

<html>
<head>
<title>sysx.ru поиск на ajax</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript" type="text/javascript" src="ajax.js"></script><!--цепляем аякс-->
</head>
<body>
<div align="center">
поиск<br />
<input name="ssearch" type="text" id="ssearch" maxlength="50" /><br />
<input name="send" type="submit" id="send" value="найти" onClick="ssearch();" /><br /><!--если жмем выполняется ssearch из ajax.php-->
<img src="find.gif" id="find" style="visibility:hidden;" /><!--картинку пока скроем-->
<div id="result"></div><!--в этот слой будем выводить результаты поиска-->
</div>
</body>
</html>

ajax.js

var XMLHttp = getXMLHttp();function ssearch() {
document.getElementById("find").style.visibility = "visible"; //показываем картинку
var ssearch = document.getElementById("ssearch").value; //получаем значение из формы
//составляем линк и отправляем запрос
url = "search.php?x=" + ssearch;
XMLHttp.open("GET", url, true);
XMLHttp.onreadystatechange = handlerFunction;
XMLHttp.send(null);
}
 
function handlerFunction() {
//если завершено то прячем картинку и выводим результат в слой result
if (XMLHttp.readyState == 4) {
document.getElementById("find").style.visibility = "hidden";
document.getElementById("result").innerHTML = XMLHttp.responseText;
}
}
 
function getXMLHttp() {
if (window.XMLHttpRequest) {
try {
XMLHttp = new XMLHttpRequest();
} catch (e) { }
} else if (window.ActiveXObject) {
try {
XMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
return XMLHttp;
}

XMLHttpRequest может быть в 1 из 5 состояний: 0- не инициализировано; 1- загрузка; 2- загружено; 3- ожидание; 4- завершено;
Перед обращением к нему мы проверяем текущее состояние.
Во всех броузерах реализована поддержка объекта XMLHttpRequest кроме осла до 7 версии. В версиях осла нам понадобится ActiveX. Именно поэтому функция getXMLHttp несколько растянута.

search.php

<?
header("Content-type: text/plain; charset=windows-1251");
	if (isset($_GET['x'])) {
	$x=$_GET['x'];
	sleep(1);
	print "Искали мы ".$x;
	}
?>

Я не стал расписывать запрос к бд (лень), а просто вывел значение из формы поиска.

Метки: , ,

Запись опубликована 25.03.2009 в 16:04 и размещена в рубрике ajax. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Комментарии и уведомления сейчас закрыты.

Комментарии запрещены.