AJAX PHP поиск - часть 2: Prototype
В первой части урока мы рассмотрели организацию поиска по базе данных MySQL средствами AJAX, PHP и XML. Теперь я хочу показать этот же пример, только с использованием библиотеки prototype. Глобальных изменений не произошло, внешне работает абсолютно одинаково. В конце урока попытаемся подвести небольшую сравнительную характеристику двух этих методов.
Пример: http://logicerror.pp.ru/upload/ajax_search_prototype/
Сравните внешне с предыдущим примером:
http://logicerror.pp.ru/upload/ajax_search_xml/
Элементы всё те же:
- база данных MySQL
- внешний вид - index.html
- ajax скрипт - script.js
- php двигатель - search.php
- ну и собственно prototype.js
Скачать последнюю версию библиотеки prototype можно здесь: http://www.prototypejs.org/ (оф. сайт библиотеки)
Все файлы лежат у нас в одном каталоге. Кому удобнее, может распределить их по различным каталогам на своё усмотрение (js, css, include, ...), только не забудьте сделать соответствующие изменения в коде. Итак, начнем!
MySQL database
База данных у нас осталась без изменений, причем лично я ее и не дублировал, то есть вы можете подключиться к той же базе, что и в предыдущем уроке. Тем кто опоздал дублирую структуру.
-
CREATE TABLE `articles` (
-
`id` int(11) NOT NULL AUTO_INCREMENT,
-
`title` varchar(255) collate utf8_unicode_ci NOT NULL,
-
`content` text collate utf8_unicode_ci NOT NULL,
-
`author` varchar(255) collate utf8_unicode_ci NOT NULL,
-
`timestamp` int(11) NOT NULL,
-
UNIQUE KEY `id` (`id`)
-
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;
Ну и, конечно же, моя любимая ссылочка на мусор в базу данных
http://logicerror.pp.ru/upload/ajax_search_xml/junk.sql
HTML revised
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<html>
-
<head>
-
<meta http-equiv="Content-Language" content="ru">
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<title>AJAX PHP search example - Prototype</title>
-
-
<link rel="stylesheet" href="style.css" type="text/css">
-
<script src="script.js" type="text/javascript"></script>
-
<script src="prototype.js" type="text/javascript"></script>
-
-
</head>
-
<body>
-
<div id="wrap">
-
<form onsubmit="search(); return false;">
-
<input type="text" class="input" id="search_input" value=""> <input type="submit" class="button" id="search_button" value="» поиск">
-
</form><br>
-
-
<div id="search_results">
-
</div>
-
-
<div id="searching" style="display: none">
-
searching
-
</div>
-
-
</div>
-
</body>
-
</html>
Здесь мы добавили одну строчку, для подключения библиотеки prototype (естественно при условии того, что файл лежит в том же каталоге, что и index.html):
-
<script src="prototype.js" type="text/javascript"></script>
Стиль поля searching изменился, пришлось вынести этот атрибут (display: none) из каскадных таблиц, а почему я объясню чуть ниже:
-
<div id="searching" style="display: none">
Ну и заголовок странички малость изменили
AJAX "prototyping"
-
function search() {
-
var sSearch = $F("search_input");
-
-
if (sSearch.length <3)
-
{
-
alert("Запрос должен быть не короче 3-х символов.");
-
return false;
-
}
-
-
$('search_results').hide();
-
$('searching').show();
-
-
new Ajax.Updater('search_results', 'search.php',
-
{ method: 'get',
-
parameters: { search: sSearch },
-
onComplete: function () {
-
$('search_results').show();
-
$('searching').hide();
-
}
-
}
-
);
-
}
Коротко, правда? Разбираем.
-
var sSearch = $F("search_input");
-
-
if (sSearch.length <3)
-
{
-
alert("Запрос должен быть не короче 3-х символов.");
-
return false;
-
}
Здесь осталось всё как есть, кроме обращения к текстовому полю с идентификатором search_input. В предыдущем уроке мы использовали родной document.getElementById().value, что в принципе и повторяет оператор $F в библиотеки prototype. Очень удобно и чисто.
-
$('search_results').hide();
-
$('searching').show();
В предыдущем уроке, поле search_results (результаты поиска) мы очищали через свойство .innerHTML. Здесь нам достаточно его спрятать (метод hide()), так как Ajax.Updater() у нас сам очистит это поле в нужный момент.
Ну и показываем поле searching методом .show(). Остановимся здесь на миг. Выше я говорил про атрибут display: none, который пришлось перенести в html из css. Дело в том, что, если этот атрибут хранится в css, то показать блок методом .show() мы не сможем (наверное это особенность prototype
) - пришлось бы использовать .style.display = "block", но так гораздо удобнее, согласитесь...
Далее следует AJAX запрос на обновление (Updater)
-
new Ajax.Updater('search_results', 'search.php',
-
{ method: 'get',
-
parameters: { search: sSearch },
-
onComplete: function () {
-
$('search_results').show();
-
$('searching').hide();
-
}
-
}
-
);
Уже знакомый нам запрос, ничего сложного. Обновлять будем поле search_results (результаты поиска). Запрашивать будем search.php - наш двигатель. Используем метод GET, передавая переменную sSearch (наш поисковой запрос) в качестве параметра search (получается что-то вроде search.php?search=...).
Ну и прикручиваем обработчик события Complete (готово) - функцию, которая будет прятать строку "ищу" (searching) и показывать поле результатов поиска (search_results). Причем, здесь нам и не нужно ничего добавлять в поле результатов, так как, получив результат, данный вид запроса самостоятельно поместит его в поле search_results. Это особенность запроса на обновление - Ajax.Updater.
PHP двигатель
-
<?php
-
-
-
$sql="SELECT * FROM `articles` WHERE `title` LIKE '%$sString%' OR `content` LIKE '%$sString%' ORDER BY `id` DESC LIMIT 10";
-
-
{
-
{
-
?>
-
<div class="result">
-
<?=$content;?>
-
</div>
-
<?
-
}
-
}
-
else
-
{
-
?>
-
<div class="result">
-
<h1> </h1>
-
Ничего не найдено
-
</div>
-
<?
-
}
-
?>
В php у нас тоже мало чего изменилось, а именно представление данных. В предыдущем уроке мы использовали XML, а здесь мы используем уже готовый для вывода HTML. Надеюсь вопросов не возникнет. (Не забудьте вместе с XML убрать и его заголовки).
Кстати Content-type советую оставить application/xml, т.к. некоторые браузеры до сих пор не любят ajax запросы к иным форматам.
Вот и всё. Ниже подведена сравнительная характеристика двух методов.
XML vs. Prototype
XML
|
Prototype
|
Если кто-нибудь еще и скорость выполнения проверит - дайте знать.
Размер указан без учета каких-либо методов сжатия.
Отсюда следует вывод. Написание самой такой системы, конечно же легче с использованием prototype, тем самым вы избавляете себя от лишнего парсинга. Тем не менее, потратив чуть больше времени, можно уменьшить объем конечного результата в 9 раз, ну естественно если вы не использовали prototype в другом месте на своей странице (наверное нужно все эти библиотеки уже начать интегрировать в браузеры, и чтобы само-обновлялись).
Ну и конечно же, это еще и дело вкуса
Полезные ссылки
- AJAX PHP поиск - часть 1: XML
- AJAX и собственно XML
- AJAX и XML: ShoutBox
- Краткое введение в prototype
Оригинал статьи: AJAX PHP поиск - часть 2: Prototype
del.icio.us Забобрить!16 Comments so far
Leave a reply
По моему мнению не стоило мешать в посиковом PHP-движке сам функциаонал поиска и элементы представления. Логичней на мой взгляд сделать js-функцию для преобразования “сырых” результатов поиска из json/xml в html, который затем и будет показан.
хотя кончено здесь можно уповать на то что приложение совсем небольшое:)
Гвидон Маляров, согласен. В первом уроке мы рассмотрели представление поисковых результатов в виде XML (с помощью php), а разбор полётов и показ уже на js был. Здесь я попытался показать как можно обойти XML и вывести сразу в HTML без дополнительного парсинга. JSON мы рассмотрим буквально на днях…
Хорошие анализ урока ! Зачёт !
По поводу размера. Если я не ошибаюсь, 144кБ prototype занимает в несжатом виде.
Можно значительно уменьшить размер если сжать с помощью JSMin и потом заархивировать gzip (такие архивы поддерживаются большинством браузеров, но можно сделать простую проверку в .htaccess и если браузер не поддерживает gzip отправлять ему несжатый файл).
Написано же “Размер указан без учета каких-либо методов сжатия.”
Кстати, вот ещё оптимизация. Может и ненужная, но всё таки напишу:
вместо
$(’search_results’).show();
$(’searching’).hide();
можно сделать так
$(’search_results’, ’searching’).invoke(’toggle’);
$sql=”SELECT * FROM `articles` WHERE `title` LIKE ‘%$sString%’ OR `content` LIKE ‘%$sString%’ ORDER BY `id` DESC LIMIT 10″
лучше использовать match against
и полнотекстовый поиск. по большой бд твой лайк свалится как лейк :)))
Алекс, видимо вы кое-что упустили: http://www.ajaxrussia.com/archives/ajax-php-search-xml
Спасибо, быстро и просто прикрутилось к каталогу IT-блогов ( http://kollegi.zhilinsky.ru/ ). Там монстроидальная главная страница, её нельзя перезагружать, поэтому аджакс-решение оказалось очень к месту
Жилинский, рад что нашли применение
классно получилось, вы молодец
Жилинский, классный проект - “коллеги”. Попадаются интересные статьи, которые так бы никогда не нашёл.
Да, и по запросу ajax мы на первом месте
отличненько, только вот меня до сих пор мучает вопрос, как сделать “живой” поиск? тоисть чтобы поиск запускался через определенное время, после введения данных в поле, без нажатия по кнопке
видел такое на некоторых форумах, хочу себе такую же тему прикрутить
djon, это делается очень просто. Советую глянуть событие onChange для поля ввода, ну а задержечку сделать можно функцией setTimeout (http://www.htmlite.com/JS018.php)
Ну и далее смотрите что ввели, пробиваете по базе и выводите
[...] AJAX PHP поиск - часть 2: Prototype [...]
Вполне хорошо.