Введение в xajax


Содержание

AJAX Ведение

Смысл AJAX заключается в обновлении частей веб страницы без перезагрузки этой страницы полностью.

Что Вы уже должны знать

Прежде чем продолжать, желательно, чтобы Вы имели базовые представления в следующих областях:

Если Вы хотите сначала изучить соответствующие предметы, пройдите по соответствующим ссылкам.

Что такое AJAX?

AJAX = Асинхронный JavaScript и XML.

AJAX способ создания быстрых и динамичных веб страниц.

AJAX позволяет обновлять веб страницы асинхронно с помощью обмена небольшими порциями данных с сервером, причем происходит это прозрачно для пользователя. Это означает возможность обновлять отдельные фрагменты страницы без ее перезагрузки целиком.

Обычные (классические) веб страницы, (которые не используют AJAX) должны быть перезагружены полностью при необходимости обновить содержимое.

Примерами приложений, использующих AJAX являются: Google Карты, почта (Gmail), Youtube и Facebook.

Как AJAX Работает

AJAX основан на Интернет Стандартах

AJAX базируется на стандартах интернета и использует комбинацию следующих компонентов:

  • Объект XMLHttpRequest (для асинхронного обмена данными с сервером)
  • JavaScript/DOM (для отображения информации и взаимодействия с пользователем)
  • CSS (для оформления данных)
  • XML (часто используется в качестве формата передачи данных)

Приложения AJAX кроссбраузерные и платформо-независимые!

Предложение Google

AJAX приобрел популярность в 2005 благодаря Google, а точнее Предложению Google.

Предложение Google — это использование AJAX для создания еще более динамичного веб интерфейса: Когда Вы начинаете набирать слова в поисковой строке Google, JavaScript посылает вводимые символы на сервер, а затем сервер возвращает список предложений.

Начните использовать AJAX Сегодня

AJAX основан на существующих стандартах. Эти стандарты уже используются разработчиками в течение продолжительного времени. Читайте продолжение курса, чтобы увидеть как это работает!

Введение в JQuery

JQuery является “писать меньше, делать больше” JavaScript библиотека. Это не язык программирования, а скорее инструмент , используемый для написания сделать общие задачи JavaScript более краткими. Jquery имеет дополнительное преимущество, это кросс-совместимый браузер, то есть вы можете быть уверены, выход вашего кода будет оказывать как задумано в любом современном браузере.

Сравнивая простой пример программы “Привет, мир!” в JavaScript и JQuery, мы можем увидеть разницу в том, как они оба написаны.

Этот короткий пример демонстрирует, как JQuery может достигнуть того же конечного результата как обычный JavaScript в сжатой форме.

Данное руководство не принимает на себя никаких предварительных знаний о Jquery, и будет охватывать следующие темы:

  • Как установить Jquery в веб-проекте.
  • Определения важных концепций веб-разработки, таких как API, DOM и CDN.
  • Общие селекторы JQuery, события и эффекты.
  • Примеры для проверки концепции, которые вы узнали на протяжении всей статьи.

Предпосылки

Перед тем, как начать это руководство вам необходимо следующее:

  • Базовые знания HTML и CSS. Вы уже должны знать, как создать простой веб-сайт, а также иметь представление о селекторов CSS, таких как идентификаторы, классы и псевдо элементы.
  • Понимание основ программирования. В то время как можно начать писать JQuery без передовых знаний JavaScript, знакомство с понятиями переменных и типов данных , а также математики и логики существенно поможет.

Настройка Jquery

JQuery является файл JavaScript, который вы внедряете в виде ссылки в вашем HTML. Есть два способа включить JQuery в проекте:

  • Загрузить локальную копию.
  • Ссылка на файл через сеть доставки контента (CDN).

Примечание: Сеть доставки контента (CDN) представляет собой систему из нескольких серверов, которые обеспечивают веб – контент для пользователя на основе географического положения. Когда Вы даете ссылку на размещенный файл Jquery через CDN, он будет потенциально загружен быстрее и эффективнее для пользователя, чем если вы его принимали на своем собственном сервере.

Мы будем использовать CDN, чтобы ссылаться на Jquery в наших примерах. Вы можете найти последнюю версию JQuery в библиотеке компании Google . Если вместо этого вы хотите загрузить его, вы можете получить копию JQuery с официального сайта.

Мы начнем это упражнение, создав небольшую веб – проект. Он будет состоять из style.css в каталоге css/ , scripts.js в каталоге js/ , и главный файл index.html в корневом каталоге проекта.

Для того, чтобы начать, сделайте HTML скелет и сохранить его как index.html .

Ссылка на файл JQuery CDN перед закрывающим тегом

Введение в AJAX

AJAX — это замечательная технология, которая позволяет сделать сайты полностью интерактивными и живыми :) читаем дальше

Введение в ajax

В нашем мире новых информационных технологий то и дело появляются всякие эзотерические языки программирования, сервисы, форматы, но ajax – это отнюдь не чья-то прихоть, это мощнейший подход к созданию интерактивных сайтов. Поверьте ajax легче выучить чем новый язык программирования. В этой статье мы получим базовые понятия и рассмотрим простые примеры.

Зачем нужен ajax

С появлением web-технологий для доступа к самой свежей информации нам всего лишь нужен браузер и . и всё! Мы всегда будем в курсе новинок всех магазинов и будем иметь доступ к самой свежей информации. Но за все приходится платить. В данном случае нам приходится все время ждать загрузки страниц, форм и прочего. Технология ajax позволяет избавиться от загрузки целой страницы. Теперь мы можем обновить то что нам нужно. Например, заполнив форму, не будем загружать с сервера всю страницу, а загрузим лишь ответ от сервера в определенное место страницы.

Залезем под капот


Для того, чтобы понять ajax нужно иметь представление о других, web-технологиях, так как ajax одновременно охватывает в себе несколько составляющих:

  • HTML — это основа основ. Он используется для создания web-форм и базовой разметки страницы. Прочтите о новых фишках HTML 5.0;
  • CSS — для оформления web-страниц;
  • JavaScript — это основа для ajax. Именно JavaScript выполняет взаимодействие между сервером и клиентом;
  • DHTML (Dynamic HTML) — помогает производить динамические изменения на web-странице;
  • DOM — (Docement Object Model) — используется при работе со структурой web-страницы (при помощи JavaScript).

Если Вы уже знакомы с данными технологиями — отлично. Если нет, ничего страшного. На нашем сайте вы найдете много интересных статей, которые помогут Вам в изучении этих технологий.

Алгоритм действия для создания ajax-запроса

Перед тем как перейти к примеру рассмотрим алгоритм действий, которые нужно выполнить для того чтобы реализовать ajax запрос:

  1. создание экземпляра объекта объект XmlHttpRequest;
  2. отправка запроса методами open и send;
  3. принятие и обработка данных пользователя сервером, ответ сервера;
  4. обработка ответа сервера, например, при помощи метода onreadystatechange.

Создание экземпляра объекта объект XmlHttpRequest

Тут ничего трудно. Создаем обычный объект:

Отправка запроса методами open и send

Метод open() имеет следующий формат: open(тип_запроса,url,способ), где тип_запроса GET или POST, url — путь до запрашиваемого файла, способ — синхронный (false) или асинхронный (false) метод выполнения.

Метод send имеет формат: send(‘информация’) — передает информацию на сервер.

Создадим экземпляр объекта XmlHttpRequest и при его помощи асинхронно передадим файл my.txt на сервер.

Для запроса методом POST все будет аналогично. Только в методе open() нужно заменить первый аргумент «GET» на «POST».

Напишем простой пример для реализации калькулятора, который умеет перемножать числа:

В данном примере осталось всего лишь создать файл с именем «get_result.php» в котором нужно обработать GET-запрос: извлечь из строки 2 числа, перемножить их и вывести. Тут ничего трудного, поэтому останавливаться не будем.

Состояния готовности сервера

