9183

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

Научная статья

Информатика, кибернетика и программирование

Использование jQuery и PHP для создания Web-страниц на базе Ajax Библиотеки jQuery упрощают PHP-разработчику решение трудоемких задач Описание:  Научитесь пользоваться компактной средой JavaScript jQuery, чтобы наделять свои РНР-страницы функциональ...

Русский

2013-02-25

71.24 KB

30 чел.

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

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

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

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

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

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

  1.  CSS: Cascading Style Sheet
  2.  HTML: Hypertext Markup Language
  3.  XHTML: Extensible Hypertext Markup Language
  4.  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. Это приложение состоит из трех частей:

  1.  таблицы MySQL с именами и номерами телефона
  2.  файла index.php с формой поиска
  3.  страницы 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-поиск в действии

Заключение

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

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


 

А также другие работы, которые могут Вас заинтересовать

16034. Виктимологическая детерминанта торговли людьми 660 KB
  Цель и задачи: В ходе исследования предполагается выявить структуру и особенности торговли людьми, совершаемой посредством модельного бизнеса в республике Мордовия. Одной из основных задач данного исследования является выявление причин отсутствия уголовных дел по статье 127.1 (торговля людьми) УК РФ
16035. Виконавча влада і адміністративне право 3.81 MB
  У книзі, яка є черговою публікацією в серії наукових видань Адміністративно-правова реформа в Україні, висвітлюються науково-теоретичні засади і актуальні проблеми функціонування виконавчої влади та її правового регулювання в Україні
16036. Державне управління в Україні 1.35 MB
  Державне управління — надзвичайно важлива сфера реалізації державної влади. За своїм змістом воно органічно поєднано з виконавчої гілкою державної влади. Сьогодні вихід нашого суспільства із системної кризи потребує такої організації виконавчої влади, яка б забезпечувала істотне підвищення дієвості державного управління
16037. Державне управління проблеми адміністративно-правової теорії та практики 2.23 MB
  У книзі розглядаються найважливіші інститути державного управління, що є пред-метом вивчення адміністративне-правової науки. Вирішальне місце відведено аналізу малодосліджених теоретичних аспектів взаємодії державного управління та адміністративного права
16038. Криминология 1.65 MB
  Преступность — основной объект криминологического изучения. Одновременно преступность — главный объект воздействия разрабатываемых криминологией мер. Все выводы криминологии, рекомендации и предложения, вырабатываемые в рамках этой науки, направлены на достижение главной цели...
16039. Екологічне право 2.81 MB
  Передмова Забезпечення екологічної безпеки за сучасних умов є важливою проблемою державної екологічної політики та невідємною умовою сталого економічного та соціального розвитку України. Це обумовлено значним антропогенним порушенням та техногенною перевантажен
16040. Екологічне право. Підручник 1.62 MB
  ВСТУП Екологічні відносини одна з найважливіших складових суспільних відносин. Вони виникають між окремими субєктами і з приводу надзвичайно важливих обєктів. Екологічні відносини складаються між суспільством і природою між людиною та навколишнім середов
16041. ПОСОБИЕ по латинскому языку 299.98 KB
  ПОСОБИЕ по латинскому языку для II курса Московской Духовной Семинарии первые 10 уроков Сергиев Посад 2000 ПРЕДИСЛОВИЕ По новым программам Московских духовных школ древним языкам отводится значительно большее количество часов чем ранее. Преподавание латыни н...
16042. Учебник латинского языка из программы Latrus 1.2 199.67 KB
  Учебник латинского языка из программы Latrus 1.2 Содержание: АЛФАВИТ ИМЯ СУЩЕСТВИТЕЛЬНОЕ ИМЯ ПРИЛАГАТЕЛЬНОЕ УПОТРЕБЛЕНИЕ ПАДЕЖЕЙ ГЛАГОЛ СИНТАКСИС ГЛАГОЛА НАРЕЧИЯ ПРЕДЛОГИ МЕСТОИМЕНИЯ ЧИСЛИТЕЛЬНЫЕ КОНЪЮНКТИВ ВЕКГОДСЕЗОНЫМЕСЯЦЫДНИЧАСЫ СИНТАКС...