Козырные расклады

Борис Вольфсон

Хакер, номер #096, стр. 096-134-3

Страница с вкладками

<a href="#" onclick="javascript:sendRequest('1.html', 'result', getRequest);">Вкладка №1</a>

<a href="#" onclick="javascript:sendRequest('2. html', 'result', getRequest);">Вкладка №2</a>

<a href="#" onclick="javascript:sendRequest('3. html', 'result', getRequest);">Вкладка №3</a>

<hr>

<p id="result"></p>

Как видишь, ссылок теперь 3, и загружают они разные HTML-файлы. В результате получилась страничка с динамически изменяемым содержанием.

Серверная часть

Набаловавшись вдоволь с обычными страничками, посмотрим, что можно сделать с помощью скриптов на стороне сервера. Писать буду на самом распространенном у нас языке для веба – PHP. Сначала повторим наш успех и скажем: «Привет». Действия полностью аналогичны предыдущим, но только запрос адресуется на скрипт:

Страница с AJAX-ссылкой на PHP-файл

<a href="#" onclick="javascript:sendRequest('hello.php', 'result', getRequest);">Кликни по мне, чтобы отправить запрос</a>.

<p id="result">Здесь будет результат запроса</p>

А PHP-файл должен просто что-то выводить:

PHP-файл с приветствием

<?php echo "Этот пример реализован связкой AJAX + PHP!" ?>

Сверхдинамичный поиск

Теперь мы вооружились до зубов и можем написать настоящее AJAX-приложение. В качестве не очень сложного примера я предложу «сверхдинамичный поиск», который был подсмотрен мной в одном из фреймворков на Python. Идея такая: имеется форма поиска, пользователь вводит в ней букву за буквой искомого слова, и после каждого нажатия на клавишу формируются результаты. Попробую проиллюстрировать. Пользователь вводит букву «Х» - на экране автоматически выводятся ссылки на все статьи, в которых эта буква встречается. Затем он вводит «а», и поиск ведется уже по сочетанию «Ха». И так далее. Реализацию начнем с HTML-видами нашего проекта:

HTML-форма для сверхдинамичного поиска

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Привет, мир AJAX'a</title>

<script language="JavaScript" src="ajax.js" type="text/javascript"></script>

<script language="JavaScript" type="text/javascript">

function sendSearchRequest() {

sendRequest('search.php?q=' + document.getElementById('searchQuery').value, 'result', getRequest);

}

</script>

</head>

<body>

Введите текст для поиска:

<input id="searchQuery" type="text" size="30" maxlength="30" onKeyUp="javascript: sendSearchRequest();">

<hr />

<p id="result">Здесь будет результат запроса</p>

</body>

</html>

В этом случае мы не только подключили файл ajax.js, но и написали дополнительный скрипт, который будет срабатывать при нажатии на кнопку в поле ввода. Его работа будет очень простой - он будет передавать строку для поиска, которая берется из поля ввода, в виде параметра для скрипта PHP. Теперь очередь PHP'шного скрипта. Для простоты я завел массив $pages, который у меня представляет собой содержимое страниц сайта. Он обычно загружается из базы данных, либо поиск производится средствами БД, что, конечно, правильнее, так как скорость на порядок выше.