Использование jQuery и PHP для создания Web-страниц на базе Ajax

Библиотеки jQuery упрощают PHP-разработчику решение трудоемких задач

Научитесь пользоваться компактной средой JavaScript jQuery, чтобы наделять свои РНР-страницы функциональностью асинхронного JavaScript + XML (Ajax).

Томас Майер, автор и разработчик, Triple Dog Dare Media

authorТомас Майер (Thomas Myer) – консультант, автор и разработчик из Остина, штат Техас. За его работой можно следить в твиттере: @myerman.



11.01.2010

Большинство РНР-разработчиков осваивали этот язык по старинке, начав с определения и построения простых РНР-страниц и их соединения с простыми же таблицами MySQL. В дальнейшем, приобретая разнообразный опыт, они учились создавать на РНР все более сложную функциональность, объединять таблицы в MySQL и решать другие сложные задачи.

По ходу дела программист приобретает опыт работы и со стороны клиента. В какой-то мере он осваивает XHTML или CSS, а быть может, и программирование на JavaScript. В зависимости от вида проектов ему даже может представиться случай поработать с Ajax для придания своим Web-приложениям функциональности в духе Web 2.0. Однако у меня первый опыт работы с Ajax оказался довольно утомительным — приходилось вручную создавать функции и с трудом продираться сквозь процесс создания Ajax-страниц.

Часто используемые аббревиатуры

  • CSS: Cascading Style Sheet
  • HTML: Hypertext Markup Language
  • XHTML: Extensible Hypertext Markup Language
  • XML: Extensible Markup Language

Для некоторых Ajax до сих пор остается тайной за семью печатями. У них не находится времени, терпения или знаний, чтобы как следует овладеть им. Жаль, потому что многим клиентам нравится функциональность в стиле Ajax, которая упрощает работу с Web-приложениями. Прочитав эту статью, вы узнаете достаточно, чтобы стать настоящим профи по Ajax.

Мы покажем, как использовать библиотеку jQuery, чтобы легко добавлять функциональность Ajax в любое РНР-приложение. Мы создадим простое Web-приложение с применением РНР и MySQL — телефонную книгу с именами и номерами телефона. В ней будет все необходимое — средства поиска по именам или номерам телефона, таблица MySQL и т.п. Затем мы добавим jQuery, чтобы можно было искать по именам и номерам телефона в режиме реального времени, в процессе набора текста. Решив эту задачу, вы не только будете хорошо знать основы jQuery, но и разберетесь в некоторых фундаментальных понятиях Ajax.

Что такое Ajax?

Лучший способ описать Ajax — это сравнить его с тем, что вам уже знакомо. Большинство Web-страниц и приложений работает в синхронном режиме. Вы нажимаете на ссылку или кнопку Submit поисковой формы, и запрос передается на сервер, который обрабатывает его и возвращает ответ. Эту модель правильнее всего назвать так: «нажал, подождал, увидел». Этот бесконечный цикл обновления-повторения всем хорошо известен. Иными словами, чтобы отображать на странице постоянно обновляемую информацию, нужно либо ввести какой-то механизм автоматического обновления, либо предложить пользователю нажимать на ссылку.

С Ajax все не так. Первая A в слове Ajax означает асинхронный. Ajax позволяет создавать страницы на любом языке программирования, а затем наполнять разные части этих страниц информацией из базы данных или любого другого централизованного процесса на сервере. Например, у вас есть сайт электронной коммерции, где демонстрируются продаваемые продукты. На странице каждого продукта есть обычные элементы: заголовки, описание товара, фотография, количество товара на складе.

Предположим, нужно держать посетителей в курсе того, сколько единиц товара осталось на складе. Можно добавить функцию Ajax, которая будет запускать отдельную РНР-страницу с запросом MySQL, а затем передавать эту информацию на первоначальную страницу без каких-либо действий со стороны пользователя и без всякой синхронной последовательности событий типа нажал-подождал-увидел.

Буква j в слове Ajax означает JavaScript, и это объясняет источник такого поведения. В нем и достоинство данного подхода, и его недостаток. Достоинство потому, что весь код работает на стороне клиента, так что он легко переносится и не влияет на сервер. А недостаток для многих РНР-разработчиков состоит в том, что это другая, непривычная для них среда. Здесь-то и выходят на сцену инструменты, подобные jQuery: они значительно упрощают взаимодействие с Ajax, ускоряя процесс разработки.

