9183

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

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

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

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

Русский

2013-02-25

71.24 KB

32 чел.

Использование 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. Для него поисковый термин поступает из обычной формы, и он использует эти данные для выполнения запроса, а затем возвращает записи, совпадающие с этим термином.


 

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

29842. МАТЕМАТИЧЕСКИЕ МОДЕЛИ ОБЪЕКТОВ И СИСТЕМ УПРАВЛЕНИЯ 252 KB
  МАТЕМАТИЧЕСКИЕ МОДЕЛИ ОБЪЕКТОВ И СИСТЕМ УПРАВЛЕНИЯ. МАТЕМАТИЧЕСКОЕ ОПИСАНИЕ ЛИНЕЙНЫХ СИСТЕМ УПРАВЛЕНИЯ. МАТЕМАТИЧЕСКИЕ МОДЕЛИ ОБЪЕКТОВ И СИСТЕМ УПРАВЛЕНИЯ. Моделирование объектов и систем управления начинается с их выделения из окружающей среды что всегда приводит к изучению принципов т.
29843. Физический смысл коэффициентов дифференциального уравнения 295 KB
  Вывод: Звено 2ого порядка характеризуется либо двумя постоянными времени T1 и T2 либо постоянной времени и степенью затухания. Типовое звено это звено процессы в котором описываются дифференциальным уравнением не выше 2ого порядка. Рассмотрим классификацию типовых динамических звеньев: статические звенья: Пзвено идеальное усилительное звено пропорциональное . Азвено 1ого порядка инерционное апериодическое звено 1ого порядка .
29844. Экономические модели финансового роста 21.51 KB
  Экономические модели финансового роста. внимание общества привлекли разрабатывавшиеся в рамках неоклассических теорий модели экономического роста авторы которых широко используя математический аппарат пытались решить проблемы потенциального и устойчивого роста экономики определить условия достижения динамического равновесия. Данный подход характерен и для нашей страны: российские экономисты успешно разрабатывают модели межотраслевого баланса на базе которых рассчитывают межотраслевые пропорции валовой и конечный продукт личное и...
29845. Формирование политики бюджетного регулирования,принципы организации и направления её совершенствования 22.9 KB
  Для проведения рациональной бюджетной политики важно правильное понимание бюджетной системы. Бюджетная система Российской Федерации представляет собой целостную совокупность бюджетов всех уровней основанную на принципах построения бюджетной системы федеративного государства. Бюджетная система РФ является составной частью финансовой системы РФ и включает: 21 республиканский бюджет республик в составе РФ; 55 краевых и областных бюджетов; бюджеты 2 городов Москвы и СанктПетербурга; 1 бюджет автономной области; 10 бюджетов автономных округов;...
29846. Инвестиционный проект:содержание,классификация,фазы развития.Критерии и методы оценки 94 KB
  Временной фактор играет ключевую роль в оценке инвестиционного проекта. На этом этапе проект разрабатывается готовится его техникоэкономическое обоснование проводятся маркетинговые исследования осуществляется выбор поставщиков сырья и оборудования ведутся переговоры с потенциальными инвесторами и участниками проекта. Также здесь может осуществляться юридическое оформление проекта регистрация предприятия оформление контрактов и т. Как правило в конце предынвестиционной фазы должен быть получен развернутый бизнесплан инвестиционного...
29847. Резервы повышения развития средств хозяйствования 18.46 KB
  В масштабах всего народного хозяйства создаются общегосударственные резервы средств производства и ведется подготовка трудовых резервов т. Это направление анализа резервов имеет очень важное значение для расчета обоснованных норм резервных запасов их ограничения действительно необходимыми для обеспечения непрерывности и ритмичности производства. Выявление резервов в таком понимании и определение реальных путей и сроков их мобилизации являются основными задачами экономического анализа деятельности хозяйствующих субъектов. Для...
29848. Федеральные фонды:порядок формирования и использование средств 18.82 KB
  Законодательные представительные органы не имеют права создавать свои резервные фонды а также выполнять отдельные функции по исполнению бюджетов за исключением органов местного самоуправления совмещающих функции законодательных и исполнительных органов. ФЕДЕРАЛЬНЫЕ ФОНДЫ 1. Фонды военноучебных заведений РГВИА РГВА 8.
29849. Совершенствование кредитования юридических и индивидуальных предпринимателей 19.4 KB
  В банке необходимо будет сориентироваться в процентных ставках и сроках кредита а главное правильно разъяснить цель кредита. Такой формой кредита могут воспользоваться как индивидуальные предприниматели так и юридические лица. Такой вид кредита как овердрафт позволяет бизнесменам осуществлять расчеты со своими партнерами своевременно и бесперебойно что безусловно способствует сохранению хорошей репутации. Процентные ставки на овердрафт как правило очень удобные для заемщика и всегда у заемщика есть возможность договориться с банком об...
29850. НИОКР в системе финансовых приоритетов современной организации 15.98 KB
  НИОКР в системе финансовых приоритетов современной организации Научноисследовательские опытноконструкторские и технологические работы совокупность работ направленных на получение новых знаний и их практическое применение при создании нового изделия или технологии. Виды НИОКР В соответствии с нормативным регулированием по способу учета затрат НИОКР подразделяются на: Товарные НИОКР текущие заказные работы относящиеся к обычному виду деятельности организации результаты которых предназначены для реализации заказчику. Капитальные...