В предыдущих примерах мы уже использовали свойство readyState. Остановимся на нем подробнее. Данной свойство позволяет узнать состояние сервера. Существует пять состояний сервера:

  1. нет запроса;
  2. подключение к серверу установлено;
  3. запрос получен;
  4. запрос обрабатывается;
  5. запрос обработан и ответ сформирован.

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

При помощи свойства status можно узнать код ответа на посланный запрос. Например код 200 — успешная обработка, а 404 — говорит об отсутствии страницы. В примере выше мы выполняем код, только если сервер успешно обработал запрос.

Событие onreadystatechange выполняется каждый раз как изменяется свойство readyState у сервера. Тоесть при успешной обработке запроса событие onreadystatechange выполнится 4 раза.

Получение ответа сервера

При корректной обработке результата в свойства responseText (в виде строки символов) и responseXML (в виде XML файла) объекта XMLHttpRequest запишется ответ сервера. В примерах выше мы получали результат из свойства responseText:

Вот и все, мы узнали что же такое ajax, узнали зачем нужна эта технология и привели простые поясняющие примеры.

xAjax – простой путь создания асинхронных веб-приложений

Архив номеров / 2007 / Выпуск №4 (53) / xAjax – простой путь создания асинхронных веб-приложений

xAjax – простой путь создания асинхронных веб-приложений

Если вы в полную силу используете DHTML, но вам кажется, что даже это не обеспечивает должного уровня интерактивности, или вас смущает то, что после заполнения формы ваша веб-страница недоступна клиенту, пока не придет ответ от сервера, – самое время начать использовать xAjax.

Ajax – мода в веб-программировании

Сейчас в Интернете все чаще и чаще появляются сайты, использующие новую технологию, называемую Ajax. Такая популярность объясняется возможностью динамического изменения контента страницы, что фактически превращает обычный браузер в среду выполнения, а гипертекстовый документ – в приложение. Такой эффект достигается за счет совместного использования DHTML (JavaScript + DOM + CSS, но третий пункт скорее опциональный) и любого из серверных языков.

Что такое xAjax

Новые веяния в программировании сопровождаются появлением новых инструментов, позволяющих облегчить труд программисту – например, IDE и библиотеки готовых функций. Прелесть таких инструментариев заключается в том, что от программиста спрятана «черная» работа, и, более того, она уже сделана за него, осталось только воспользоваться плодами. Конечно, существование таких инструментов не освобождает программиста от необходимости знать внутреннюю схему работы, и не все возможно реализовать с их помощью.

Так, для ASP недавно Microsoft выпустила дополнение к Visual Studio – Atlas, набор «компонентов», которые автоматизируют создание запросов на стороне клиента и обработку их на стороне сервера. Но поскольку Visual Studio является коммерческой средой, да и не все сайты хостятся на Windows, то определенный интерес вызывает то, что происходит в Open Source-сообществе. Здесь существует много библиотек. Сегодня речь пойдет о библиотеке xAjax (официальный сайт – www.xajaxproject.org), написанной на для серверного языка PHP.

Рассмотрим основные вехи использования этой замечательной библиотеки. Сначала необходимо загрузить библиотеку (например, здесь http://downloads.sourceforge.net/xajax/xajax_0.5_beta2.zip; конечно, лучше посетить http://community.xajaxproject.org, чтобы получить последнюю версию библиотеки).

Схема использования библиотеки очень проста – подключаете библиотеку, пишете все необходимые функции PHP и регистрируете их, а xAjax сгенерирует функции-врапперы (wrapper functions) на языке JavaScript, доступ к которым вы сможете получить уже из ваших скриптов. Чтобы ясно и кратко раскрыть смысл и технологию использования xAjax, рассмотрим пример.

Исходная ситуация – база данных, PHP, JavaScript и браузер, задача – используя xAjax, обеспечить асинхронный вывод данных из базы данных и их обновление. Задача несложная сама по себе, а уж с использованием xAjax это станет еще проще.

Как это работает.

Условимся, что библиотека xajax (папки xajax_core и xajax_js) лежит в одном каталоге с индексным файлом. Первая часть HTML\PHP-кода страницы:

Использование Ajax с PHP и DB2 9 — Xajax (исходники)

Больше 40% Web-приложений сегодня используют PHP в качестве языка сценариев. Ассинхронный JavaScript и XML (Ajax) — это техника, которая объединяет JavaScript, Document Object Model (DOM) и XMLHttpRequest технологии для обеспечения динамического взаимодействия между клиентом и сервером. Для использования Ajax и PHP доступны разные библиотеки классов PHP. Xajax — это объектно-ориентированная PHP- библиотека классов с открытым исходным кодом, поддерживающая совместную работу Ajax и PHP.

Допустим, что пользователь заполняет форму, чтобы зарегистрироваться на Web-сайте. Допустимость данных не проверяется, пока данные формы не отосланы. С Ajax данные, введенные в поля формы, автоматически проверяются на основе использования бизнес-логики, описанной в серверном приложении. Поэтому нет необходимости отправлять полностью заполненную форму на сервер для проверки введенных данных. Асинхронность подразумевает немедленные ответы метода send() объекта XMLHttpRequest без завершения HTTP-запроса, при том, что обработка данных продолжается. В итоге разработчик обнаруживает, что страница HTML/JavaScript инициирующая запрос XMLHttpRequest , может продолжить обрабатываться, так как объект XMLHttpRequest обрабатывает HTTP-ответ асинхронно.

Обзор Xajax

Xajax используется для того, чтобы асинхронно соединять между собой клиентское приложение и серверное приложение, построенное на PHP-сценариях. Xajax создает на серверной стороне JavaScript-обертки (wrapper) для PHP-функций, чтобы обеспечить доступ к ним из клиентского приложения. Когда клиентское приложение вызывает эти функции-обертки, выполняется инициализация объекта XMLHttpRequest и этот объект отсылает HTTP-запрос серверу.

На сервере объект xajax получает XMLHttpRequest и вызывает PHP-функции, соответствующие функциям JavaScript-обертки. По умолчанию тип запроса PHP-функций, прописанный через Xajax — это POST . PHP-функции возвращают XML-отклик, который возвращается в клиентское приложение объектом xajax . Основываясь на инструкциях из XML-отклика, сообщение JavaScript Xajax отправляет обновления на клиентскую страницу. В Xajax имеется возможность обновлять данные только в случае их изменения.


Прежде, чем вы приступите к созданию собственного Web-приложения, давайте разберемся с установкой продуктов и созданием базы данных.

PHP-расширения для базы данных DB2 могут использоваться с DB2 для Linux, UNIX и Windows (версия 8.2 или старше). Приведенные инструкции по установке применимы для DB2 Enterprise 9 для Windows:

  1. Загрузите сервер данных DB2 9. (Хотя этот пример использует DB2 Enterprise 9, можно использовать и другие версии DB2.)
  2. Распакуйте db2_v9_ese_win_32.zip в каталог.
  3. Для начала установки DB2 выполните двойной щелчок на приложении C:\DB2\ESE\image\setup.exe .
  4. В запустившемся окне установки IBM DB2, нажмите на Install a Product (Установить продукт) .
  5. Выберите опцию Install New (Установить новую) в заголовке DB2 Enterprise Server. Запустится мастер установки DB2. Нажмите Next (Далее) .
  6. Подтвердите лицензионное соглашение и нажмите Next (Далее) .
  7. Выберите тип установки Typical (Типичный ) и нажмите Next (Далее) .
  8. Выберите файлы инсталляции и файл отчета (по умолчанию) и нажмите Next (Далее) .
  9. Выберите папку для установки (C:\Program Files\IBM\SQLLIB\ по умолчанию) и нажмите Next (Далее) .
  10. Назначьте имя пользователя (db2) и пароль (db2admin) и нажмите Next (Далее) .
  11. Экземпляром по умолчанию в DB2 является экземпляр DB2 . Имя сервиса и протокол для экземпляра DB2 по умолчанию можно настроить, нажав кнопку Configure (Конфигурировать). По умолчанию установлено имя db2c_DB2 и порт 5000. Нажмите Next (Далее) .
  12. Выберите установки по умолчанию в области Prepare каталога инструментов DB2 и нажмите Next (Далее) .
  13. Если требуется, настройте оповещения и нажмите Next (Далее) .
  14. Выберите стандартные настройки в разделе Enable operating system security for DB2 objects (Включить систему безопасности операционной системы для объектов DB2) и нажмите Next (Далее) .
  15. Нажмите кнопку Finish (Завершить) , чтобы установить сервер баз данных.

Теперь создайте простую базу данных. Предварительно установите значение переменной среды DB2INSTANCE , равным DB2 : для этого выберите System properties (Свойства системы) > Advanced (Расширенные) > Environment variables (Переменные среды) > System variables (Системные переменные) . Кроме того, значение переменной среды DB2INSTANCE , можно установить в командном окне DB2:

Чтобы создать простую базу данных, выберите пункт Database Creation (Создание базы данных) в области DB2 First Steps. Нажмите кнопку Create SAMPLE Database (Создать ПРИМЕР базы данных) . Кроме того, создать пример базы данных можно следующей командой:

Зарегистрируйте базу данных DB2 SAMPLE в качестве ODBC-источника данных следующей командой DB2:

Установка PHP и Xajax

Так как Xajax — это библиотека классов PHP, сначала загрузите и установите PHP 5. PHP 5 можно установить на множество Web-серверов. В этой статье обсуждается конфигурирование PHP 5 с Web-сервером Apache на платформе Windows.

Ниже приведены шаги, которые необходимо выполнить для установки и настройки PHP:

  1. Загрузите PHP 5.2.0.
  2. Распакуйте PHP-архив в инсталляционнный каталог (к примеру, C:/PHP).
  3. Загрузите и установите Apache HTTP Server 2.0.
  4. К содержимому системной переменной среды PATH добавьте путь к установленному PHP 5 (C:/PHP).
  5. Измените php.init файл в каталоге C:/PHP на php.ini .

Рассмотренный в этой статье пример приложения обеспечивает хранение и извлечение данных из базы DB2. Для организации связи с базой DB2 будем использовать расширения PHP PDO.

В конфигурационном файле php.ini следует установить каталог расширения, указав extension_dir = «./ext» . Чтобы активировать PDO-расширение, следует убрать символ ‘;’ перед следующей строкой в файле php.ini:

Теперь осталось активировать 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:

По умолчанию конструктор PDO создает непостоянное соединение. Конструктор PDO возвращает ресурс соединения с базой данных DB2, если это соединение было успешно установлено. Полученное сообщение гласит: «Connection succeeded» , если связь установлена удачно. Если соединение с базой не было установлено, должно появиться сообщение об ошибке. Для создания таблицы определите следующее SQL-выражение:

Запустите выполнение полученной 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 :

PHP-функции обеспечивают обработку на серверной стороне. Создайте PHP-функции validateCatalogId($formValues) и updateCatalog($formValues) . Обе эти функции принимают параметр $formValues :

Пропишите PHP-функции в объекте xajax , используя метод registerFunction() . Объект хajax создает функции-обертки для PHP-функций, которые могут быть вызваны из PHP-сценария или обработчика событий формы ввода.

Xajax генерирует асинхронные функции-обертки для зарегистрированных PHP-функций. Имя функции имеет формат xajax_phpfunction . Переменная phpfunction — это серверная PHP-функция, для которой определяется функция-обертка. Xajax обеспечивает асинхронную обработку формы с помощью метода getFormValues(string formId) . При помощи метода getFormValues() , массив значений полей формы может быть передан в качестве аргумента асинхронной функции-обертке xajax. Посредством функции getFormValues(string formID ,boolean submitDisabledElements, string prefix]) передавать не все поля формы, а лишь некоторое их подмножество. Параметр prefix определяет, что должны быть передаваться только те элементы, которые имеют этот префикс. Логический параметр submitDisabledElements определяет, должны ли передаваться отключенные элементы. PHP-функции validateCatalogId и updateCatalog задают параметр для массива значений полей формы. Перед инициацией запроса XMLHttpRequest укажите объекту xajax обрабатывать запросы при помощи функции processRequests() :

