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


 

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

80547. Основний капітал, його утворення, оцінка і використання на підприємствах 178.5 KB
  Поняття класифікація і оцінка основних засобів підприємства. Фінансування ремонту та полліпшень основних засобів на підприємствах. Вартісний критерій віднесення матеріальних необоротних активів до основних засобів...
80548. Сутність і основи організації фінансів підприємств 189.5 KB
  У фінансовій системі держави головною, визначальною її ланкою виступають фінанси підприємств. Тому що вони функціонують у тій сфері суспільного виробництва, де створюються матеріальні блага, валовий внутрішній продукт і національний доход суспільства, а також формується основна частина фінансових ресурсів держави.
80549. Організація розрахунків на підприємстві 275 KB
  Організація зберігання і обігу грошових коштів. Суть безготівкових розрахунків полягає в тому що платежі здійснюють шляхом списання коштів із банківського рахунку платника і зарахування їх на банківський рахунок одержувача тобто проведенням відповідних записів на банківських рахунках обох учасників розрахунків. Розрахунковий документ це відповідно оформлений документ на переказ грошових коштів. За часів переходу до ринкових відносин організація безготівкових розрахунків повинна сприяти вирішенню таких завдань: удосконалення...
80550. Оцінка фінансового стану підприємства 178 KB
  Оцінка фінансового стану підприємства. Фінансова звітність як інформаційне забезпечення оцінки фінансового стану підприємства. Фінансовою звітністю є зведенням інформації про фінансовий стан на визначену звітну дату результати діяльності рух коштів підприємства та власного капіталу за визначений звітний період на підставі даних бухгалтерського обліку. У фінансовій звітності відображаються показники діяльності дочірніх підприємств філій представництв відділень та інших відокремлених підрозділів; підприємства що функціонують у...
80551. Поточне фінансове планування та бюджетування 76.5 KB
  Фінансове планування на підприємствах. Вироблення управлінських рішень оцінка та вибір найбільш ефективних варіантів форм і засобів їхнього виконання здійснюється на основі планування розвитку економіки підприємства в цілому. Фінансове планування виражає розвиток підприємства у відповідних фінансових показниках Ринок ставить високі вимоги до якості фінансового планування оскільки нині за негативні наслідки своєї діяльності відповідальність нестиме само підприємство. Фінансове планування це процес визначення обсягу фінансових ресурсів за...
80552. Фінансова санація підрприємства 97.5 KB
  Неплатоспроможність у свою чергу є підставою для оголошення підприємства банкрутом. Водночас банкрутство підприємства та його ліквідація означають не тільки збитки для акціонерів кредиторів виробничих партнерів споживачів продукції а й зменшення податкових надходжень у бюджет а також збільшення безробіття що теж може стати одним із факторів макроекономічної нестабільності. За умови проведення санації оздоровлення чи реструктуризації такі підприємства можуть розрахуватися з боргами і продовжити діяльність. Під фінансовою кризою...
80553. Планування санації 102.5 KB
  Оцінка санаційної спроможності підприємства. Аналіз факторів і причин впливу на підприємство стану підприємства. Головним критерієм прийняття рішення щодо санації чи ліквідації підприємства є його санаційна спроможність. Санаційна спроможність це наявність у підприємства що зазнало фінансової кризи фінансових організаційнотехнічних та правових можливостей які забезпечуватимуть успішне проведення його фінансової санації.
80554. Джерела санації підрприємств 95 KB
  У цьому випадку мова іде насамперед про зменшення статутного фонду за рахунок зменшення номінальної вартості акцій та зменшення їх кількості з метою: одержання санаційного прибутку з наступним спрямуванням його на покриття балансових збитків; приведення у відповідність розміру основних та оборотних засобів підприємства з розміром його власного капіталу та ін. Санаційний прибуток це прибуток який виникає внаслідок викупу підприємством власних корпоративних прав акцій паїв за курсом нижчим від номінальної вартості цих...
80555. Реорганізація і банкрутство підприємства 157.5 KB
  Тема: Реорганізація і банкрутство підприємства. Зовнішнім показником банкрутства неспроможності підприємства є припинення його поточних платежів і нездатність забезпечити виконання вимог кредиторів якщо вони сукупно складають не менше 300 мінімальних розмірів заробітної плати і не були задоволені боржником протягом як правило трьох місяців з дня настання строків їх виконання. До зовнішніх можна віднести: скорочення попиту на продукцію підприємства і спад цін на неї; зростання цін на сировину матеріали й енер горесурси; економічна...