AJAX и jQuery. Динамическое обновление контента. Основы (изменения от 03.01.2012)
В данной статье речь пойдет о том, что же такое AJAX и jQuery и будут рассмотрены примеры, как их использовать.
Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/
Перейдем к рассмотрению примеров.
Важно!
Для того, чтобы примеры работали корректно, необходимо:
1. Все файлы должны быть записаны в кодировке UTF-8.
2. Скрипты должны выполняться на веб-сервере, а не запускаться в браузере, как файл.
Пример 1. Динамическое обновление контента по таймеру
Создадим простенькую программу, отображающую текущее время, обновляемое раз в секунду по таймеру. Особенностью данной программы будет получение информации о текущем времени из другого внешнего файла.
Содержимое файла index.html.
В коде имеются несколько особенностей, поясним их.
2. В теле документа создается контейнер, в который мы будем загружать контент.
Обращается к файлу time.php для получения контента.
Результаты запросов не кэшируются.
При успешном выполнении запроса, управление переходит функции, которая получает контент в качестве параметра и записывает его контейнер. Запись в контейнер происходит вот в этой строке:
Содержимое файла time.php.
Пример 2. Динамическое обновление контента по выбору пользователя
Программа, динамически загружающая контент, по выбору пользователя.
Содержимое файла index.html.
В теле документа создана форма, имеющая две кнопки, посредством которых пользователь осуществляет выбор желаемого контента. И контейнер для загрузки контента.
Загрузка динамического контента в контейнер осуществляется аналогично примеру 1. Разница лишь в том, что грузится различный контент, если происходят разные события.
Содержимое файлов page1.html и page2.html, которые загружаются в область контента динамически, представляет собой простые HTML-страницы или текстовые файлы с контентом.
Пример 3. Отправка данных на сервер в фоновом режиме и получение контента
Рассмотрим пример, отправляющий введенное имя пользователя на сервер. Сервер при получении имени выдает приветствие и подсчитывает количество символов в введенном имени.
Содержимое файла index.html.
В теле документа создана форма для ввода имени пользователя. И контейнер для загрузки динамического контента.
Тип передачи данных.
Обратим внимание, что в конце написана строка:
Это сделано для того, чтобы форма не пыталась передать данные файлу, из которого она запускается и не происходило перезагрузки страницы.
Содержимое файла greetings.php.
Выводим на экран приветствие и подсчитываем количество символов в имени.
В качестве еще одного примера использования AJAX и jQuery можно посмотреть гостевую книгу из статьи
«Гостевая книга своими руками на PHP и MySQL. Добавляем динамизма. AJAX + jQuery».
Стоит сказать в заключении, что кроме очевидных плюсов создания страниц с использованием динамического обновляющегося контента, есть ряд недостатков, которые следует учитывать при разработке сайта, а именно:
1. На страницах с динамическим обновлением контента, кнопка «Назад» в браузере не работает корректно.
2. Страницы с динамическим обновлением контента не меняют URL, в зависимости от своего содержимого, поэтому не могут быть добавлены в закладки.
3. Страницы с динамическим обновлением контента не индексируются поисковыми системами, т.к. они не выполняют команды JavaScript.
От приведенных недостатов можно избавиться программным путем. В данной статье такие способы не рассматриваются.
AJAX и PHP: разработка динамических веб-приложений
Книга «AJAX и PHP: разработка динамических веб-приложений» – самый удобный и полезный ресурс, который поможет вам войти в
захватывающий мир AJAX. Вы научитесь писать более эффективные веб-приложения на PHP за счет использования всего спектра возможностей технологий AJAX. Применение AJAX в связке с PHP и MySQL описывается на многочисленных примерах, которые читатель сможет использовать в собственных проектах.
Рассмотрены следующие темы: верификация заполнения форм на стороне сервера; чат-приложение, основанное на технологии AJAX; реализация подсказок и функции автодополнения; построение диаграмм в реальном времени средствами SVG; настраиваемые и редактируемые таблицы основе баз данных; реализация RSSагрегатора; построение сортируемых списков с поддержкой механизма drag and drop.
Издание предназначено тем, кто владеет базовыми знаниями PHP, XML, jаvascript и MySQL и хочет узнать все тонкости функционирования AJAX и взаимодействия составляющих этой технологии.
Название: AJAX и PHP: разработка динамических веб-приложений
Авторы: Дари К., Бринзаре Б., Черчез Тоза Ф., Бусика М.
Год: 2007
Издательство: СПб.: Символ-Плюс
Язык: русский
Формат: pdf
Страниц: 332
Размер: 5,06 Мб
Скачать Дари К. и др. AJAX и PHP: разработка динамических веб-приложений
AJAX для новичков
Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.
Что такое AJAX?
AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обмен данными
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.
Клиент часть, написанная на Javascript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.
Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт, или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.
Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция Javascript`а eval) для получения полноценного объекта Javascript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.
В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает.
Методы объекта XMLHttpRequest
Заметьте, что названия методов записаны в том же стиле (Camel-style), что и другие функции Javascript. Будьте внимательны при их использовании.
abort() — отмена текущего запроса к серверу.
getAllResponseHeaders() — получить все заголовки ответа от сервера.
getResponseHeader(«имя_заголовка») — получить указаный заголовок.
open(«тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).
send(«содержимое») — послать HTTP запрос на сервер и получить ответ.
setRequestHeader(«имя_заголовка»,«значение») — установить значения заголовка запроса.
Свойства объекта XMLHttpRequest
onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState — число, обозначающее статус объекта.
responseText — представление ответа сервера в виде обычного текста (строки).
responseXML — объект документа, совместимый с DOM, полученного от сервера.
status — состояние ответа от сервера.
statusText — текстовое представление состояния ответа от сервера.
Создание объекта XMLHttpRequest
Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
var Request = new ActiveXObject(«Microsoft.XMLHTTP»);
var Request = new ActiveXObject(«Msxml2.XMLHTTP»);
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверу
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
Именно таким образом происходит взаимодействие с сервером.
Обработка ответа
В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Варианты ответа от сервера
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
При получении такого кода, производим следующее действие:
var responsedata = eval(«(» + Request.responseText + «)»)
После выполнения данного кода вам будет доступен объект responsedata.
Работа с серверными языками программирования
Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Литература по теме
Статья написана с целью рассказать новичкам о работе AJAX изнутри. Если Вам кажется, что что-то написано неточно или неверно, поправляйте, пожалуйста, меня, для того, чтобы создать достойную статью вместе.
Конечно, если есть возможность, стоит использовать существующие фреймворки, я считаю. Но знать «как оно работает» всё-же необходимо.
Обзор Xajax
Xajax используется для того, чтобы асинхронно соединять между собой клиентское приложение и серверное приложение, построенное на PHP-сценариях. Xajax создает на серверной стороне JavaScript-обертки (wrapper) для PHP-функций, чтобы обеспечить доступ к ним из клиентского приложения. Когда клиентское приложение вызывает эти функции-обертки, выполняется инициализация объекта XMLHttpRequest и этот объект отсылает HTTP-запрос серверу.
Прежде, чем вы приступите к созданию собственного Web-приложения, давайте разберемся с установкой продуктов и созданием базы данных.
Зарегистрируйте базу данных DB2 SAMPLE в качестве ODBC-источника данных следующей командой DB2:
Установка PHP и Xajax
Ниже приведены шаги, которые необходимо выполнить для установки и настройки PHP:
Рассмотренный в этой статье пример приложения обеспечивает хранение и извлечение данных из базы DB2. Для организации связи с базой DB2 будем использовать расширения PHP PDO.
Теперь осталось активировать PDO ODBC-драйвер. Для этого уберите символ ‘;’ перед следующей строкой в файле php.ini:
Установите PHP 5 на HTTP-сервер Apache. В файл /conf/httpd.conf добавьте следующий фрагмент:
Загрузите Xajax 0.2.4. Создайте каталог xajax в C:/Apache2/Apache2/htdocs. Распакуйте xajax_0.2.4.zip файл в каталог xajax.
Приложение Xajax извлекает данные из таблицы базы данных DB2. Таблица базы может быть создана с помощью PHP-сценария. Создайте PHP-сценарий, createTable.php. Определите переменные для пользователя (user) и пароля (password):
Для установки соединения с базой данных DB2 SAMPLE используйте конструктор PDO:
Запустите выполнение полученной SQL-команды, используя функцию exec() :
Определите SQL-выражение для добавления строки таблицы:
Запустите полученную SQL-команду на выполнение при помощи функции exec() :
Строка была добавлена в таблицу базу данных. Выведите сообщение о количестве добавленных строк:
Аналогично добавьте строку в таблицу Catalog:
PHP-сценарий createTable.php показан в листинге 1. Скопируйте createTable.php в каталог C:/Apache2/Apache2/htdocs. Запустите Web-сервер Apache, если он еще не запущен. Запустите выполнение PHP-сценария в браузере, набрав адрес: http://localhost/createTable.php. Таким образом запускается создание таблицы базы данных DB2.Catalog и добавление в нее данных.
Теперь давайте разработаем пример приложения, содержащего форму ввода. Эта форма обеспечивает ввод данных для добавления позиции каталога в таблицу базы данных Catalog. Как только пользователь начинает вводить данные в поле Catalog Id, HTTP-запрос XMLHttpRequest отсылается на сервер для проверки введенного значения Catalog Id. Если Catalog Id еще не определен в базе, будет отображаться сообщение «Catalog Id is Valid». Если Catalog Id уже определен, то сообщение будет таким: «Catalog Id is not Valid», Кнопка Create Catalog (создать каталог) неактивна и значения полей для данного Catalog Id выводятся в форму.
Объект PHP xajax выполняет функцию посредника между клиентским приложением и сервером. Для начала включите библиотеку классов xajax:
Создайте объект xajax :
Также установите в тегах формы ввода, что xajax должен генерировать любой требуемый JavaScript после того, как серевером будет отправлен XML-ответ:
Запрос XMLHttpRequest инициирован клиентским приложением. В приложении-примере запрос XMLHttpRequest запущен обработчиком событий onkeyup в поле ввода catalogId:
Далее, используем расширение PHP PDO для установления соединения с базой данных DB2 и определяем, существует ли строка таблицы Catalog со значением id, указанным в форме ввода.
Определяем переменные для пользователя и пароля:
Устанавливаем соединения с БД DB2 при помощи конструктора PDO:
Конструктор PDO возвращает ресурс установленного соединения с DB2, если это соединение было успешно установлено. Создайте подготовленное SQL-выражение для выбора строки данных по значению catalog id, указанному в форме. Используйте функцию prepare ( string statement [, array driver_options] ) для компиляции подготовленного выражения:
При помощи атрибута курсора PDO::ATTR_CURSOR сделайте курсор скроллируемым:
Выполнийте SQL-запрос с подготовленным выражением при помощи функции execute ([array input_parameters] ) :
Получите результирующий набор строк, используя функцию fetch ( [int fetch_style [, intcursor_orientation [, int cursor_offset]]] ) :
Далее, извлекаем значения из строки результирующего множества и устанавливаем значения в полях формы ввода. Функция fetch() устанавливает указатель результирующего множества на следующую строку.
Также, блокируйте кнопку передачи данных (submit):
Далее запустите сценарий input.php на сервере Apache. Скопируйте input.php в каталог C:\Apache2\Apache2\htdocs. Запустите PHP-сценарий, набрав адрес http://localhost/input.php. Получаем форму ввода, как показано на рисунке 1:
Рисунок 1. Форма ввода
Начните вводить значениедля поля Catalog Id. Появится сообщение о проверке допустимости значения поля Catalog Id, как показано на рисунке 2:
Рисунок 2. Проверка поля ввода
HTTP-запрос XMLHttpRequest отсылается с каждым изменением в поле ввода.
Рисунок 3. Добавление допустимого значения в поле ввода
Если введенное значение уже определено в таблице Catalog, то показывается сообщение «Catalog Id is not Valid», как показано на рисунке 4. Например, введите значение «catalog1» в поле Catalog Id. Так как значение «catalog1» уже было определено ранее, отображается сообщение «Catalog Id is not Valid».
Рисунок 4. Добавление недопустимого значения поля ввода
Рисунок 5. Создание позиции каталога
Если поле Catalog Id прежде использовалось для создание позиции каталога, «catalog3» в нашем примере, то будет отображено сообщение «Catalog Id is not Valid» как показано на рисунке 6:
Рисунок 6. Добавление значения CatalogId для которого уже создана позиция каталога.
AJAX и PHP. Разработка динамических веб-приложений
Наличие на складе
Склад в Москве
Ожидаемое поступление (если вы сделаете заказ прямо сейчас): 22.11.2021; планируемая отправка: 23.11.2021
Склад в С.-Петербурге
Ожидаемое поступление (если вы сделаете заказ прямо сейчас): 15.11.2021; планируемая отправка: 16.11.2021
Аннотация к книге «AJAX и PHP. Разработка динамических веб-приложений»
Книга, не плохая, очень много подробных и профессиональных примеров, которые достаточно подробно описаны. Но вот одна беда примеры ориентированы на англоязычных пользователей. Не рассматриваются примеры настройки кодировки на русском языке, поэтому я пока ненашел выход как использовать эти примеры с русским языком, в особенности при работе с БД в этом огромный минус 
В целом неплохое издание, много полезных примеров, часто встречающихся в практике. Всегда можно открыть любую главу и получить помощь в решении поставленной задачи, не углубляясь в другие главы. Из недостатков сразу бросается в глаза чрезмерно завышенная цена. Особенно, если учесть, что в книге много воды. Постоянно повторяются одни и те же участки кода. Даже без намёка вынести их в отдельную главу и больше не возвращаться к пройденному материалу. Если есть хоть какой-то опыт работы с PHP и JS, то это не лучший выбор. Гораздо проще прочитать пару статей по AJAX, что бы быть в курсе почти всего, что есть в этой книге.
Книга очень хорошая и современная (берутся даже совсем недавние ajax-нововведения Google для примера). Конкретные примеры и возможные проблемы обсуждаются в книге. Для традиционного AJAX самое то, но вот при появлении такого фреймворка как jQuery многое становится ненужным))
Книжку еще не читал, но исходники скачать получилось без проблем (http://www.packtpub.com/support/book/ajax-php/) Вроди книжка стоящая :)))
Несколько путанное изложение, часто повтор одного и того же. Скачать исходники примеров с указанного сайта ajax.packtpub.com невозможно, также и с сайтов авторов. Сами же сайты как и книга, крутятся по повторяющимся ссылкам, много рекламных окон. Такое чувство, что авторы обижены на весь мир.
Весьма и весьма неплохая книга. До покупки имел об AJAX слабое представление. После прочтения наконец понял что к чему. Рекомендю.
Хорошая альтернатива книги «Ajax для профессионалов».
Для понимающих РНР и JS. Удачные примеры, но сам язык книги немного тяжеловат.
Классная книга! Мне понравилась. Не секунды не пожалел что купил её. Но для тех, кто не знает javascript, php, я уж не говорю об html, читать её будет сложно 
Хотя тем, кто не знает русского языка, будет ещё сложнее :-)))
Книга отличная, читается на одном дыхании. Очень хорошие и полезные примеры. Для новичка в AJAX, но немного разбирающемся в php и java-script программировании все будет понятно.
Хорошая книга. Если Вы знаете javascript и php, но не имели дело с AJAX то книга для Вас. В первом же примере поймете как работает AJAX, ну и сами примеры на достойном уровне.
Для тех кто только начинает осваивать AJAX это то что нужно! Всё очень подробно описано, отличные примеры. Короче MUST HAVE!
Книжка неплохая, но очень трудно будет её понять новичкам. Она предпологает уже довольно глубокие знания PHP, JavaScript и XML. Так что перед тем как её покупать, советую познакомиться с Подробными руководствами по этим языка от издательства Символ +.
Очень хорошая книга и перевод. Есть пара мелких опечаток, но ошибок не нашел. Удачно подобраны примеры, на которых объясняется суть технологии.
Оставить комментарий
2006, август:электронная книга «AJAX и PHP. Разработка динамических веб-приложений (файл PDF)», издательство «Символ-Плюс», 3491 кб.
2006, август:книга на бумаге «AJAX и PHP. Разработка динамических веб-приложений», ISBN: 5-93286-077-4, издательство «Символ-Плюс», 336 стр., мягкая обложка, тираж 2000 экземпляров