Также установите в тегах формы ввода, что xajax должен генерировать любой требуемый JavaScript после того, как серевером будет отправлен XML-ответ:

Запрос XMLHttpRequest инициирован клиентским приложением. В приложении-примере запрос XMLHttpRequest запущен обработчиком событий onkeyup в поле ввода catalogId:

Поле ввода вызывает функцию-обертку xajax_validateCatalogId с массивом значений полей формы в качестве параметра. Эта функция отсылает запрос XMLHttpRequest на сервер. Объект xajax получает запрос XMLHttpRequest и вызывает соответствующую PHP-функцию validateCatalogId($formValues) .

Для отправки ответа клиентскому приложению Xajax предоставляет класс xajaxResponse . В функции validateCatalogId создадим объект xajaxResponse :

Функция validateCatalogId проверяет значение Catalog Id, добавленное в форме ввода. Извлечем значение поля catalogId из массива $formValues :

Далее, используем расширение PHP PDO для установления соединения с базой данных DB2 и определяем, существует ли строка таблицы Catalog со значением id, указанным в форме ввода.

Определяем переменные для пользователя и пароля:

Устанавливаем соединения с БД DB2 при помощи конструктора PDO:

Конструктор PDO возвращает ресурс установленного соединения с DB2, если это соединение было успешно установлено. Создайте подготовленное SQL-выражение для выбора строки данных по значению catalog id, указанному в форме. Используйте функцию prepare ( string statement [, array driver_options] ) для компиляции подготовленного выражения:

При помощи атрибута курсора PDO::ATTR_CURSOR сделайте курсор скроллируемым:

Привяжите параметр CatalogId , используя метод bindParam() :

Выполнийте SQL-запрос с подготовленным выражением при помощи функции execute ([array input_parameters] ) :

Получите результирующий набор строк, используя функцию fetch ( [int fetch_style [, intcursor_orientation [, int cursor_offset]]] ) :

Функция fetch() возвращает TRUE , если запрашиваемая строка существует и FALSE , если нет. Если fetch() возвращает FALSE , результирующий набор пуст, таким образом строка таблицы Catalog для указанного значения id не определена. Следовательно, введенное в форму значение поля Catalog Id допустимо. Далее, сгенерируем ответ для отсылки его клиентскому приложению. Ответ содержит одно или несколько командных сообщений. Некоторые наиболее часто использующиеся сообщения описаны в таблице 1:

Рубрика: Веб / Веб
Assign Устанавливает указанный атрибут элемента на странице ввода при помощи метода addAssign(string elementId, string attribute, string data)
Append Добавляет данные к заданному атрибуту элемента на странице ввода при помощи метода addAppend(string elementId, string attribute, string data)
Prepend Присоединяет данные к заданному атрибуту элемента на странице ввода при помощи метода addPrepend(string elementId, string attribute, string data)
Replace Заменяет данные в заданном атрибуте элемента на странице ввода при помощи метода addReplace(string elementId, string attribute, string replace, string data)
Script Запускает заданный код JavaScript при помощи метода addScript(string javascript)
Alert Показывает окно предупреждения с заданным сообщением при помощи метода addAlert(string message)

Если метод fetch() возвращает FALSE , то отображается сообщение validationMessage : «Catalog Id is Valid». Метод addAssign устанавливает innerHTML для validationMessage .

Если же функция fetch() возвращает TRUE , то значение id каталога определено в таблице Catalog. Следовательно, добавленное в форме ввода значение Catalog Id недопустимо. Если метод fetch() возвращает строку, устанавливаем innerHTML для validationMessage в «Catalog Id is not Valid»:


Далее, извлекаем значения из строки результирующего множества и устанавливаем значения в полях формы ввода. Функция fetch() устанавливает указатель результирующего множества на следующую строку.