А как насчет двух последних букв в названии: а и x? Они означают and XML, хотя XML-часть на самом деле используется не всегда. Многие Ajax-приложения хорошо работают и без XML-кода: они передают просто HTML или даже неформатированный текст. Возможно, точнее было бы расшифровывать x как XMLHttpRequest, так как этот объект используется для извлечения данных в фоновом режиме, то есть без помех для отображения или поведения существующей страницы.


Что такое jQuery?

jQuery— это компактная библиотека JavaScript, созданная Джоном Резигом (John Resig) и опубликованная в интернете в начале 2006 года. Это бесплатное и открытое ПО, распространяемое по двум лицензиям: Массачусетского технологического института (MIT) и GNU General Public License. Она привлекла множество разработчиков во всем мире своей простотой и наглядностью.

Секрет ее популярности в том, что эта простая в применении библиотека упрощает JavaScript для всех (даже для самых закоренелых back-end программистов), позволяя без изнурительной работы добиваться замечательных эффектов. С ее помощью можно создавать наборы элементов Document Object Model (DOM), модифицировать и манипулировать CSS, вводить элементы анимации и работать с Ajax. Вся эта функциональность обеспечивается единственным файлом JavaScript, который можно загрузить с сайта jQuery (см. Ресурсы).

Загрузив jQuery, можно добавить его к любому файлу HTML или РНР, включив простой тег <script>:

<script type="text/javascript" src="/path/to/jquery.js"></script>

Допустим, перед вами стоит довольно простая, но нудная задача с большим количеством ручных операций типа добавления двоеточия (:) в конце каждой метки формы на сайте. Можно идти напролом, отыскивая каждую метку формы и добавляя в конце строки двоеточие, а можно использовать следующий код jQuery:

Листинг 1. Добавление двоеточий с использованием jQuery
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("label").append(":"); 
}); 
</script>

Это простая функция: она дожидается, пока страница будет полностью подготовлена и загружена (для этого служит часть $(document).ready()), выполняет анонимную функцию, отыскивающую все элементы DOM label, а затем в конце найденного текста добавляет двоеточие. Функция $() позволяет обращаться к элементам DOM по их естественным именам, что делает этот интерфейс идеальным выбором для разработчиков, уже знакомых с DOM.

Конечно, с помощью jQuery можно делать много других вещей, но это хороший первый шаг. Простая встроенная функция jQuery будет работать в любом случае, так как она дожидается окончания загрузки страницы. Другая строка кода вносит изменения во все найденные элементы DOM label, и все это происходит со стороны клиента, без необходимости тупо перебирать всю сделанную разметку и вносить в нее изменения.


Создание простого приложения: телефонная книга

Теперь, когда основы jQuery прояснились, давайте построим простую телефонную книгу на базе РНР и MySQL. Это приложение состоит из трех частей:

  • таблицы MySQL с именами и номерами телефона
  • файла index.php с формой поиска
  • страницы find.php, которая обращается к таблице базы данных.

Создадим каждый элемент отдельно.

Создание таблицы базы данных

Создание таблицы базы данных в MySQL — пожалуй, самая простая часть. Эта таблица должна содержать самый минимум информации — идентификатор (ключ таблицы), поле имени и поле номера телефона. Два последних поля алфавитно-цифровые, так что можно использовать функцию varchar(). Поле идентификатора создадим как autoincrement primary key. Назовем эту таблицу directory, и для ее создания воспользуемся следующим кодом Structured Query Language (SQL):

Листинг 2. Код SQL для создания таблицы directory
CREATE TABLE `directory` (
 `id` INT NOT NULL AUTO_INCREMENT ,
 `name` VARCHAR( 64 ) NOT NULL ,
 `phone` VARCHAR( 16 ) NOT NULL ,
 PRIMARY KEY ( `id` ) 
) TYPE = MYISAM ;

Как видите, ничего сложного нет. Позднее это приложение можно будет изменить по своему усмотрению. Например, можно добавить поле ключевых слов или адреса, что еще больше облегчит поиск. Пока же будем работать с тем, что есть.

Теперь надо заполнить нашу таблицу. Для ввода имен и номеров можно воспользоваться утилитой phpMyAdmin или командной строкой. Можно также использовать следующую последовательность команд SQL:

Листинг 3. Команды SQL для заполнения таблицы
insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');  
insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');  
insert into `directory` (name,phone) values ('John Smith', '512-555-0113');  
insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');  
insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');

Когда значения введены, проверьте, что список выводится, напечатав select * в командной строке из рабочего каталога или нажав Browse в phpMyAdmin.

Создание файла index.php

Далее, создадим простую домашнюю страницу для нашего приложения. Это файл РНР с именем index.php, но пока он содержит главным образом код HTML. Когда мы создадим файл find.php (на следующем шаге), мы вернемся к этой части и завершим ее.

Пока все, что нам нужно, это базовый HTML-файл с формой. Каждый элемент формы содержит уникальный идентификатор, так как нам нужна возможность определять каждый элемент при помощи jQuery.

Листинг 4. Файл HTML с формой
<html> 
<head> 
<title>Welcome!</title> 
</head> 

<body> 
<h1>Search our Phone Directory</h1> 
    <form id="searchform" method="post"> 
<div> 
        <label for="search_term">Search name/phone</label> 
        <input type="text" name="search_term" id="search_term" /> 
<input type="submit" value="search" id="search_button" /> 
</div> 
    </form> 
    <div id="search_results"></div> 
</body> 
</html>

Сразу бросаются в глаза две вещи. Во-первых, с формой не связано никаких действий. Это нормально: помните, что данная форма не должна следовать традиционной синхронной схеме «нажал, подождал, увидел». Вместо этого мы добавляем функциональность, которая будет следить за действиями пользователя в поле search_term.

Второе, что вы должны заметить, это элемент DOM search_results— пустой элемент прямо под формой. В нем будут содержаться результаты поиска. Однако прежде чем идти дальше, создадим страницу find.php.

Создание файла find.php

Файл find.php — это место, где собственно и происходит все действие. Он соединяет приложение с базой данных и выполняет запрос к таблице.

В первой части файла find.php находится информация о соединении. Для нашего примера я ввел эту информацию прямо в файл. У большинства из вас она будет содержаться во включенном или запрашиваемом файле или в составе гораздо более крупной среды.

Листинг 5. Создание файла find.php
<?php
define(HOST, "your.host.here");
define(USER, "your-user-name");
define(PW, "your-password");
define(DB, "your-db-name");

$connect = mysql_connect(HOST,USER,PW)
or die('Could not connect to mysql server.' );

mysql_select_db(DB, $connect)
or die('Could not select database.');

Из формы index.php будет поступать поисковый термин. Прежде чем вводить это значение в базу данных, над ним нужно произвести некоторую простую обработку. Я использую функции strip_tags() и substr() для удаления из поискового термина всех тегов HTML и сокращения его размера. Такая обработка никогда не помешает — нельзя целиком доверять тому, что вводит пользователь.

При очистке поискового термина выполним один дополнительный шаг в виде процедуры mysql_escape_string(), которая удалит все прочие глюки (такие как одинарные знаки кавычек), которые могут поставить базу данных в тупик.

$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);

Теперь составим оператор SQL. Мы хотим извлекать из таблицы любые имена и номера телефона, соответствующие поисковому термину. Последний должен сравниваться методом LIKE как с полем имени, так и с полем номера телефона, после чего выполняется запрос mysql_query().

Листинг 6. Создание оператора SQL
$sql = "select name,phone
from directory
where name like '%$term%'
or phone like '%$term%'
order by name asc";

$result = mysql_query($sql);

Результаты запроса можно распечатать. Инициализируем переменную $string, чтобы сохранить результаты, затем используем mysql_num_rows() для проверки наличия в ответе любых строк. Если результаты для поискового термина не получены, $string будет содержать значение "No matches!" Если они есть, будет распечатано каждое имя и номер телефона из множества результатов. В конце процесса вся строка выводится на экран командой echo:

Листинг 7. Распечатка строки командной echo
$string = '';

if (mysql_num_rows($result) > 0){
  while($row = mysql_fetch_object($result)){
    $string .= "<b>".$row->name."</b> - ";
    $string .= $row->phone."</a>";
    $string .= "<br/>\n";
  }

}else{
  $string = "No matches!";
} 

echo $string;
?>

Конечно, эта РНР-функциональность и сама по себе чрезвычайно полезна, но пока этого не видно. Нужно как-то ввести в этот сценарий сам поисковый термин. Мы сделаем это в следующем разделе.

Добавление jQuery в index.php

Пока все, что у нас есть, это пара безобидных страниц РНР и простая таблица MySQL. С добавлением jQuery это кроткое приложение превратится в современную программу на базе Ajax, которая работает подобно настольному приложению поиска вроде Spotlight в Mac OS X или Google Desktop Search.