Извлекаем значения полей из строки результирующего множества функцией $row[mixedcolumn] . Параметр column может быть определен как индекс столбца (начиная с 0) или имя столбца. Например, в приведено ниже листинге при помощи PHP-кода получаем значение столбца journal :

Установите атрибут value полей формы ввода методом addAssign , например, атрибут value элемента journal установлен так:

Также, блокируйте кнопку передачи данных (submit):

Возвращаем объект $objResponse из функции validateCatalogId в качестве XML-строки:

XML-отклик отправляется в обработчик xajax, который передает его механизму xajax для передачи сообщений JavaScript. Механизм передачи сообщений анализирует XML-инструкции и устанавливает элементы страницы ввода. Таким образом, данные заданные в объекте $xmlResponse методом addAssign , установлены в форме ввода.

Функция updateCatalog($formValues) использована для обновления таблицы Catalog на основе данных из формы ввода. Если значение поля Catalog Id допустимо, то можно создать новый каталог, вводя значения в другие поля формы. Нажмите на кнопку Create Catalog для передачи данных из формы. Обработчик событий onsubmit вызывает функцию-обертку xajax_updateCatalog , которая отсылает запрос XMLHttpRequest на сервер:

Объект xajax получает запрос XMLHttpRequest и вызывает соответствующую PHP-функцию updateCatalog($formValues) . В функции updateCatalog , извлеките значения полей формы и создайте SQL-выражение для добавления строки в таблицу Catalog. Осуществите подключение к базе данных и запустите выполнение SQL-инструкции. Сценарий input.php приведен в листинге 2:

Далее запустите сценарий input.php на сервере Apache. Скопируйте input.php в каталог C:\Apache2\Apache2\htdocs. Запустите PHP-сценарий, набрав адрес http://localhost/input.php. Получаем форму ввода, как показано на рисунке 1:

Начните вводить значениедля поля Catalog Id. Появится сообщение о проверке допустимости значения поля Catalog Id, как показано на рисунке 2:

HTTP-запрос XMLHttpRequest отсылается с каждым изменением в поле ввода.

Если введенное значение уже определено в таблице Catalog, то показывается сообщение «Catalog Id is not Valid», как показано на рисунке 4. Например, введите значение «catalog1» в поле Catalog Id. Так как значение «catalog1» уже было определено ранее, отображается сообщение «Catalog Id is not Valid».

Вы можете создать новою позицию в каталоге, указав допустимое значение поля Catalog Id и вводя значения в другие поля формы. Нажмите на кнопку Create Catalog , чтобы создать позицию в каталоге, как показано на рисунке 5:

Если поле Catalog Id прежде использовалось для создание позиции каталога, «catalog3» в нашем примере, то будет отображено сообщение «Catalog Id is not Valid» как показано на рисунке 6:

В этой статье вы увидели, как асинхронный клиент-серверный запрос XMLHttpRequest , обеспечиваемый с помощью Ajax, может сочетаться с PHP-сценариями для разработки динамических Web-приложений. Используйте эти примеры при разработке собственных динамических Web-приложений для доступа к данным DB2.

Введение в xajax

AJAX (англ. Asynchronous JavaScript and XML — асинхронный JavaScript и XML) — это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. АJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.

Study & Dev О программировании и не только

Введение в технологию ajax. Часть 3

Сегодня мы продолжаем и заканчиваем знакомство с технологией асинхронных вызовов – ajax. В прошлый раз я рассказал о том, что html-страница может подгружать данные с сервера в различных форматах: xml – мы говорим об ajax, в формате json – мы говорим об ajaj. Я рассказал о возможностях, которые представляет библиотека jquery, позволяя нам загружать асинхронно информацию, управлять форматом принимаемых данных, обрабатывать ошибки. Сегодня я смещу фокус рассмотрения материала с того “как бы хотя бы вызвать что-то” к тому “как бы это сделать удобным для пользователя”. Также я расскажу об том, как можно загружать на сервер файлы, как работать с историей браузера.

Начнем мы, однако, с рассмотрения простой и очевидной, но забываемой в бездумной погоне за высокими технологиями проблемы. Окно браузера состоит из множества различных “штуковин”, и самой главной является строка ввода адреса. Пользователь верит, что если он введет в эту строку некоторый адрес, нажмет кнопку ввод, то откроется специальная страница. В принципе, так все и было до того, как начали получать широкое распространение сайты сделанные целиком на flash и ajax. Особенность таких сайтов в том, что после того как flash-ролик был загружен, он реализует собственную логику обработки действий пользователя. Так, когда пользователь жмет на ролике кнопку “о компании”, то ему flash-ролик подгружает содержимое из внешнего ресурса, создает определенный gui, в который помещается информация — но и ни одно из этих действий не отображается в адресной строке браузера. Для ajax-основанных сайтов все то же самое: мы подгружаем внешнее содержимое, вид страницы меняется – но адресная строка остается без изменений. Полгода назад мне попался на глаза сайт сделанный веб-студией Сами_Знаете_Кого, сайт этот представлял некоторый реестр юридической информации, или финансовой – не важно. Главное в том, что информации было много, и она была организована в виде иерархии разделов. Т.е. на странице сбоку было меню в форме дерева, можно было раскрывать узлы – категории документов, и, в конце концов, добраться до собственно хранимых документов. Подгрузка содержимого узлов дерева делалась с помощью ajax, равно как и загрузка содержимого документа в центральную часть страницы. В адресной строке при этом ничего не менялось и представляете себе удовольствие, которое получал безымянный сотрудник, которому нужно было послать по почте ссылку на документ, хранящийся в этом реестре. Вопрос в лоб: можно ли изменить содержимое адресной строки с помощью javascript, flash или как-то еще. Нет, к счастью нет. Знатоки javascript скажут, что можно вызвать метод: “window.location.href = ‘новый_адрес_для_перехода’ ”. Отлично, но какой тут ajax? Если вы при этом покинете страницу, перейдя по новому адресу. Надеяться на то, что адресную строку можно менять без перехода по другому адресу бессмысленно – в Интернете широко распространилось такое явление как “фишинг” – подделка сайта, выдача собственного сайта за другой. Так что, ни один браузер не оставит такую потенциально опасную функцию. Все что нам доступно — это изменять якорь. Ту самую часть адреса, которая расположена после имени документа и отделена от него символом “#”. Соответственно, когда страница загружается, вы внутри javascript-кода страницы должны проверить значение этого якоря, и выполнить загрузку необходимых ресурсов. Аналогично, на каждое действие пользователя загружающее в страницу новую информацию должно изменять значение этого якоря. Например, в примере ниже я создал две страницы php с информацией – они называются contacts.php и documents.php. Также есть главная страница html, содержащая две кнопки, загружающие предыдущие файлы во внутрь тега div. Загрузка идет с помощью метода load, который можно применить к любому узлу документа найденного с помощью вызова $(‘то_что_надо_найти’). В качестве параметров этому вызову я передаю адрес документа для загрузки — некоторый ассоциативный массив с переменными, и функцию, срабатывающую в том случае, если загрузка была успешна. В теле функции я изменяю значение переменной window.location.hash. Когда страница загружена, анализирую чему равна переменная window.location.href и вызываю функции загрузки нужного содержимого. Ниже пример кода главного html-файла:

Результат работы скрипта показан на рис. 1.

На этом про адресную строку все, последнее, о чем упомяну перед новой темой – это как быть, если вы flasher и решили озаботиться поддержкой адресации роликов. Вовсе необязательно изобретать очередной велосипед. Метод работы с window.location.hash, который я вам показал, лег в основу достаточно известной библиотеки swfaddress, ее домашний сайт: http://www.asual.com/swfaddress/