Откроем файл index.php и добавим вызов свежезагруженного файла jquery.js.

<script src="./jquery.js"></script>

Затем создадим простую функцию, которая предотвратит типичное поведение поисковой формы. (Для этого используется функция preventDefault().) Все нажатия кнопки Submit и события key-up (то есть события, которые происходят при нажатии клавиш на клавиатуре) будут переадресовываться к новой функции ajax_search(), которую мы сейчас создадим.

Листинг 8. Создание функции для предотвращения типичного поведения поисковой формы
<script type='text/javascript'> 
$(document).ready(function(){ 
$("#search_results").slideUp(); 
    $("#search_button").click(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 
    $("#search_term").keyup(function(e){ 
        e.preventDefault(); 
        ajax_search(); 
    }); 

});

Заметьте, как функция slideUp() используется для временного сокрытия элемента DOM search_results. Для обращения к этому элементу по имени применяется функция $(). Тем, кто знаком с CSS, подход jQuery тоже покажется знакомым. Например, у нас есть элемент DOM с уникальным идентификатором search_results, и для обращения к нему мы используем $("#search_results"). Все очень просто.

Заметьте также, что каждый раз при нажатии кнопки Search или вводе символов в поле search_term анонимная функция предотвращает поведение по умолчанию и переадресует приложение к функции ajax_search(), которой мы теперь и займемся.

Функция ajax_search() предельно проста. Нам нужно показать элемент DOM search_results (как вы помните, сначала мы его спрятали), ввести значение из входного поля search_term, передать его функции ($.post()), которая асинхронно исполняет файл find.php, и ждать ответа. Когда ответ появится (как вы помните, мы сделали так, чтобы find.php возвращала ответ в любом случае, даже если совпадений не обнаружено), jQuery помещает этот ответ в элемент DOM search_results.

Листинг 9. Функция ajax_search()
function ajax_search(){ 
  $("#search_results").show(); 
  var search_val=$("#search_term").val(); 
  $.post("./find.php", {search_term : search_val}, function(data){
   if (data.length>0){ 
     $("#search_results").html(data); 
   } 
  }) 
} 
</script>

Теперь, когда все элементы системы на месте, можно ввести запрос и посмотреть, как механизм поиска работает в режиме реального времени, извлекая записи при каждом событии нажатия клавиши. Он работает и при нажатии кнопки Submit. Например, на рисунке 1 в поле поиска введена буква a, и приложение возвратило записи Жанны и Сары Смит, в именах которых содержится эта буква.

Рисунок 1. Ajax-поиск в действии
jQuery search

Заключение

Конечно, над этим приложением можно поработать еще. Например, добавить поле ключевых слов и позволить поиск по ключевым словам. Или сделать так, чтобы каждая запись содержала теги или ключевые слова, связанные с разными областями деятельности. Можно добавить также ресурсный поиск, чтобы искать людей, которые могли бы помочь в тех или иных проектах. Наконец, можно добавить поля email, даты рождения и чего угодно еще, а затем расширить параметры поиска.

Дело в том, что для части jQuery этого приложения не важно, что происходит внутри. Она лишь передает поисковый термин в файл с именем find.php. Файл find.php не знает или не заботится о том, что свои инструкции получает от функции jQuery. Для него поисковый термин поступает из обычной формы, и он использует эти данные для выполнения запроса, а затем возвращает записи, совпадающие с этим термином.

Ресурсы

Научиться

Получить продукты и технологии

  • Улучшите свой следующий проект по разработке программного обеспечения open source при помощи ознакомительного ПО IBM, которое можно загрузить через Интернет или заказать на DVD.(EN)
  • Загрузите ознакомительные версии продуктов IBM и попробуйте инструменты разработки приложений и продукты промежуточного уровня от DB2®, Lotus®, Rational®, Tivoli® и WebSphere®.(EN)

Обсудить

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Профиль создается, когда вы первый раз заходите в developerWorks. Информация в вашем профиле (имя, страна / регион, название компании) отображается для всех пользователей и будет сопровождать любой опубликованный вами контент пока вы специально не укажите скрыть название вашей компании. Вы можете обновить ваш IBM аккаунт в любое время.

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Open source
ArticleID=460839
ArticleTitle=Использование jQuery и PHP для создания Web-страниц на базе Ajax
publish-date=01112010