Вторая функция, которой привык пользоваться типовой посетитель сайта: кнопки “назад” и “вперед”. Предполагается, что, нажав “назад”, клиент увидит предыдущую страницу. Увы и опять, ничего подобного не происходит. Вообще до тех пор, пока не будет реализована поддержка ajax-юзабилити на уровне браузера говорить о промышленном внедрении ajax-идей просто бессмысленно. Снова попробуем имитировать отсутствующую функциональность. Неприятность в том, что разные браузеры ведут себя по разному. Так opera и firefox при изменении свойства “window.location.hash” или же “window.location.href” (в этом случае отличия только в части после “#”) сохраняют адрес в историю как НОВЫЙ. Т.е. при нажатии на кнопку “вперед”|”назад” будет меняться значение адресной строки, а физически мы будем оставаться на той же странице. Как отследить момент изменения адресной строки я не нашел. Так попытка установить обработчик события: “window.onunload = то_что_ будет_вызвано_при_ выгрузке_страницы;” и “window.onload = то_что_будет _вызвано_при_загрузке _страницы;” ни к чему не привели. События не генерируются. В объекте history нет никаких событий или свойств позволяющих реагировать на изменении адреса страницы. Максимум, до чего я додумался – это создать функцию, вызываемую по таймеру, которая бы с интервалом, скажем, в 1000 миллисекунд проверяла бы значение адресной строки и вызывала бы соответствующую функцию загрузки содержимого. Например, так:

Это почти завершенный пример, не хватает только пары проверок позволяющих избежать дублирующиеся загрузки содержимого, но это, я уверен, вы сделаете и сами. Что касается самого “замечательного” в мире браузера internet explorer, то он снова показал свой норов. Изменяй “window.location.hash” или “window.location.href” – ему без разницы — в историю никаких новых записей не вносится. Следовательно, никакой поддержки кнопок “назад”/”вперед” сделать нельзя, хотя я и не проверял как ведет себя седьмая версия ie.

Теперь разберем вопрос загрузки на сервер файлов. Здесь все ужасно плохо. Родной поддержки отправки файлов ajax не имеет. Нам придется имитировать данный процесс с помощью flash или хитроумных хаков. Начнем с вопроса: что может отправить на сервер файл? Очевидно, только форма (тег “form”). Очевидно, что прямой программный доступ к файловой системе из javascript — это страшная дырка в безопасности браузера и ее быть не должно. Итак, форма, но отправка ее приводит к полной перезагрузке страницы – не подходит. Или все же подходит, но если сделать так, что форма будет отправляться не с нашей веб-страницы, а с чего-то другого. Например, внедрим в страницу невидимый плавающий фрейм, содержащий форму, заполним ее информацией и скажем submit и форма отправилась. Или еще проще, форма расположена в главной файле html, а ее свойство target (имя окна в котором должна открыться страница) указывает на тот самый невидимый фрейм.

Результат работы скрипта показан на рис. 2.

Далее, при загрузке файлов интерес представляет задача мониторинга за процессом загрузки: какой процент этой операции уже выполнен, а результаты отображать в виде растущей полоски progressbar. Сразу скажу, что применять методику описанную далее имеет смысл только если размер файла достаточно велик, иначе будет достаточно просто показать некоторую анимированную картинку (например, часы) – мол ждите, загрузка идет. Итак если файл велик и надо следить за тем как она загружается, то … прежде всего эта задача не так и проста и однозначна. Когда вы вызываете некоторый php-скрипт, то он не получает управления до момента полной, я подчеркиваю, полной загрузки всех передаваемых ему данных и файлов. Но все загружаемые файлы помещаются в некоторую временную папку, общую для всех php-скриптов на сервере. Очевидно, что по мере загрузки данных, файл будет расти. Итак файл, растет, затем вызвается php-скрипт, и по окончанию работы скрипта, файл будет удален, так что программисту в общем случае следует позаботиться об его сохранности (в предыдущем примере я использовал для этого функцию move_uploaded_file). Само названии технологии ajax – асинхронные вызовы, говорит нам что можно запустить один процесс, который будет загружать файл, а также с некоторым интервалом запускать процесс, который будет отслеживать размер растущего временного файла и возвращать это число в код javascript, там мы его уже можем использовать в роли progressbar. Увы, увы, это будет работать только в идеальной ситуации. Например, у вас на локальном сервере, или даже в Интернете, если нагрузка на сервер не велика. Проблема в том, как узнать какой файл является временным? Хорошо если ваш хостинг (виртуальный – наиболее типичный и дешевый вариант хостинга – предполагает что на одном физическом компьютере выполняется несколько веб-сайтов) настроен таким образом, что у каждого сайта (клиента) собственная папка для временных файлов. Но даже если это так, то вам нужно надеяться только на то, что в одно и тоже время не будет запущен еще один (любой скрипт) загружающий на сервер файлы. Например, по адресу http://www.sql.ru/forum/actualthread.aspx?t >

Результат работы скрипта показан на рис. 3.

Закончить эту статью не упомянув пару слов про отладку ajax-основанных решений не возможно. Я рекомендую использовать браузер firefox с установленным плагином firebug (возможно применять и livehttpheaders). Затем, открыв окно firebug (меню Tools->Firebug->Open firebug), вы переходите на закладку “Net” и видите перечисление всех асинхронных запросов, которые были сделаны со страницы, также видите какие данные вы отправили на сервер и которые получили, видите и значения служебных заголовков. Пример окна firebug показан на рис. 4.

Введение в JQuery

JQuery является “писать меньше, делать больше” JavaScript библиотека. Это не язык программирования, а скорее инструмент , используемый для написания сделать общие задачи JavaScript более краткими. Jquery имеет дополнительное преимущество, это кросс-совместимый браузер, то есть вы можете быть уверены, выход вашего кода будет оказывать как задумано в любом современном браузере.

Сравнивая простой пример программы “Привет, мир!” в JavaScript и JQuery, мы можем увидеть разницу в том, как они оба написаны.

Этот короткий пример демонстрирует, как JQuery может достигнуть того же конечного результата как обычный JavaScript в сжатой форме.

Данное руководство не принимает на себя никаких предварительных знаний о Jquery, и будет охватывать следующие темы:

  • Как установить Jquery в веб-проекте.
  • Определения важных концепций веб-разработки, таких как API, DOM и CDN.
  • Общие селекторы JQuery, события и эффекты.
  • Примеры для проверки концепции, которые вы узнали на протяжении всей статьи.

Предпосылки

Перед тем, как начать это руководство вам необходимо следующее:

  • Базовые знания HTML и CSS. Вы уже должны знать, как создать простой веб-сайт, а также иметь представление о селекторов CSS, таких как идентификаторы, классы и псевдо элементы.
  • Понимание основ программирования. В то время как можно начать писать JQuery без передовых знаний JavaScript, знакомство с понятиями переменных и типов данных , а также математики и логики существенно поможет.

Настройка Jquery

JQuery является файл JavaScript, который вы внедряете в виде ссылки в вашем HTML. Есть два способа включить JQuery в проекте:

  • Загрузить локальную копию.
  • Ссылка на файл через сеть доставки контента (CDN).

Примечание: Сеть доставки контента (CDN) представляет собой систему из нескольких серверов, которые обеспечивают веб – контент для пользователя на основе географического положения. Когда Вы даете ссылку на размещенный файл Jquery через CDN, он будет потенциально загружен быстрее и эффективнее для пользователя, чем если вы его принимали на своем собственном сервере.

Мы будем использовать CDN, чтобы ссылаться на Jquery в наших примерах. Вы можете найти последнюю версию JQuery в библиотеке компании Google . Если вместо этого вы хотите загрузить его, вы можете получить копию JQuery с официального сайта.

Мы начнем это упражнение, создав небольшую веб – проект. Он будет состоять из style.css в каталоге css/ , scripts.js в каталоге js/ , и главный файл index.html в корневом каталоге проекта.


Для того, чтобы начать, сделайте HTML скелет и сохранить его как index.html .

Ссылка на файл JQuery CDN перед закрывающим тегом

Часть 4 Ajax

Глава 10 Введение в Ajax

Ajax — это термин, придуманный Джесси Джеймсом Гарретом (Jesse James Garrett) из компании Adaptive Path для объяснения асинхронной связи между клиентом и сервером, открывающей возможности использования объекта XMLHttpRequest , предоставляемого всеми современными браузерами. Ajax — это всего лишь термин, означающий Asynchronous JavaScript и XML, который используется для краткого изложения технологии, необходимой для создания динамического веб-приложения. Кроме того, отдельные компоненты технологии Ajax являются полностью взаимозаменяемыми — вполне приемлемо, к примеру, вместо XML использовать HTML.

В этой главе мы собираемся рассмотреть детали формирования полноценного Ajax-процесса (который концентрируется на осуществлении запроса от браузера к серверу). Будет рассмотрено все, от физического запроса как такового, до JavaScript-взаимодействия и работы с данными, необходимой для выполнения всей работы. Сюда включаются:

  • Исследование различных типов HTTP-запросов и определение, как наилучшим образом отправить объекты данных на сервер.
  • Рассмотрение всего http-ответа и попытка обработки всех ошибок, которые могут с ним произойти, включая истечение времени отклика сервера.
  • Чтение данных, присланных сервером в ответ, перемещение по ним и их обработка.

Полностью разобравшись с тем, как осуществляется Ajax-процесс и как он может быть реализован, вы поймете, как он может быть использован во всем, от типичных ситуаций, до полноценных приложений. В главах 11, 12 и 13, мы также будем рассматривать ряд случаев использования Ajax-технологий.

Использование Ajax

Для создания простой Ajax-реализации не требуется большого объема кода, но ее предоставляемые ею возможности впечатляют. К примеру, вместо того, чтобы заставлять пользователя после отправки формы целиком запрашивать всю страницу, процесс отправки может быть обработан асинхронно, и после его завершения будет отображена только небольшая часть страницы с желаемыми результатами. Например, процесс поиска доступных доменных имен (с целью их приобретения) может быть медленным и трудоемким. Как только вам захочется найти новое имя , нужно набирать запрос в форме, отправлять его, и наблюдать за перезагрузкой страницы. С использованием Ajax можно получить мгновенный результат, такой, как, к примеру, предоставляет веб-приложение Instant Domain Search ( http:// instantdomainsearch.com/ ), показанное на рис. 10.1.

Рис. 10.1. Пример использования Instant Domain Search для поиска доменных имен по мере набора текста

HTTP-запросы

Пожалуй наиболее важным и, наверное, самым совместимым аспектом Ajax является та часть процесса, которая относится к HTTP-запросу. Hypertext Transfer Protocol (HTTP) был разработан для простой передачи HTML-документов и однородных файлов. К счастью все современные браузеры поддерживают средства для динамической установки HTTP-соединения с использованием JavaScript. Как показала практика, эти средства очень полезны для разработки более «отзывчивых» веб-приложений.

Асинхронная отправка данных на сервер и получение в ответ дополнительных данных является основным назначением Ajax. Как именно отформатированы данные в конечном счете зависит от определенных вами требований, которые будут рассмотрены разделе «Обработка данных ответа».

В следующих разделах мы собираемся посмотреть, как форматировать данные, передаваемые на сервер с использованием HTTP-запросов. Затем мы собираемся рассмотреть, как устанавливаются основные соединения с сервером, и посмотреть на подробности их реализации в кроссбраузерной среде.

Установка соединения

Первоначальным аспектом Ajax-процесса является открытие соединения с сервером. Чтобы этого добиться существует несколько различных способов, но мы рассмотрим специфические средства, с помощью которых можно легко не только послать, но и получить данные. Эта технология обычно называется «использование объекта XMLHttpRequest».

В зависимости от пользовательского браузера передача данных производится двумя различными способами применения объекта XMLHttpRequest :

  • Internet Explorer, которые впервые проложил путь этому средству браузерной передачи данных, устанавливает все свои соединения с помощью ActiveXObject (конкретная версия которого изменяется в зависимости от версии Internet Explorer). К счастью, Internet Explorer 7 обладает собственной поддержкой объекта XMLHttpRequest .
  • Все остальные современные браузеры локализовали все возможности XMLHttpRequest в объекте под тем же названием. К их числу относятся Firefox, Opera и Safari.

Хорошо, что несмотря на отличия существующего в Internet Explorer метода создания объекта XMLHttpRequest от метода, используемого во всех остальных современных браузерах, у этого объекта такой же набор полезных функциональных свойств. Объект XMLHttpRequest обладает рядом методов, используемых для установки соединения и чтения данных с сервера. В листинге 10.1 показано, как послать на сервер основной GET-запрос.

Листинг 10.1. Кроссбраузерное средство создания HTTP GET-запроса на сервер

Как видите, код, необходимый для установки соединения с сервером, совсем простой, и его создание не требует практически никаких усилий. Сложности возникают, когда дело доходит до дополнительных возможностей (например, до проверки истечения срока запроса или измененных данных); но эти детали мы рассмотрим в разделе «HTTP ответ».

Самая важная особенность всей методологии Ajax состоит в передаче данных от клиента (например, веб-браузера) к серверу. С учетом этого давайте рассмотрим детали, необходимые для упаковки данных и отправки их на сервер.

Преобразование данных в последовательную форму

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

  • Передача обычного объекта JavaScript, который может быть использован для хранения пар ключ-значение (где значения представлены либо числами, либо строками).
  • Передача значений из нескольких элементов ввода формы (этот вариант отличается от первого тем, что в нем имеет значение порядок передаваемых элементов, тогда как порядок значений, передаваемых в первом случае, может быть абсолютно произвольным).

Давайте посмотрим в листинге 10.2 несколько примеров типов данных, которые можно передать на сервер, а также на получившееся из них на выходе последовательное представление, воспринимаемое сервером.

Листинг 10.2. Примеры простых JavaScript-объектов, преобразованных в последовательную форму

Формат, использованный для сериализации данных является стандартным форматом для передачи в HTTP-запросе. Вы, наверное, их уже видели в стандартном HTTP GET-запросе, который выглядит следующим образом:

Эти данные также могут быть переданы в POST-запрос (и в намного большем количестве, чем в простое отправление). Мы рассмотрим эти отличия в будущем разделе.

На данный момент давайте создадим стандартные средства сериализации структур данных, представленных в листинге 10.2. Специальная функция, выполняющая эту задачу, показана в листинге 10.3. Она способна преобразовать в последовательную форму большинство элементов ввода формы, за исключением элементов, имеющих множественный выбор.

Листинг 10.3. Стандартная функция для сериализации структур данных в совместимую с HTTP схему параметров

Получив последовательную форму наших данных (в виде простой строки), мы может посмотреть, как отправить эти данные на сервер, используя GET- или POST-запрос.

Создание GET-запроса

Вернемся к созданию HTTP GET-запроса на сервер с использованием XMLHttpRequest, но на этот раз уже с отправкой дополнительных данных, преобразованных в последовательную форму. Простой пример такого запроса показан в листинге 10.4.

Листинг 10.4. Кроссбраузерное средство создания HTTP GET-запроса к серверу (не приспособленное для чтения ответных данных)

Важно отметить, что сериализованные данные добавляются к URL сервера (с использованием в качестве разделителя знака вопроса — ? ). Все веб-серверы и находящиеся на них веб-приложения знают, что данные, включенные после знака вопроса являются последовательным набором пар ключ-значение. Вопрос обработки возвращаемого сервером ответа (основанного на переданных ему данных) будет рассмотрен в разделе «Обработка ответных данных».

Создание POST-запроса

Другая форма создания HTTP-запроса к серверу, с использованием XMLHttpRequest , относится к POST, и в ней задействуются совершенно другие способы отправки данных на сервер. Прежде всего POST-запрос способен отправлять данные любого формата и любой длины (не ограничиваясь лишь сериализованной строкой данных).

При передаче на сервер сериализованный формат, используемый для данных обычно снабжается типом содержимого application/x-www-form-urlencoded . Это означает, что вы также можете посылать на сервер чистый XML (с типом контента text/xml или application/ xml ) или даже объект JavaScript (используя тип контекста application/json ).

В листинге 10.5 показан простой пример создания запроса и отправки дополнительных сериализованных данных.

Листинг 10.5. Кроссбраузерное средство создания HTTP POST-запроса к серверу (не приспособленное для чтения ответных данных)

Чтобы более подробно рассмотреть предыдущее утверждение, обратимся к случаю отправки на сервер данных, не приведенных к сериализованному формату. Соответствующий пример показан в листинге 10.6.

Листинг 10.6. Пример отправки на сервер POST-запроса, содержащего данные в формате XML

Весьма существенной является возможность посылать большое количество данных (в отличие от GET-запроса, предел для которого, в зависимости от браузера, составляет всего пару килобайт, ограничений на количество передаваемых данных нет). Это позволяет создавать реализации различных протоколов обмена данными, например, XML-RPC или SOAP.


Но, чтобы не усложнять материал, мы ограничимся наиболее распространенными и полезными форматами данных, которые делают доступным HTTP ответ.

HTTP ответ

Аспектом создания и использования XMLHttpRequest , который ставит его выше всех остальных упрощенных форм односторонней связи, является возможность чтения различных текстовых форматов данных, посылаемых сервером. Сюда включается и один из краеугольных камней Ajax: XML (хотя этим еще не утверждается, что при создании Ajax-приложений может быть использован только XML. Кстати, в разделе «Обработка ответных данных» показан ряд других альтернативных форматов).

Для начала взглянем на листинг 10.7 с очень простым примером обработки данных ответа, полученного от сервера.

Листинг 10.7. Установка соединения с сервером и чтение результирующих данных

В этом примере можно увидеть, как получать доступ к различным блокам данных, полученных в ответе HTTP. Каждое из двух свойств, responseXML и responseText , будет содержать данные, отформатированные соответствующим образом. Например, если сервер возвращает XML-документ, то DOM-документ будет находиться в responseXML ; любой другой ответ и его результаты будут находиться в responseText .

Перед тем, как заняться обработкой, перемещением и управлением полученными данными, давайте поработаем над более сложной версией функции onreadystatechange (из листинга 10.7), способной обрабатывать ошибки сервера и истечение срока соединения.

Обработка ошибок

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

  • Код ответа успешно обработанного запроса: Предполагаемый способ проверки на наличие ошибок заключается в отслеживании кода состояния ответа HTTP, который включен в HTTP-спецификацию как средство оповещения клиента о том, что делает сервер. Успешным считается такой запрос, чей код состояния находится в диапазоне 200.
  • Ответ, не подвергшийся изменениям: Возвращенный сервером документ может иметь пометку «Not Modified» (код состояния 304). Это означает, что данные, полученные с сервера, не подверглись изменениям, и были загружены не с него, а из персональной кэш-памяти браузера. Поскольку данные по-прежнему могут быть считаны клиентом, важно не считать этот ответ за ошибку.
  • Локально размещенные файлы: Если Ajax-приложение запущено на вашем локальном компьютере (без участия веб-сервера), код состояния возвращаться не будет, даже если запрос будет успешным. Значит, ситуацию, при которой запрос не имеет кода состояния и осуществляется просмотр локального файла нужно рассматривать как успешный ответ.
  • Ответ, не подвергшийся изменениям и Safari: Если документ не подвергся изменениям со времени последнего запроса (и если вы не отправляли явным образом серверу заголовок IF-MODIFIED-SINCE ). Этот весьма странный случай может позже помешать процессу отладки.

Помня об этом, рассмотрим листинг 10.8, в котором представлена реализация проверки ответа, которую я ранее уже в общих чертах обрисовал.

Листинг 10.8. Функция, которая может быть использована для проверки состояния успешности полученного с сервера ответа HTTP

Проверка состояния ответа HTTP — шаг очень важный; если его не сделать, можно получить какие-нибудь неприятные и весьма непредсказуемые результаты (например, вместо XML-документа будет возвращена страница ошибки HTML).

В разделе «Полноценный Ajax-пакет» мы встроим функцию в законченное Ajax-решение.

Проверка истечения времени запроса

Еще одной полезной технологией, не включенной в исходную реализацию XMLHttpRequest, является определение момента когда время запроса к серверу истекло, и он уже потерял всякий смысл.

Реализация этого свойства Implementing this feature isn’t as cut-and-dry, but determining the success state of the request (as you did in the previous section) is possible with a little bit of work.

Listing 10-9 shows how you would go about checking for a request time-out in an application of your own.

Листинг 10.9. Пример проверки истечения времени запроса

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

Обработка ответных данных

Во всех ранее приводимых примерах место для ответных данных, полученных с сервера пустовало по той простой причине, что существует поистине бесчисленное множество всевозможных форматов данных, которые могут быть возвращены сервером. Но на самом деле XMLHttpRequest работает только с форматами данных, имеющими текстовую основу. Но даже при этом с некоторыми из них он работает лучше (с XML), чем с другими (с JSON). В этой главе мы собираемся рассмотреть три различных формата данных, которые могут быть возвращены сервером, а затем считаны и обработаны клиентом:

  • XML: Хорошо, что все современные браузеры изначально обеспечивают обработку XML-документов, автоматически превращая их в полезные DOM-документы.
  • HTML: Этот формат отличается от XML-документа тем, что обычно представляет собой простую текстовую строку, содержащую фрагмент HTML-кода.
  • JavaScript/JSON: Он охватывает два формата данных — простой, исполняемый код JavaScript, и представление объекта JavaScript — JSON (JavaScript Object Notation).

У каждого из этих форматов данных есть различные случаи применения, в которых они могут быть особенно полезны. К примеру, существует масса примеров, когда имеет больше смысла вместо XML-документа возвращать фрагменты кода HTML. Важный аспект извлечения данных из ответа HTTP заключается в двух свойствах объекта XMLHttpRequest :

  • responseXML: Это свойство будет содержать ссылку на заранее сгенерированный DOM-документ (представляющий документ XML) если с сервера был возвращен XML-документ. Это случается только если сервер явным образом указал в заголовке контента «Content-type: text/xml», или подобный этому тип данных XML.
  • responseText: Это свойство содержит ссылку на простую текстовую строку возвращенных сервером данных. На этот метод для доступа к своим данным полагаются два типа данных: HTML и JavaScript.

Имея в распоряжении эти два свойства, можно без особого труда создать универсальную функцию для детерминированного извлечения данных из ответа HTTP (и даже определить с чем вы имеете дело, с XML-ответом или с обычным текстом). В листинге 10.10 показана функция, которую можно использовать именно в этом качестве.

Листинг 10.10. Функция, предназначенная для извлечения правильных данных из ответа HTTP-сервера

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

Полноценный Ajax-пакет

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

Законченная Ajax-функция показана в листинге 10.11.

Листинг 10.11. Законченная функция, способная осуществлять необходимые задачи, связанные с использованием Ajax

Важно отметить, что запрос страниц, которые находятся не в том же домене, что и страница, с которой производится запрос, невозможно. Это обусловлено ограничениями, налагаемыми из соображений безопасности всеми современными браузерами (чтобы пресечь попытки кражи вашей персональной информации). Теперь, когда мы располагаем столь мощной функцией, настало время проработать несколько примеров, демонстрирующих новоприобретенную силу Ajax.

Примеры различного использования данных

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

RSS-поток, основанный на формате XML

Несомненно наиболее популярным форматом для возвращаемых сервером данных является XML, и для этой популярности есть весьма серьезные основания. Все современные браузеры обладают своей собственной поддержкой XML-документов, конвертируя их на лету в DOM-представление. Поскольку всю тяжелую работу по синтаксическому разбору берет на себя браузер, все, что остается сделать — пройтись по нему, как по любому другому DOM-документу. При этом важно отметить, что перемещаться по восстановленному из удаленного источника XML-документу с помощью функции getElementById в принципе невозможно. Просто потому, что обычные не-HTML XML-документы не имеют у себя предварительно запрограммированного уникального атрибута ID. Но не смотря на сказанное, все же способ эффективного перемещения по XML-документам есть.

В листинге показан простой пример использования возвращенного XML для создания на веб-сайте элемента отображения RSS-потока.

Листинг 10.12. Загрузка заголовков новостей, содержащихся в удаленном RSS-потоке, основанном на формате XML

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

Вставка HTML

Еще одной технологией, которая может быть выполнена с использованием Ajax является загрузка в документ HTML-фрагментов. Эта технология отличается от только что рассмотренной методики работы с XML-документом тем, что для нее не требуется проводить синтаксический разбор или осуществлять проход по данным, получаемым с сервера; она используется только для вставки этих данных в документ. Использование этого метода — действительно быстрый и впечатляющий способ простого и немедленного получения обновления вашей веб-страницы. Пример использования этого метода показан в листинге 10.13.

Листинг 10.13. Загрузка HTML-фрагмента из удаленного файла и вставка его в текущую веб-страницу

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

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


JSON и JavaScript: Удаленное выполнение

В заключение я собираюсь рассмотреть формат данных (один из тех, к которому мы еще вернемся в главе 13, при изучении wiki), который относится к передаче строк данных JSON и простого кода JavaScript. Передача сериализированных JSON-данных может служить облегченной альтернативой передаче XML-документов от сервера к клиенту. Кроме того, предоставление сервером простого кода JavaScript служит превосходным способом построения динамических многопользовательских приложений. Чтобы ничего не усложнять, давайте рассмотрим удаленную загрузку в приложение файла JavaScript, показанную в листинге 10.14.

Листинг 10.14. Динамическая загрузка и исполнение удаленного JavaScript-файла

Вывод

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

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

AJAX с помощью jQuery. Руководство для начинающих. Часть 3

В последней части серии, посвященной AJAX, мы продолжаем знакомить читателя с методами и приемами сей актуальной технологии веб программирования.

Получаем данные в формате JSON с помощью метода $.getJSON()

Метод $.getJSON() открывает простой путь к получению данных в формате JSON с сервера. Он эквивалентен вызову метода $.get() с параметром формата данных «json» . Синтаксис его вызова идентичен синтаксису метода $.get() за исключением того, что вам не нужно указывать формат данных.

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

Получаем и запускаем код JavaScript с помощью метода $.getScript()

Также как и метод $.getJSON() , который является короткой записью вызова метода $.get() для получения данных в формате JSON, метод $.getScript() является короткой записью вызова метода $.get() для получения и выполнения кода JavaScript, то есть аналогично использованию параметра формата данных «script» . Метод $.getScript() получает два аргумента:

  • URL файла JavaScript для загрузки.
  • Опциональную возвратную функцию, которая выполняется по завершению выполнения загруженного JavaScript кода.

Метод $.getScript() используется для загрузки библиотек и плагинов JavaScript «на лету», то есть тогда, когда они нужны. Так можно уменьшить время начальной загрузки страницы, потому что не нужно включать в заголовок страницы каждую библиотеку JavaScript, которая может быть понадобится, а может быть и нет.

Для демонстрации работы метода $.getScript() переместим код, который выводит прогноз в отдельный файл JavaScript showForecast.js . Весь код будет размещен в функции showForecast() :

Также изменим страницу showForecast.html для получения нашего кода JavaScript с помощью метода $.getScript() :

Запускаем демонстрационный файл и наблюдаем результат работы кода JavaScript, который подгружается из другого файла по мере необходимости.

Код JavaScript в файле showForecast.html начинается с вызова $.getScript() для загрузки библиотеки showForecast.js . Также создается анонимная возвратная функция, которая выполняется сразу после загрузки showForecast.js . Данная функция добавляет обработчик события click для кнопки #getForecast , который вызывает метод $.get() для получения файла getForecast.txt и выполнения загруженной функции showForecast() для вывода сообщения.

Метод $.getScript() добавляет случайный параметр к строке запроса (например, ?_=1330395371668 ) для предотвращения кэширования браузером файла JavaScript.

Создаем обобщенный запрос AJAX с помощью $.ajax()

Высокоуровневые методы AJAX, которые мы рассмотрели ранее ( $.get() , $.post() , load() , $.getJSON() и $.getScript()) открывают простой и легкий путь к использованию общих типов запросов AJAX в своих приложениях. Но иногда требуется более сильный контроль над запросом, или нужно решить задачу, которая недоступна высокоуровневым методам.

В такой ситуации нужно использовать низкоуровневый метод jQuery $.ajax() . Вызов метода $.ajax() делает AJAX запрос к указанному URL. Обобщенный синтаксис вызова следующий:

Аргумент url является адресом URL к которому производится запрос, а параметры является опциональным объектом, который содержит различные значения, которые определяют, как запрос будет выполняться.

Параметры, которые можно использовать с методом $.ajax() :

Параметр Описание Значение по умолчанию
cache Устанавливаем значение true , чтобы разрешить кеширование ответа от сервера, или значение false, чтобы всегда производить запрос. Значение false также принуждает jQuery добавлять случайное число к запросу для предотвращения кеширования.. true ( false , когда используется со значениями ‘script’ и ‘jsonp’ параметра dataType )
complete Задает возвратную функцию, которая выполняется по завершению запроса (независимо от успешности операции). Нет
data Данные, которые пересылаются на сервер в запросе. Нет
dataType Ожидаемый тип данных ответа. Дополнительно можно использовать значение «jsonp» для выполнения запроса JSONP. Автоматическое определение данных
error Задает возвратную функцию, которая выполняется. если запрос завершился ошибкой. Нет
headers Дополнительный заголовок HTTP , который отправляется вместе с запросом в виде пар ключ/значение. <>
password Пароль, который используется, если сервер HTTP требует аутентификации. Нет
success Задает возвратную функцию, которая выполняется, если запрос завершается успешно. Нет
timeout Время ожидания (в миллисекундах) завершения запроса AJAX. Значение 0 означает, что jQuery будет ждать без ограничения во времени.
type Тип запроса: «GET» или «POST» . «GET»
username Имя пользователя, если сервер HTTP требует аутентификации. Нет

Полный список параметров приводится в документации jQuery.

Изменим наш пример для использования метода $.ajax() . Мы можем для нашего прогноза отказаться от кеширования и будем обрабатывать ошибки. Вот модифицированный код страницы showForecast.html :

В данном примере мы используем метод $.ajax() для генерации запроса AJAX. Мы передаем URL в запрос ( getForecast.txt ) вместе со списком опций. Три из данных опций ( data , dataType и success ) соответствуют аргументам, которые мы передаем в метод $.get() . Остальные два ( cache: false и error: errorHandler ) отключают кеширование и устанавливают функцию обработки ошибок errorHandler().

Функция errorHandler() просто выдает сообщение об ошибке пользователю.

Устанавливаем значения по умолчанию с помощью метода $.ajaxSetup()

Вместо того, чтобы каждый раз при формировании запроса AJAX задавать большое количество различных повторяющихся параметров, таких как success , cache и type можно использовать метод $.ajaxSetup() для установки значений по умолчанию. Все запросы AJAX jQuery будут использовать заданные установки, пока их не изменят.

Например, можно по умолчанию отключить кеширование для всех запросов AJAX:

Заключение

Наше введение в технологию AJAX завершилось. Мы представили основные средства для формирования и обработки запросов AJAX с помощью методов jQuery. Остается только наработать практический опыт их применения.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.elated.com/articles/ajax-with-jquery-a-beginners-guide/
Перевел: Сергей Фастунов
Урок создан: 7 Марта 2012
Просмотров: 62513
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Илон Маск рекомендует:  Reset - Процедура Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL