Asynchronous JavaScript and XML (AJAX)


Оглавление (нажмите, чтобы открыть):

Обзор Ajax

Одна из главных причин использования кода JavaScript разработчиками — желание избежать обратной отправки. Например, рассмотрим элемент управления TreeView, который позволяет пользователям развертывать и свертывать узлы по своему желанию.

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

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

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

Уже давно в сфере разработки веб-приложений появился — . Он представляет собой приложение JavaScript, отличающееся одной специальной характеристикой, а именно — страницы в стиле Ajax обмениваются данными с сервером в фоновом режиме для запроса дополнительной информации. Когда клиентский код получает эту информацию (которая может быть передана в виде XML-пакета), он предпринимает дополнительные действия.

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

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

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

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

Объект XMLHttpRequest

Краеугольным камнем Ajax является объект XMLHttpRequest. Этот объект чрезвычайно полезен и обманчиво прост. По сути, он позволяет асинхронно отправлять запросы серверу и получать результаты в виде текста. А решение о том, что запрашивать, как обрабатывать запрос на стороне сервера и что возвращать клиенту, возлагается на разработчика.

Хотя современные браузеры предоставляют широкую поддержку объекта XMLHttpRequest, существуют тонкие различия в способе получения к нему доступа. В некоторых браузерах, включая Internet Explorer 7, Firefox, Safari и Opera, объект XMLHttpRequest реализован в виде собственного объекта JavaScript. В версиях, предшествующих Internet Explorer 7, он реализован как объект ActiveX. Вследствие этих различий код JavaScript должен быть достаточно интеллектуальным, чтобы использовать правильный подход при создании экземпляра XMLHttpRequest. Ниже приведен клиентский код JavaScript, который Microsoft применяет при решении этой задачи для клиентской функции обратного вызова:

Отправка запроса

Для отправки запроса с помощью объекта XMLHttpRequest будут использоваться два метода: open() и send().

Метод open() устанавливает вызов — он определяет запрос, который требуется отправить серверу. У него есть два обязательных параметра — тип команды HTTP (GET, POST или PUT) и URL-адрес. Например:

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

По умолчанию все запросы, выполняемые с помощью объекта XMLHttpRequest, являются асинхронными, И в основном нет причин изменять это поведение. Если решите выполнять вызов синхронно, с тем же успехом можно инициировать обратную отправку — в конце концов, пользователь будет неспособен сделать что-либо, пока страница заморожена и ожидает ответа. Отсутствие асинхронности означает отсутствие Ajax.

Метод send() отправляет запрос. Если запрос является асинхронным, он выполняет возврат немедленно:

Метод send() принимает единственный необязательный строковый параметр. Его можно применять для предоставления дополнительной информации, отправляемой с запросом, такой как значения, которые отправляются с запросом POST.

Обработка ответа

Очевидно, что был упущен один нюанс. Мы выяснили, как отправить запрос, но как обработать ответ? Секрет в том, чтобы присоединить обработчик события, используя свойство onreadystatechange. Это свойство указывает на клиентскую функцию JavaScript, которая вызывается, когда запрос завершен и данные доступны:

Конечно, обработчик события должен быть присоединен до вызова метода send() для запуска запроса.

Когда ответ возвращен с сервера и функция инициирована, необходимую информацию можно извлечь из объекта xmlRequest через свойства responseText и responseXML. Свойство responseText предоставляет все содержимое как одну длинную строку. Свойство responseXML возвращает содержимое в виде дерева узловых объектов.

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

Пример использования Ajax

Теперь, когда мы бегло ознакомились с объектом XMLHttpRequest, его можно использовать в простой странице. Чтобы создать страницу в стиле Ajax внутри приложения ASP.NET, нужны два компонента:

Поддерживающая Ajax веб-страница, которая включает клиентский код для выполнения запроса посредством объекта XMLHttpRequest.

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

Очевидно, что первым компонентом является веб-страница .aspx. Вторым компонентом может быть другая веб-страница .aspx или специальный обработчик HTTP. Обработчик HTTP — это более простой вариант, поскольку он не использует полностраничную модель.

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

Ниже приведен полный код обработчика HTTP (чтобы добавить его в проект выберите в меню Website Add New Item Generic Handler):

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

Теперь, когда обработчик HTTP готов, его можно вызвать в любое время с помощью объекта XMLHttpRequest. На рисунке ниже показан пример страницы, которая выдает запрос каждый раз, когда пользователь нажимает клавишу в любом текстовом поле. Запрос предоставляет значения из двух текстовых полей, а результат отображается в затененном поле в нижней части страницы. Для подтверждения, что Ajax работает, в верхней части страницы выводится анимированное GIF-изображение. Обратите внимание, что во время обратного вызова формы в восковом светильнике продолжают непрерывно видоизменяться:

В основном, без учета кода JavaScript, работа страницы происходит следующим образом. Обратите внимание, что страница подключается к клиентскому коду JavaScript двумя способами. Во-первых, событие onload в дескрипторе запускает функцию CreateXMLHttpRequest(), которая создает объект XMLHttpRequest. Во-вторых, два текстовых поля используют событие onKeyUp, чтобы инициировать вызов функции CallServerForUpdate():

Для создания соответствующей версии объекта XMLHttpRequest функция CreateXMLHttpRequest() использует рассмотренный ранее подход. Функция CallServerForUpdate() находит объекты текстового поля, захватывает их текущие значения и применяет их для построения URL-адреса, который указывает на обработчик HTTP. Затем код отправляет асинхронный запрос GET обработчику HTTP. И, наконец, когда ответ получен, запускается функция ApplyUpdate(). При условии отсутствия каких-либо ошибок новая информация извлекается из возвращенного текста и используется для создания сообщения, которое отображается в метке:

Этот код проверяет значение readyState, чтобы удостовериться в получении ответа. Значение readyState начинается с 0 в момент создания объекта XMLHttpRequest, затем изменяется на 1 при вызове метода open(), затем сменяется на 2 после отправки запроса, потом изменяется на 3 при получении ответа и, наконец, становится равным 4, когда ответ полностью загружен. Если значение readyState равно 4, код проверяет свойство состояния (status), которое предоставляет код HTTP-ответа. Значение 200 указывает, что ответ был получен успешно; другие коды указывают на ту или иную ошибку (такую как отсутствующая страница, занятый веб-сервер и т.п.).

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

Блог Евгения Крыжановского

Я научу вас ремонтировать свой компьютер!

Ajax — что это? Асинхронный JavaScript и XML: преимущества и недостатки

Сегодня можно наблюдать за тем, как в интернете набирает популярность использование современных технологий. Одной из таких технологий является AJAX. Что она собой представляет? Каковы ее характеристики? Где может быть использована данная технология? На эти и многие другие вопросы вы сможете найти ответы в рамках данного обзора.

AJAX: общая информация

Как расшифровывается комбинация AJAX? Что она означает? Данное сокращение представляет собой аббревиатуру. Расшифровывается она как «Asynchronous Javascript and XML». Часто в интернете можно найти информацию о том, что данная технология является новой. Однако на самом деле это не совсем так. Дело в том, что XML иJ avascript существуют уже довольно продолжительное время. AJAX является своеобразным синтезом данных технологий. Обычно он используется вместе с термином Web 2.0. AJAX подразумевает под собой использование передовых методов разработки. В чем же состоит особенность данной технологии?

Вы уже имеете общее представление о том, что собой представляет AJAX. Что может нам дать использование данной технологии на практике? Почему сегодня ведутся активные споры об использовании данной технологии? Особенность AJAX состоит в том, что при ее использовании отсутствует необходимость обновления страницы при первой потребности. Вы можете запросить новые данные только для части страницы. Это достаточно удобно, ведь пользователю придется ждать меньше времени. К тому же это довольно экономично для тех пользователей, у которых не безлимитный интернет. Однако, чтобы информировать пользователя о происходящих обновлениях желательно хотя бы использовать текстовые сообщения или индикатор загрузки. Они проинформируют пользователя о новых данных с сервера. В качестве недостатка данной технологии частенько упоминают тот факт, что она не поддерживается устаревшими или текстовыми браузерами. К тому же возможность отключения технологии Javascript имеется у пользователя. Многие пользуются этим. По этой причине не стоит злоупотреблять AJAX. Что это может дать, если не предусмотреть альтернативные методы предоставления информации? Информация в лучшем случае просто не будет отображаться на сайте. В худшем случае, его внешний вид так пострадает, что пользователь вряд ли когда-нибудь на него вернется.

AJAX: преимущества технологии

Технология AJAX предлагает два способа, при помощи которых может быть реализована веб-страница. Первый способ предусматривает внесение изменений без необходимости перезагрузки. Осуществить это можно при помощи динамических обращений к серверу. Второй способ подразумевает использование отдельных технологий. Наиболее популярной из них является технология XMLHttpRequest. Что касается самих преимуществ технологии AJAX, то относительно ее можно сказать следующее: вы можете создать удобное веб-приложение, интерфейс которого будет иметь целый ряд приятных для пользователя возможностей, в итоге это может облегчить взаимодействие пользователя и сайта. Таким образом, вместо полной перезагрузки страницы происходит только частичная. Благодаря этому можно оптимизировать уровень быстродействия и экономить ресурсы машины. Серверная часть сайта может активно взаимодействовать с пользователем. Также данную технологию удобно использовать для реализации целого ряда задумок.

Обмен информацией

Предположим, вам нужна форма обратной связи, при помощи которой вы сможете осуществлять консультирование клиента. Каким образом это можно сделать? Прежде всего, необходимо позаботиться о самом «носителе» информации. Для этого требуется создать объект XML Http Request.Данный объект будет выступать в роли посредника между сервером и браузером. При помощи данного объекта будут направляться запросы, а также получаться ответы на них. AJAX PHP нам нужен для непосредственного обмена данными. Этот инструмент может быть использован при помощи GET и POST запросов. В данном случае все необходимые аргументы будут передаваться непосредственно через URL. Вместе с тем одновременно будет запущена функция, которая следит за тем, чтобы передача информации не прерывалась. А вот какой запрос AJAX реализовать? Рекомендуется использовать POST. Благодаря данному AJAX-запросу можно передавать неограниченное количество информации, к которым будет значительно сложнее получить доступ.

AJAX: принцип работы

Как на практике работает асинхронный Javascript и XML? Давайте попробуем разобраться с данным вопросом на конкретном примере. Что касается структуры постройки, то необходимо позаботиться о том, чтобы клиентская часть обеспечивала весь необходимый функционал для обмена данными. Она должна предоставлять все необходимые методы для передачи информации всеми выбранными способами. Серверная часть должна обеспечивать обработку полученной информации. Основываясь на полученных данных, она должна генерировать новую информацию, чтобы затем передать ее клиенту. Наиболее распространенным взаимодействием данного типа является работа с базами данных. Ранее уже упоминалось о таком элементе бизнес-сайтов, как форма обратной связи. В данном случае преимуществом AJAX будет то, что он осуществляет асинхронную передачу информации. Иначе говоря, пока информация пересылается, пользователь может совершать все действия, которые ему необходимы. Ориентируясь на специфику каждого конкретного случая пользователю необходимо решить, нужно ли информировать посетителя сайта об этом процессе. Что же касается самой формы обратной связи, то тут стоит отметить, что в данном случае можно написать фразу вроде «оператор набирает ответное сообщение», или нечто подобное.

AJAX: ответ сервера

Ответ сервера может приходить не только благодаря использованию технологии XML, как можно подумать. Он также может передаваться как JSON или обычный текст. Полученную информацию в первом случае можно сразу же выводить на страницу. Если же вы используете XML, то нужно будет позаботиться о том, чтобы файл AJAX должным образом был обработан в браузере клиента. В этом случае все данные преобразовываются к (X) HTML.При использовании формата JSON необходимо выполнить полученный код для того, чтобы получить полноценный Javascript объект. При этом нужно проявлять особую осторожность. Также необходимо учитывать, что многие злоумышленники любят посредством данной технологии передавать вредоносный код. По этой причине необходимо предусмотреть процедуру проверки полученной информации перед обработкой. Особенности реализации этого процесса для разных браузеров могут происходить по-разному, однако в целом схема взаимодействия будет одной и той же.

Запрос к серверу и обработка ответа

Последовательность действий в данном случае будет следующей. Первоначально необходимо создать запрос и убедиться в том, что XML Http Request существует. После этого инициализируется соединение с сервером. К нему нужно направить запрос. Теперь необходимо дождаться, когда придут данные и обработать их. Необходимо сказать о некоторых особенностях, которые касаются создания объекта. Он может быть инициирован в любом месте, где это возможно в рамках программирования. Если присвоить ему статус глобального, то в один прекрасный момент, для него будет возможна работа только с одним запросом. Необходимо уделить пристальное внимание данному моменту. Относительно обработки стоит сказать, что тут необходимо ориентироваться по выбранному инструменту. При XML данные нужно обработать при помощи функций DOM, а пользователю конечный результат предоставить уже в HTML. Но что же делать с JSON? Необходимо понимать, что он является объектной нотацией Javascript. Это означает, что благодаря JSON объект можно представлять как строку. Однако при этом необходимо учитывать, что данный способ не является в полной мере безопасным. Нужно учитывать одновременно множество различных факторов. Но в целом такой метод можно считать довольно легким.

Серверные языки программирования

Любые веб-приложения в той или иной степени используют серверные языки программирования. Наиболее популярным языком программирования для передачи данных является PHP. Обычно на нем пишут файлы для сайтов, где скорость передачи информации не является критически важным параметром. Для таких сайтов предпочтение отдается балансу между скоростью и надежностью. Выше рассматривались методы передачи XML Http Request.

Настройка сервера

Какие программы необходимо использовать для того, чтобы AJAX работал полноценно?Что это даст нам? Для чего они необходимы? Чтобы получить ответы на все эти вопросы, необходимо ознакомится со следующим списком:

— HTML/XHTML: необходимы для того, чтобы сервер распознал разметку страницы;

— CSS: данный инструмент необходим для визуального подбора оформления страницы;

— DOM: необходим для обеспечения динамических изменений на странице как ответ на действия пользователя;

— XML: требуется для пересылки данных между сервером и клиентом;

— JavaScript: требуется для создания движка AJAX и обеспечения интерактивности;

— XML Http Request: представляет собой объект, посредством которого запросы будут пересылаться к серверу.

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

Теперь у вас имеются теоретические знания и представления о работе AJAX. Отправка данных сейчас потребует определенной практической подготовки. Давайте в целом посмотрим, как можно подойти к реализации поставленной задачи при использовании AJAX. Прежде всего, нам необходимо создать базу данных драйверов. Они будут отличаться в зависимости от устройств, на которых могут работать. Необходимо отметить, что рассматриваемая нами база данных довольно большая, поэтому нет смысла просто пересылать ее клиенту и предлагать ему сделать выборку при помощи JavaScript. Нежелательно также, чтобы сама веб-страница загружалась только из-за одного параметра. Запросы на сервере будут обрабатывать специальные скрипты PHP. База данных реализована в виде файла XML.

О базе данных

Необходимо проработать структуру базы данных. Что делать, если передаваемые параметры не являются объектами. В данном случае необходимо предусмотреть создание переменной, где будут находиться ссылка на него, на случай вызова со стороны функции. Чтобы иметь возможность обратиться к ней из любого места кода, необходимо сделать ее глобальной. Желательно для удобства использовать систему управления базами данных. Это, конечно, не обязательно. Однако использование системы управления базами данных позволит вам более удобно и эффективно работать с данными.

Работа движка

Как все будет происходить? Наступает определенное событие, которое будет вызывать особенную функцию. Данная функция подготовит данные GET и POST, которые будут пересылаться. После этого вызывается функция, которая сделает обращение к URL серверного скрипта. В ней необходимо предусмотреть создание XML Http Request-объекта. Следует хранить ссылку на него в переменной. После того, как эти данные были отправлены серверу, необходимо дождаться от него ответа. Для этого можно включить «прослушку» до получения данных (если вам известно, что и когда должно прийти) или предусмотреть функцию, которая всегда будет готова принять данные. Первый вариант отличается меньшей степенью надежности в случае возникновения внештатных ситуаций. Второй вариант более затратный с точки зрения ресурсов. Если это делается только относительно одной переменной, то это не скажется на быстром интернете. Но если таких переменных сотни и тысячи и их общий объем будет слишком велик, то тогда уже другое дело. Необходимо будет найти баланс между использованием имеющихся ресурсов и результативностью. Необходимо понимать, что не у всех есть оперативная память объемом 16 Гб. Для этого может быть установлено определенное время ожидания, после которого поставляются предыдущие данные, а также информация о том, что сервер в данный момент времени недоступен.

AJAX: особенности

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

Запись опубликована 20.07.2020 автором katrinas11 в рубрике Фишки. Отблагодари меня, поделись ссылкой с друзьями в социальных сетях:

AJAX: Asynchronous JavaScript and XML

Here are some notes on AJAX (originally written by Iain Styles) to accompany the lectures. See also the last section for some pointers to other resources/references.

Contents:

AJAX is not a programming language, nor is it a new «protocol». Instead, it uses existing technologies (JavaScript, XML) and protocols (HTTP) to enable web pages to be updated without the viewer or browser having to reload the page. When we studied JavaScript, we showed how you could use JavaScript to change the contents of a page, but we had to hard-code the alernative contents into the JavaScript code itself. With AJAX, we can simply point the browser at an external file and tell it to get alternative content from there instead.

Мастер Йода рекомендует:  Виртуальные хосты Apache безопасная настройка для DebianUbuntu

AJAX stands for Asynchronous Javascript And XML. By now, three of these four words should be meaningful to you — it is only the first that will require some additional explanation. Perhaps the key features of AJAX is that it allows JavaScript to communicate directly with the server, and this can be done at any time (when a page is loaded, following a user-generated event, following a timed event). It is therefore described as an asynchronous process.

Despite its name, AJAX is used for much more than simply fetching an XML file from a server. In fact, in most applications of AJAX, there is no XML file: the XML is generated by a server-side program that creates the content (perhaps in response to a database query). AJAX can also be used to work with plain text files and, or course, other HTML files, which can be very useful when building web pages with common content (although it can often be better to deal with this sort of thing on the server-side.

2. A Word on Browsers

For the purposes of developing and testing AJAX applications using local files (rather than uploading them to a web server), there are some important differences regarding web browsers. The simplest solution, it seems, is to use Firefox or Safari, which work fine. Chrome and Internet Explorer both disallow access to local files via AJAX (clearly, for external websites, this represents an obvious security risk). For Chrome, a work around is to launch the browser with the following switch:

  • chrome —allow-file-access-from-files (on Linux)
  • open -a ‘Google Chrome’ —args —allow-file-access-from-files (on Mac OS X)
  • «C:\Program Files\Google\Chrome\Application\chrome.exe» —allow-file-access-from-files (on Windows)

3. A Simple First Example

Let us begin by studying a trivially simple example of AJAX in action so we can get a feel for what’s happening and how complex (or not) it is to actually use AJAX.

A Heading

The following JavaScript code was used for this very simple example (and is invoked using an onclick event on the above button):

That’s it! These four lines of code (of which one simply updates the HTML) are essentially all that is needed to invoke AJAX. Of course, it only does something very simple, and there is no error checking, but nonetheless, this is basically all that is needed. So what’s actually going on here? Let us look at each line of the code and examine its role.

Here, we define a new object of type XMLHttpRequest . This is the fundamental building block of AJAX applications as it is this object that communicates with the server, sending the appropriate messages and dealing with the data that returns.

This is the first line of the code that actually does «something». As its name suggests, this method opens the connection between the XMLHttpRequest object and the server. The method takes three arguments:

  • The HTTP method used to send the request. We use the GET method if we are simply retrieving data from the server, and the POST method if we are sending data to the server. In this module, we will primarily be reading data in from local files. However, we will actually (see below) usually use POST to avoid problems with caching.
  • The name of the file that is to be retrieved. This could be a simple text file (as in this example), an XML file, or the URL of a server-side script that generates data via a database query or some other server-side process. The file MUST reside on the same server as the requesting script for security reasons.
  • A flag ( true|false ) that specifies whether a request should be handled asynchronously. In the above example, we have said that it shouldn’t. We will explore the role of this flag very soon, as it plays an important role in determining how the requests is processed.

Having set up the connection to the server, we simply send the data using the next line of the code:

The argument of this method contains any data that we need to send to the server. This will normally be used when we are using AJAX to query a remote database via a program on the server.

4. Synchronous vs Asynchronous Transactions

In the above example, we have specified (via the false argument of the open method) that the transaction should not be asynchronous. What does this actually mean? In essence, there are two ways in which we can make a request for data from the server:

  • Synchronously: In this case, the script will wait for the request to be served before continuing execution.
  • Asynchronously: Here, the request is issued to the server, but the script does not wait for it to respond before continuing its execution.

Which method is used really depends on the nature of the request. For example, if you are issuing a request to load a static object (such as a simple text or XML file from the server) then it may well be appropriate to use a synchronous request. Indeed, if the data is a core part of the web page (such as an introductory paragraph or a menu) without which the page is incomplete then it may be essential to wait for that content to be loaded before continuing. However, if your data is rather more dynamic than this then you may want the request to be asynchronous. For example, if the data is generated by a request to a database (which may take some time), then you probably do not want to wait for the request to be served as this is likely to take some time.

For synchronous requests, the code used in the first example is really all you need (although we have not dealt with any errors). For asynchronous requests you need to do a little more. Let us modify our simple example to make the request asynchronously. As before, we create a new XMLHttpRequest object and we call the open and send methods, but this time with different parameters:

Now because we have issued an asynchronous request, any commands we issue after this will be executed immediately without waiting for the request to be served. We must therefore issue the commands for dealing with the requested data somewhat differently: we must hold them back until the data has been served. The way this is done is by using AJAX’s event listener: onreadystatechange . This works in the following way: you assign the event listener a callback function. Everytime the readyState property of the server call changes, the callback is executed. This function must check the readyState property and only execute the code that deals with the results once the data is ready. This needs to be done before the request is sent, as per the following example:

A Heading

In this example, the request is created and issued as in the previous example, but we have set up a function that monitors the state of the request. When the «ready state» of the request changes, the function is called, and it checks the state of the request. When the readyState indicates that the request is complete (i.e. when its value is 4) the code that handles the returned data can be called, which in this case simply displays the text on the page. The readyState variable can take the following values:

  • 0: The request has not been initialised
  • 1: The request has been set up
  • 2: The request has been sent
  • 3: The request is being processed
  • 4: The request is complete

At the moment, we are only concerned with whether the request is complete or not. If our request was querying a remote database, then we could use the other states to indicate the progress of our request, for example, if readyState==3 , we could show some sort of progress ticker.

5. A Generic Wrapper

At this stage, it is worth noting that the same sequence of events occurs no matter where we are getting data from, and no matter what we are doing with it. We can therefore write a generic «wrapper» that saves us from having to worry about the details:

A Heading

The function requestData is a generic wrapper that we can use to retrieve data from a server without having to worry about the details. As we learn more about the AJAX framework we will add extra code to this function to deal with special cases, but as a starting point it allows us to use AJAX without worrying about remembering the details.

6. Working with XML

In our simple example above, the data we have requested just consists of a simple text file. Let us now see how to deal with an XML document. We can use the same requestData function, but will need to deal with it differently. Here is a simple XML file:

and here is some JavaScript code to load and process it:

Click below to try it (the button has loadStaffList attached to its onclick event):

When we load an XML file in using AJAX, an XML document object is created ( xmlDoc in the code above). This is very similar to the HTML document object that we have become used to manipulating, as we can deal with it in exactly the same way. Firstly, we extract all the staffmember elements. Then, for each staffmember, we select the appropriate elements by their tag names. Now, although the elements themselves simply contain text data, we need to be very explicit about how we identify what we are interested in: the text is contained within a child node of the element (remember that the element could contain mixed content) so we need to identify that node. In this case, each of the elements we are interested in contains only one child node, and we are interested in the value of that node. There are two ways in which we could access that text and we use both of them in our example. After we have extracted the data from the XML it is simply a case of adding them to our HTML document in the same way as we have done before.

7. Summary of the AJAX Model

  1. The user or web browser initiates a request
  2. An XMLHttpRequest object is created with a URL from which the data will be loaded, and a callback function that is executed when the request is served. An HTTP request is then generated asynchronously so that other actions can take place whilst the request is being processed
  3. The request is processed by the web server which returns an XML document. This may be a copy of a whole document or, more likely, XML generated by a server-side program in response to a database request.
  4. When the XMLHttpRequest object has received all the XML data and converted it into a DOM object, the callback function is executed and this will typically take the XML document and display it in some form in the HTML page by manipulating the HTML DOM.

8. Some Further Cons >[ Jump to top ]


Extracting Information from XML Data

In the above example, you may have noticed that whilst the accessing of XML data is similar to the HTML document, there are some subtle differences. These arise from the fact that, whilst HTML is a defined standard, an XML document can take infinitely many forms. It is therefore necessary to have a slightly different DOM for XML than for HTML.

The XML Document

The contents of the XML document are delivered by an XMLHttpRequest in two distinct forms, both of which we have used:

  • XMLHttpRequest.responseText : a plain text representation of the data
  • XMLHttpRequest.responseXML : The data in XML format, including preamble

Lower level Elements

From XMLHttpRequest.responseXML , we can access the root XML node as documentElement , and then descend to find the child elements of the document. In the HTML DOM, we access child elements using methods of the document element that allow us to access elements by, for example, id. Because XML is less restrictive than HTML, the DOM does not provide as many mechanisms by which we can probe the XML. getElementsByClass as few XML documents will have a class attribute. The same is true of A getElementById function is problematic since ids can have any name in an XML document. In practice, we are really restricted to using the method getElementsByTagName which returns an array of all elements of a given type within the document. Once you have found the node you want, you can get to its contents using element.firstChild.data . The firstChild node is the text node of the element (assuming that the element contains only text), and the data is the contents of the element.

A full description of the XML DOM can be found at http://www.w3schools.com/dom/default.asp, but we shall restrict our use of the DOM to those properties and methods discussed herein.

Caching

When you use AJAX to create dynamic web pages, some care is needed to make sure that old data is not cached. For example, imagine you are writing a web page that uses AJAX to display some content that is regularly updated, such as a live text commentary of a sports event. You might choose to have the page automatically update every 30 seconds via a timed XMLHttpRequest. We normally use the HTTP GET method for such requests as we are not updating anything on the server. The problem with this is that data requested via the GET method is cached, and so we may not be able to see the updates. The solution to this is to use an HTTP method that is not cached. Even though we are not updating the server, we can still use the HTTP POST method to retrieve the file. This will avoid caching and ensures that the version of the document we are manipulating is current.

Технология AJAX, примеры скриптов

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

Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.

Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:

  1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
  2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
  3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

За интерактивностью будущее!

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

Дать пользователю свободу действий – и не перезагружать страницу, стало возможным с развитием и внедрением AJAX технологии.

Концепция технологии AJAX

Как вы уже поняли, эта «золотая» технология позволяет нам обмениваться данными меду браузером и сервером в фоновом режиме, не обновляя страницу. Говоря по-умному, сей обмен является асинхронным.

Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.

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

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

  1. Вводятся в браузер средствами пользовательского интерфейса;
  2. Отправляются на сервер;
  3. Обрабатываются на сервере, возможно, заносятся в БД;
  4. В это время браузер ожидает возвращение ответа;
  5. Пока браузер ждет, он не прекращает работу пользователя;
  6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

Вы можете пронаблюдать представленный процесс на схематической иллюстрации работы описываемой технологии.

Осталось упомянуть важный момент: данные циркулирующие между сервером и браузером, должны отвечать определённым правилам форматирования. Такие правила обычно описывают два формата:

  1. XML(eXtensible Markup Language) — расширяемый язык разметки;
  2. JSON(JavaScript Object Notation) —текстовый формат основанный на JavaScript.

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

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма. Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер. Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

Чуть позже мы рассмотрим работу AJAX, с использованием данных в формате XML. А пока давайте разберемся, что же такое XML формат.

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

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

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

Пример структуры в формате XML

Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции («XML Parser Functions») для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.

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

Отлично, теперь мы представляем, что такое XML формат, и понимаем, что назначением его является передача сложных структур данных между сервером и клиентом. Следовательно, можем двигаться дальше.

AJAX пример №1 (Начало работы)

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

Исходный код HTML документа:

script type = «text/javascript» >
function startAjax ( url ) <
var request ;
if ( window. XMLHttpRequest ) <
request = new XMLHttpRequest ( ) ;
> else if ( window. ActiveXObject ) <
request = new ActiveXObject ( «Microsoft.XMLHTTP» ) ;
> else <
return ;
>

request. onreadystatechange = function ( ) <
switch ( request. readyState ) <
case 1 : print_console ( «
1: Подготовка к отправке. » ) ; break
case 2 : print_console ( «
2: Отправлен. » ) ; break
case 3 : print_console ( «
3: Идет обмен..» ) ; break
case 4 : <
if ( request. status == 200 ) <
print_console ( «
4: Обмен завершен.» ) ;
document. getElementById ( «printResult» ) . innerHTML = «» + request. responseText + «» ;
> else if ( request. status == 404 ) <
alert ( «Ошибка: запрашиваемый скрипт не найден!» ) ;
>
else alert ( «Ошибка: сервер вернул статус: » + request. status ) ;

break
>
>
>
request. open ( ‘GET’ , url , true ) ;
request. send ( » ) ;
>
function print_console ( text ) <
document. getElementById ( «console» ) . innerHTML += text ;
>
script >

В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере. Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

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

  • Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
  • Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
  • Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправки\получения данных может принимать четыре состояния (1подготовка к отправке, 2отправлен, 3идет обмен, 4получен ответ.)
  • В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200«OK» или 404«Not Found».
  • Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

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

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

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

AJAX пример №2 — отправка POST запроса на сервер

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

  • GET — передаёт пользовательских данные заданному ресурсу по URI.
  • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
  • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
  • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
  • DELETE — Удаляет указанный ресурс.
  • PUT — загружает содержимого запроса на указанный в запросе URI.
Мастер Йода рекомендует:  Ahrefs презентовал новое средство выявления «низкопробных» ссылок

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP. Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form. Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

  • open – открывает соединение с сервером с указанием метода передачи данных.
  • setRequestHeader — устанавливает заголовок запроса.
  • send — отправляет запрос.

Откройте код примера №1 и замените в нем строки:

Национальная библиотека им. Н. Э. Баумана
Bauman National Library

Персональные инструменты

Asynchronous JavaScript and XML

Первый появившийся 2005
Расширение файла .js
Формат файлов JavaScript
Под влиянием
JavaScript and XML

AJAX (англ. Asynchronous Javascript and XML ) — подход к построению пользовательских интерфейсов веб-приложений, при котором веб-страница, не перезагружаясь, сама догружает нужные пользователю данные.

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

AJAX является синтезом различных технологий:

  • HTMLдля создания web-форм и указания полей для использования в вашем приложении.
  • JavaScript-код основной код, выполняющий AJAX-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, Dynamic HTML для помощи в динамическом обновлении формы.
  • DOM (от англ. Document Object Model — «объектная модель документов») для работы и со структурой HTML, и, в некоторых случаях, с XML, полученным от сервера.

Самым примечательным из приложений, использующих объект XMLHttpRequest, является Google Maps. Пользуясь им, можно находить определенную местность на карте планеты, затем переходить к более мелким объектам, прокручивать, перетягивать карту без необходимости обновления страницы [Источник 1] .

Содержание

История AJAX

Впервые термин AJAX был публично использован 18 февраля 2005 года в статье Джесси Джеймса Гарретта (Jesse James Garrett). Гарретт придумал термин, когда ему пришлось как-то назвать новый набор технологий, предлагаемый им клиенту.

Однако в той или иной форме многие технологии были доступны и использовались гораздо раньше, например в подходе «Remote Scripting», предложенном компанией Microsoft в 1998 году, или с использованием HTML-элемента IFRAME, появившегося в Internet Explorer 3 в 1996 году.

История технологии AJAX, которая, казалось бы, мгновенно завоевала огромную популярность, похожа на историю других прорывных технологий. Хотя кажется, что эта технология появилась из ниоткуда, на самом деле для этого потребовалось определенное время. Несколько лет исследований в области web-разработки привели к созданию инструментов и подходов, которые распространялись под «брендом» AJAX. Начиная с эры DHTML в период первоначального интернет-бума и на протяжении «темных» лет после массового краха доткомов разработчики по всему миру открывали для себя неожиданные возможности JavaScript, открывающие новые пути для разработки web-приложений.

Первый и самый важный компонент технологии AJAX – это XMLHttpRequest (XHR) API. XHR – это JavaScript API для передачи данных в виде сообщений между web-браузером и web-сервером. Этот API позволяет использовать HTTP POST-запросы (для передачи данных на сервер) и GET-запросы (для загрузки данных с сервера в фоновом режиме). XHR – это «ядро» большинства AJAX-вызовов и одна из важнейших технологий в современном Web-программировании. Наконец, XHR — это лучший подарок интернет-сообществу, сделанный командой Microsoft Internet Explorer.

Это действительно так. XHR впервые появился в пятой версии Internet Explorer в 2000 г. Изначально написанный Алексом Хопманном (Alex Hopmann) в виде элемента управления Microsoft ActiveX, XHR был создан для использования в Microsoft Outlook Web Access и предназначался для «сглаживания» взаимодействия между передовым для того времени пользовательским интерфейсом и Microsoft Exchange Server.

Хотя пакет от Microsoft Corporation нельзя считать скромным началом, но XHR определенно переросла рамки исходного продукта. С тех времен XHR был интегрирован во все основные web-браузеры и даже был признана W3C в качестве стандарта [Источник 2] .

Принцип работы

Рисунок 1 – Сравнение традиционной модели веб-приложения с моделью AJAX приложений

Рисунок 2 – Схема синхронного взаимодействия традиционного веб-приложения (наверху) в сравнении с асинхронной схемой AJAX приложения (внизу)

  • В первую очередь AJAX полезен для форм и кнопок, связанных с элементарными действиями: добавить в корзину, подписаться, и т.п.

Сейчас – в порядке вещей, что такие действия на сайтах осуществляются без перезагрузки страницы.

Динамическая подгрузка данных

  • Например, дерево, которое при раскрытии узла запрашивает данные у сервера.
  • Живой поиск – классический пример использования AJAX, взятый на вооружение современными поисковыми системами.

Пользователь начинает печатать поисковую фразу, а JavaScript предлагает возможные варианты, получая список самых вероятных дополнений с сервера. [Источник 3] .

Технически, с помощью AJAX можно обмениваться любыми данными с сервером.

Код, который обеспечивает подобного рода возможности, работает следующим образом:

  1. Код активируется примерно при каждом нажатии клавиши, но не чаще чем раз в 100 мс (примерно).
  2. Создается скрытый DIV и заполняется ответом сервера:
    • Текущий результат подсвечен, можно перемещаться и выбирать;
    • При нажатии правой стрелки или при клике — поиск в подрезультатах.
  3. Результаты запросов кешируются, повторных обращений к серверу не происходит.
  4. В Google не только предлагаются варианты, но система тут же инициирует и сам поиск, т.е. не нужно даже нажимать key:Enter.

Сравнение традиционной модели веб-приложения с моделью AJAX приложений, а также схему синхронного взаимодействия традиционного веб-приложения в сравнении с асинхронной схемой AJAX приложения можно увидеть на рисунках 1 и 2 соответственно.

Обычно используются форматы:

  • JSON – для отправки и получения структурированных данных, объектов.
  • XML – если сервер почему-то работает в формате XML, то можно использовать и его, есть средства.
  • HTML/текст – можно и просто загрузить с сервера код HTML или текст для показа на странице.
  • Бинарные данные, файлы – гораздо реже, в современных браузерах есть удобные средства для них.

Обмен данными

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

Обмениваться данными с сервером можно двумя способами. Первый способ — это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript для того, чтобы некоторые данные не прервали запрос.

Не рекомендуется делать GET-запросы к серверу с большими объемами данных. Для этого существует POST-запрос.

Клиент часть, написанная на JavaScript, должна обеспечивать необходимую функциональность для безопасного обмена с сервером и предоставлять методы для обмена данными любым из вышеперечисленных способов. Серверная часть должна обрабатывать входные данные, и на основе их генерировать новую информацию (например, работая с базой данных), и отдавать ее обратно клиенту. Например, для запроса информации с сервера можно использовать обычный GET-запрос с передачей нескольких и небольших по размеру параметров, а для обновления информации, или добавления новой информации потребуется использовать уже POST-запрос, так как он позволяет передавать большие объемы данных.

Как уже было сказано, AJAX использует асинхронную передачу данных. Это значит, что пока идёт передача данных, пользователь может совершать другие, необходимые ему действия. В это время следует оповестить пользователя о том, что идёт какой-либо обмен данными, иначе пользователь подумает, что произошло что-то не то и может покинуть сайт или повторно вызвать «зависшую», по его мнению, функцию. Индикация во время обмена данными в приложении Web 2.0 играет очень важную роль: посетители могли еще не привыкнуть к таким способам обновления страницы.

Ответ от сервера может быть не только XML, как следует из названия технологии. Помимо XML, можно получить ответ в виде обычного текста, или же JSON (Javascript Object Notation). Если ответ был получен простым текстом, то его можно сразу вывести в контейнер на странице. При получении ответа в виде XML, обычно происходит обработка полученного XML документа на стороне клиента и преобразование данных к (X)HTML. При получении ответа в формате JSON клиент должен лишь выполнить полученный код (функция JavaScript) для получения полноценного объекта JavaScript. Но здесь нужно быть осторожным и учитывать тот факт, что с использованием этой технологии может быть передан вредоносный код, поэтому перед выполнением полученного с сервера кода следует его тщательно проверить и обработать. Существует такая практика, как «холостой» запрос, при котором никакой ответ от сервера не приходит, лишь изменяются данные на стороне сервера.

В разных браузерах данный объект обладает разными свойствами, но в целом он совпадает [Источник 4] .

Библиотеки

Одним из ключевых факторов, способствовавших развитию web-разработки на основе AJAX, стало появление и внедрение нескольких высокофункциональных JS-библиотек. За исключением опытных JS-разработчиков мало кто в действительности понимал, как работают технологии, формирующие AJAX. Поэтому, хотя многие аспекты интерактивности и анимации внутри web-браузера в эпоху DHTML были доведены почти до предела возможного, сложность использования AJAX привела к большому разрыву между потребностями в web-сайтах с AJAX-возможностями и количеством людей, способных создавать такие интерфейсы с нуля. Библиотеки, подобные Prototype, Dojo и jQuery, помогли преодолеть этот разрыв, предоставив готовую функциональность, которая позволила реализовать анимацию и интерактивность, преодолеть различия между web-браузерами и сгладить недостатки базового JavaScript API.

XMLHttpRequest

Методы объекта XMLHttpRequest

Хотя помимо XHR существуют и другие подходы для получения данных с сервера, именно XHR остается «ядром» большинства AJAX-приложений. Взаимодействие на основе XHR строится на двух компонентах: запрос и ответ. Ниже будут рассмотрены обе эти составляющие.


Названия методов записаны в том же стиле (camel-style), что и другие функции JavaScript. Будьте внимательны при их использовании.

abort() — отмена текущего запроса к серверу.

getAllResponseHeaders() — получить все заголовки ответа от сервера.

getResponseHeader («имя_заголовка») — получить указаный заголовок.

open («тип_запроса»,«URL»,«асинхронный»,«имя_пользователя»,«пароль») — инициализация запроса к серверу, указание метода запроса. Тип запроса и URL — обязательные параметры. Третий аргумент — булево значение. Обычно всегда указывается true или не указывается вообще (по умолчанию — true ). Четвертый и пятый аргументы используются для аутентификации (это очень небезопасно, хранить данные об аутентификации в скрипте, так как скрипт может посмотреть любой пользователь).

send («содержимое») — послать HTTP запрос на сервер и получить ответ.

setRequestHeader («имя_заголовка»,«значение») — установить значения заголовка запроса.

Свойства объекта XMLHttpRequest

onreadystatechange — одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.

readyState — число, обозначающее статус объекта.

responseText — представление ответа сервера в виде обычного текста (строки).

responseXML — объект документа, совместимый с DOM, полученного от сервера.

status — состояние ответа от сервера.

statusText — текстовое представление состояния ответа от сервера.

Следует подробнее расммотреть свойство readyState:

  • — Объект не инициализирован.
  • 1 — Объект загружает данные.
  • 2 — Объект загрузил свои данные.
  • 3 — Объект не полностью загружен, но может взаимодействовать с пользователем.
  • 4 — Объект полностью инициализирован; получен ответ от сервера.

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

AJAX : Asynchronous JavaScript And XML

AJAX stands for Asynchronous JavaScript And XML. AJAX is not a new technology but it is a technique. It is a term that is firstly penned by James Garrett in 2005. Basically, It is a way of using many existing technologies like HTML, CSS, JavaScript, XML, Document Object Model, and main important part is XMLHttpRequest object. When all these technologies work together with AJAX technique, User Interface updates itself without reloading the whole web page. Basically, AJAX will communicate with the server, get data from the server, update UI on the basis of that data without reloading the whole web page.

History of AJAX :

Before 2005, communication between client-s >h >James Garrett write an article named AJAX: a new approach to Web applications. The key technology is used in AJAX is XMLHttpRequest(XHR), firstly invented by Microsoft and then use by other browsers. XHR has capabilities to retrieve data from server-s >Java Applets or Flash movies.

XMLHttpRequest Object :

Internet Explorer 5 was the first browser who introduced XHR ( XMLHttpRequest ) object in the internet world. Internet Explorer includes ActiveX object in MSXML library. Internet Explorer has three version of XHR object :

  1. MSXML2.XMLHttp
  2. MSXML2.XMLHttp.3.0
  3. MSXML2.XMLHttp.6.0

Create XHR object for Internet Explorer 7+ :

Elaboration of above code :

  1. This function tries to create most latest version of XHR available on Internet Explorer.
  2. In this function, firstly we can check the type of arguments.callee.activeXstring . If type of this activeXstring is not string, then we create an array of latest version of XHR includes in MSXML for Internet Explorer.
  3. After that we apply the for loop to assign the latest version of XHR to arguments.callee.activeXstring.
  4. At the last line of that function we return a new instance of ActiveXObject with latest version of XHR.

Note : This function only works on IE7+

All modern browser including IE 7+, Google Chrome, Safari, Firefox supports the native XHR object. Native XHR object can be created by using XMLHttpRequest constructor.

Create XHR object for earlier version of Internet Explorer :

The above function is best suited for the greater version than IE 7. If you want to create an XMLHttpRequest object for the pervious version of IE, extend the above function to check the support of native XMLHttpRequest in the Internet Explorer.

Elaboration of above code :

  1. This function checks if the browser supports the native XHR than return the new instance of XMLHttpRequest constructor.
  2. If browser supports ActiveX then set latest version of XMLHttpRequest by MSXML.
  3. In the last check if browser neither support native XHR nor ActiveX , so throw an error with “No XHR Supports” message.

Syntax of XMLHttpRequest :

To start with the XMLHttpRequest object, first call the open() method of XHR. It has three arguments :

  1. method (GET, POST, DELETE)
  2. url(requested URL)
  3. true(asynchronous or synchronous)

Example :

Point to be noted for above example:

  1. We call the open() method of an XHR object to prepare the request to be sent only. We cannot call the XHR request by using open() method only.
  2. In this method, the first parameter is for Http Request methods like GET, PUT, POST, DELETE etc. As per Http standards, use these methods in capital letters, otherwise, some browser behaves unexpectedly like Firefox.
  3. Second parameter in open() method is URL. If you use same domain URL, your call goes smoothly otherwise if you use cross-domain URL, you fight with cross-origin like errors.
  4. The last parameter has the main power. The last parameter will be dec >Above line of code just prepare the request which sent to the server. For sending the XHR request we use send() method.

In the send() method, we can send data as the parameter or null because this argument is required for some browsers. If you don’t have data to send, set this argument to null.

Above request is an asynchronous type of request. So, we cannot wait for the response to this request. With the response, we have some data with relevant properties :

responseText :

responseText has the text value which returned as the body of response.

responseXML :

responseXML returns with value when content-type set to text/xml or application/xml otherwise it gives null value.

status :

This property sends HTTP status of the response.

statusText :

This property sends the HTTP status text of the response.

Elaboration of above code :

  1. In the first line, we create an XMLHttpRequest instance by the using of XMLHttpRequest()

2. In the next line, we can prepare the request to be send by send() method

3. In the next line of code, we can send the request by send() method.

4. After we get the response, check the status code. On the basis of status code, we retrieve the data or error. If status code is equal to or greater than 200 and less than 300 or 304. We alert the responseText, otherwise alert the status code of error.

Phases of Request/Response Cycle (readyState) :

  1. 0 — Uninitialized — open() is not called yet.
  2. 1 — Open — open() method called but send () method not called.
  3. 2 — Send — send() method waiting for response.
  4. 3 — Receiving — Some response data received.
  5. 4 — Completed — All response data is received and available for use.

readyState Event :

When the phases of readyState changes from one phase to another readystatechange event are fired. We can use onreadystatechange event handler to handle the phases of readyState . For frontend developers, only last phase is important because at this phase all data is received and available for use.

Elaboration of above code :

In the above code, we implement one enhancement is that we can check the readyState phase of XMLHttpRequest . We apply the check if readyState is 4, then we implement and put logic on retrieved data.

Abort the XMLHttpRequest:

We can use abort() method to cancel the asynchronous XMLHttpRequest before response is received.

Asynchronous JavaScript and XML (AJAX)

Современные веб-приложение, как правило, разделяются на две части: клиент и сервер. Клиент представляет собой веб-страницу с кодом JavaScript. К серверным технологиям относятся PHP, Ruby, Node.js, ASP.NET и т.д., которые получают запрос от клиента, обрабатывают и отправляют в ответ результат обработки.

Ajax представляет технологию для отправки запросов к серверу из клиентского кода JavaScript без перезагрузки страницы. Сам термин расшифровывается как Asynchronous JavaScript And XML. То есть изначально AJAX предполагал асинхронное взаимодействие клиента и сервера посредством данных в формате XML. Хотя сейчас XML во многом вытеснил формат JSON. В любом случае AJAX революционизировал веб-среду, позволив создавать динамичные отзывчивые веб-приложения.

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

Объект XMLHttpRequest

Для создания приложений, использующих Ajax, применяются различные способы. Но самым распространенным способом является использование объекта XMLHttpRequest :

После создания объекта XMLHttpRequest можно отправлять запросы к серверу. Но для начала надо вызвать метод open() для инициализации:

Метод open() принимает три параметра: тип запроса (GET, POST, HEAD, PUT), адрес запроса и третий необязательный параметр — логическое значение true или false, указывающее, будет ли запрос осуществляться в асинхронном режиме. То есть в данном случае запрос будет иметь тип GET, он будет направляться по адресу «http://localhost/hello.txt в синхронном режиме, так как стоит значение false (для асинхронного режима указывается значение true).

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

Кроме того, метод open() может принимать еще два параметра: логин и пароль пользователя, если для выполнения запроса нужна аутентификация.

После инициализации запроса методом open() необходимо отправить запрос с помощью метода send() :

Свойства XMLHttpRequest

Объект XMLHttpRequest имеет ряд свойств, которые позволяют проконтролировать выполнение запроса:

status : содержит статусный код ответа HTTP, который пришел от сервера. С помощью статусного кода можно судить об успешности запроса или об ошибках, которые могли бы возникнуть при его выполнении. Например, статусный код 200 указывает на то, что запрос прошел успешно. Код 403 говорит о необходимости авторизации для выполнения запроса, а код 404 сообщает, что ресурс не найден и так далее.

statusText : возвращает текст статуса ответа, например, «200 OK»

responseType : возвращает тип ответа. Есть следующие типы:

Build apps using Asynchronous JavaScript with XML (Ajax)

Learn to construct real time validation-enabled Web applications with Ajax

Before you start

About this tutorial

In this tutorial, we explain how to develop and design Web applications based on Asynchronous JavaScript with XML, or Ajax. You’ll build a sample Web-based book order application which provides real time validation and page refresh, for efficient and smooth user interaction.

Prerequisites

We will use Tomcat to run the Ajax application. Tomcat is the servlet container that is used in the official reference implementation for the Java Servlet and JavaServer Pages technologies. Download jakarta-tomcat-5.0.28.exe and run it to install Tomcat to any location you’d like — c:\tomcat5.0, for instance.

Introduction to Ajax

Ajax basics

Ajax enables a dynamic, asynchronous Web experience without the need for page refreshes. It incorporates the following technologies:

  • XHTML and CSS provide a standards-based presentation.
  • Document Object Model (DOM) provides dynamic display and interaction.
  • XML and XSLT provide data interchange and manipulation.
  • XMLHttpRequest provides asynchronous data retrieval.
  • JavaScript binds everything together.

The core of Ajax technology is a JavaScript object: XMLHttpRequest . This object is supplied through browser implementations — first through Internet Explorer 5.0 and then through Mozilla-compatible browsers. Take a closer at this object.

XMLHttpRequest

With XMLHttpRequest , you can use JavaScript to make a request to the server and process the response without blocking the user. As you create your Web site and use XMLHttpRequest to perform screen updates on the client’s browser without the need for refresh, it provides much flexibility and a rich user experience.

Examples of XMLHttpRequest applications include Google’s Gmail service, Google’s Suggest dynamic lookup interface, and the MapQuest dynamic map interface. In the next sections, we demonstrate how to use XMLHttpRequest object in detail as we demonstrate the design of a book order application and implement it.

Application design

Elements of the application

The sample Web-based book order application will contain the following client-side functions implemented in Ajax:

  • Subscription ID validation
  • A View Authors list
  • A View Publishers list

The objective here is to show how real time validation and page refreshes in a Web page make user interaction smoother and more efficient.

Structure of the application

The diagram in Figure 1 depicts the design architecture of the sample book order application:

Figure 1. The Ajax architecture


The application will be a single Web page developed with JavaServer Pages (JSP) technology. The user will be able to invoke the Web page using a Web browser (such as Microsoft® Internet Explorer) and enter the Subscription ID which the application validates in real time. As the ID is validated asynchronously, the user can input more information. The user can view the book titles either by Author or Publisher. The screen will populate the Authors or Publishers list based on user choice. Based on the selection, the Titles list is populated. All these lists will populate in real time — in other words, the page is not refreshed, but still the data comes from the backend tier. We call this phenomenon real time refreshes.

As you can see in Figure 1, the XMLHttpRequest JavaScript object helps with the real time asynchronous processing. This object makes a request in the form of XML over HTTP to the LibraryServlet servlet residing in a Web container. The servlet then queries the database, fetches the data, and sends it back to the client, again in the form of XML over HTTP. The requests and responses occur in real time without refreshing the page.

This is what makes Ajax so powerful. The user does not wait for page reload to complete because there is no page reload.

In the next section, we’ll demonstrate how to implement the book order application based on this design. We will take you through the code and perform some analysis. (To get the sample code for this tutorial, download the file, x-ajax-library.war.)

Implementing the application

Application implementation with Ajax

In this section, we do a code walkthrough of the sample book order application and take a close look at each Ajax-based, Javascript component:

  • Validate Subscription ID
  • View Authors
  • View Publishers
  • View Titles

Code walkthrough: Validate the subscription ID

Let’s start with the function Validate Subscription ID . This code creates a text field where users can enter Subscription IDs. Once the user enters the ID and moves to the next field in the form, the onBlur event fires. This event calls a JavaScript function validate() :

The validate() function takes formObj as a parameter. It first calls the init() function:

Code walkthrough: init()

Now look at the init() function does (we divide the code in parts):

The init() function first creates the XMLHttpRequest object. This request object is the core of Ajax. It sends and receives the request in XML form. This piece of code checks for browser support for the XMLHttpRequest object (most browsers support it). If you are using Microsoft Internet Explorer 5.0 or above, then the second condition is executed.

Once your code creates the XMLHttpRequest object, you need to set certain request properties. In the preceding code, the first line sets the request method, request URL, and the type of request (whether it is asynchronous or not). It does so by calling the open() method on the XMLHttpRequest object.

Here we will use the POST method. Ideally, use POST when you need to change the state on the server. Our application is not going to change the state, but we still prefer to use POST . The url is the URL of the servlet to be executed. true indicates that we will process the request asynchronously.

For the POST method, we need to set the request header Content-Type . This is not required for the GET method.

Code walkthrough: Callback handler 1

To continue with the validation method, next you assign the subscriptionValidator callback handler to onreadystatechange which will fire at every state change on the request.

What is this callback handler all about? Since you are processing the request asynchronously, you need a callback handler which is invoked when the complete response is returned from the server — the callback handler is where you will validate the subscription ID (that is, write your actual validation code).

The handler acts as a listener. It waits until the response is complete. (More on the handler code later.) To send the request, the last line calls the send() method. The request is sent as a name=value pair. For the GET method, the request is sent as part of the URL, so the send() method is passed a null parameter.

The request is sent to the servlet. The servlet processes the request and sends back the response in real time. This is how the servlet processes the request. The next code snippet illustrates the LibraryServlet — doPost() method.

Code walkthrough: Callback handler 2

The doPost() method gets the subscriptionID from the request parameter. To validate the ID, it calls the validID() method. This method validates the ID and returns true if the ID is valid, otherwise it returns false . It constructs the return status in XML format and writes the response by calling the writeResponse() method. Now examine the writeResponse() method.

The response is sent in XML format. The first line sets the response content type, which is text/xml . The next line sets the header Cache-Control with the value of no-cache . This header is mandatory. Ajax requires that response output is not cached by the browser. To write the response, the last line calls the getWriter().write() method.

Code walkthrough: Callback handler 3

The request is processed by the servlet and the response is sent back to the client. Remember, this all happens in the background without a page refresh. Now the callback handler method that we discussed earlier, will handle and parse the response:

Code walkthrough: Revisiting XMLHttpRequest

As mentioned earlier, the XMLHttpRequest object is the core object which constructs and sends the request. It also reads and parses the response coming back from the server. Look at the code in parts.

The preceding code checks the state of the request. If the request is in a ready state, it will then read and parse the response.

What do we mean by ready state? When the request object attribute readystate has the value of 4 , it means that the client received the response and is complete. Next we check the request status (whether the response was a normal page or an error page). To ensure that the response is normal, check for the status value of 200 . If the status value is 200 , then it will process the response.

Next, the request object reads the response by calling responseXML property. Note the servlet sent back the response in XML so we use responseXML . If the response sent was in text, then you can use the responseText property.

In this example, we deal with XML. The servlet constructed the response in a tag. To parse this XML tag, call the getElementsByTagName() method on the responseXML property of the XMLHttpRequest object. It gets the tag name and the child value of the tag. Based on the value parsed, the response is formatted and written in HTML.

You just finished validating the subscription ID, all without a page refresh.

Code walkthrough: View authors, publishers, titles

The other functionalities — View Authors, View Publishers, and View Titles — work along similar lines. You have to define separate handlers for each functionality:

Remember, this sample application allows the user to view the titles by author or publisher. So either the Author list or the Publisher list displays. In such a scenario, the application only calls one callback handler based on the user selection — in other words, for author and publisher list, you have only one listHandler callback handler.

To display the titles list, you will use titlesHandler . The remaining functionality stays the same with the servlet processing the request and writing back the response in XML fornat. The response is then read, parsed, formatted, and written in HTML. You can render the list in HTML as a select. options tag. This sample code snippet shows the titlesHandler method.

So far, we’ve demonstrated how to implement real time validation and refreshes. WIth Ajax, you can choose among several ways to add spice and flair to user interactions on your Web sites. Next we’ll run the application.

Running and testing the application

Run the application

Download the sample code wa-ajax-Library.war and copy it to your Tomcat Webapp directory (for example, c:\Tomcat 5.0\Webapps). To start the Tomcat server, type the following:

Tomcat is now started with your Ajax Web application deployed.

Test the application

To test the application:

    Open your Web browser. Point to http://localhost:tomcatport/Library/order.jsp where the variable tompcatport is the port that your Tomcat server runs on.

You will see the subscription screen.

In the Enter Subscription ID field, type any user ID except «John» and tab out of the field.

The subscription ID request that you made to the server asynchronously will be validated. You will see a message «Subscription not valid» as shown in Figure 2:

Figure 2. The «Subcription not val >View image at full size

The application validated the user asynchronously and provided runtime validation without refreshing the browser.

Type in the user ID value, John.

You will see a message «Subscription is valid». Once the subscription is valid, the application enables Order button.

  • Select the By Author or By Publisher radio button to populate the author or publisher drop-down list, respectively.
  • Select an author or publisher from the drop-down list.

    The title area is populated dynamically (as in Figure 3).

    Figure 3. The «Subcription is val >View image at full size

    When you select the author or publisher, the application requests the server to provide the title information associated with the selected author or publisher at runtime from the server. The title information displays without refreshing the browser.

    You’ve successfully installed and tested this sample Ajax Application.

    Summary

    In conclusion

    Ajax has come a long way since its inception. We believe Ajax can be applied as more than just a design pattern, though Ajax still has some issues:

    • Browser support for the XMLHttpRequest object can be constraining. Most browsers do support the XMLHttpRequest object, but a few do not (usually the older version of browsers).
    • Ajax is best suited for displaying a small set of data. If you deal with large volumes of data for a real time display of lists, then Ajax might not be the right solution.
    • Ajax is quite dependent on JavaScript. If a browser doesn’t support JavaScript or if a user disables the scripting option, then you cannot leverage Ajax at all.
    • The asynchronous nature of Ajax will not guarantee synchronous request processing for multiple requests. If you need to prioritize your validation or refreshes, then design your application accordingly.

    Even with these potential hiccups, Ajax still stands as the best solution to enhance your Web pages and resolve page-reload issues.

    Downloadable resources

    • PDF of this content
    • Web application Web archives (wa-ajax-Library.war | 8KB)

    Related topics

    • Ajax for Java developers: Build dynamic Java applications (developerWorks, September 2005): This article introduces a groundbreaking approach to creating dynamic Web application experiences that solve the page-reload dilemma.
    • Ajax and scripting Web services with E4X (developerWorks, April 2005): In this series, you find details about Ajax and ECMAScript for XML.
    • Survey Ajax/JavaScript libraries: Visit the OSA Foundation’s wiki.
    • XMLHttpRequest (W3C Working Draft, 30 January 2014): Get the details on XMLHttpRequest. The API prov >

    Comments

    Sign in or register to add and subscribe to comments.

    Asynchronous JavaScript and XML (AJAX)

    A set of Web Technology that sends and receive data from a server asyncronously.

    • JSON (Java Script Object Notation) has replaced XML for the most part. You can compare and see the advantages of JSON over XML :https://www.quora.com/What-are-the-advantages-of-JSON-over-XML

    Why do we choose AJAX ?

    • Ajax helps to pass the information without refreshing the page or causing any delay. • Request data from the server after reloading the page . • Receive data from the server after reloading the page’ • Sends data to Server in background

    AJAX calling can be done by Javascript Caaling or JQuery etc. XMLHttpRequest (XHR) Object

     API in form of Object ( Object i.e., properties and methods attached to it)  Which is provided by (the object) the browser’s JS environment  Methods transfer data between client/server  Can be used with the other protocols other than HTTP  Can used with data than XML (JSON, plain text)

    The working of AJAX :  JQuery  Axios  SuperAgent  Fetch API  Prototype  Node Http

    AJAX — The XMLHttpRequest Object The keystone of AJAX is the XMLHttpRequest object.

    The XMLHttpRequest Object All modern browsers support the XMLHttpRequest object.

    The XMLHttpRequest object can be used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

    Create an XMLHttpRequest Object All modern browsers (Chrome, Firefox, IE7+, Edge, Safari Opera) have a built-in XMLHttpRequest object.

    Syntax for creating an XMLHttpRequest object:

    variable = new XMLHttpRequest();

    var xhttp = new XMLHttpRequest();

    XMLHttpRequest Object Methods Method Description new XMLHttpRequest() Creates a new XMLHttpRequest object abort() Cancels the current request getAllResponseHeaders() Returns header information getResponseHeader() Returns specific header information open(method,url,async,user,psw) Specifies the request

    method: the request type GET or POST

    url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password send() Sends the request to the server Used for GET requests send(string) Sends the request to the server.

    Used for POST requests

    setRequestHeader() Adds a label/value pair to the header to be sent

    XMLHttpRequest Object Properties

    Property Description onreadystatechange Defines a function to be called when the readyState property changes readyState Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready responseText Returns the response data as a string responseXML Returns the response data as XML data status Returns the status-number of a request 200: «OK» 403: «Forbidden» 404: «Not Found» For a complete list go to the Http Messages Reference statusText Returns the status-text (e.g. «OK» or «Not Found»)

    Send a Request To a Server

    To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

    xhttp.open(«GET», «ajax_info.txt», true); xhttp.send(); Method Description open(method, url, async) Specifies the type of request

    method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) send() Sends the request to the server (used for GET) send(string) Sends the request to the server (used for POST)

    GET Requests A simple GET request:

    xhttp.open(«GET», «demo_get.asp», true); xhttp.send(); In the example above, you may get a cached result. To avoid this, add a unique ID to the URL:

    xhttp.open(«GET», «demo_get.asp?t=» + Math.random(), true); xhttp.send(); If you want to send information with the GET method, add the information to the URL:

    xhttp.open(«GET», «demo_get2.asp?fname=Henry&lname=Ford», true); xhttp.send();

    POST Requests A simple POST request:

    xhttp.open(«POST», «demo_post.asp», true); xhttp.send(); To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:

    xhttp.open(«POST», «demo_post2.asp», true); xhttp.setRequestHeader(«Content-type», «application/x-www-form-urlencoded»); xhttp.send(«fname=Henry&lname=Ford»); Method Description setRequestHeader(header, value) Adds HTTP headers to the request

    header: specifies the header name value: specifies the header value The url — A File On a Server The url parameter of the open() method, is an address to a file on a server:

    xhttp.open(«GET», «ajax_test.asp», true); The file can be any kind of file, like .txt and .xml, or server scripting files like .asp and .php (which can perform actions on the server before sending the response back).

    Asynchronous — True or False? Server requests should be sent asynchronously.

    The async parameter of the open() method should be set to true:

    xhttp.open(«GET», «ajax_test.asp», true); By sending asynchronously, the JavaScript does not have to wait for the server response, but can instead:

    execute other scripts while waiting for server response deal with the response after the response is ready The onreadystatechange Property With the XMLHttpRequest object you can define a function to be executed when the request receives an answer.

    The function is defined in the onreadystatechange property of the XMLHttpResponse object:

    1. The XML Document Used 2.Display XML Data in an HTML Table

    Введение в AJAX Информационные технологии. Введение в Ajax AJAX [Asynchronous Javascript And Xml] – технология для взаимодействия с сервером без перезагрузки. — презентация

    Презентация была опубликована 6 лет назад пользователемСергей Панкратьев

    Похожие презентации

    Презентация на тему: » Введение в AJAX Информационные технологии. Введение в Ajax AJAX [Asynchronous Javascript And Xml] – технология для взаимодействия с сервером без перезагрузки.» — Транскрипт:

    1 Введение в AJAX Информационные технологии

    2 Введение в Ajax AJAX [Asynchronous Javascript And Xml] – технология для взаимодействия с сервером без перезагрузки страниц.

    3 История 18 февраля 2005 г. – первое публичное использование термина в статье Джесси Джеймса Гарретта « Новый подход к веб — приложениям » для обозначения нового набора технологий. Однако многие технологии были доступны и использовались и раньше, например, в подходе «Remote Scripting», предложенным Microsoft в 1998 г. Стал особенно популярен после использования его компанией Google в сервисах Gmail, Google Maps и Google Suggest.

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

    5 Асинхронная модель обмена данными Браузер отправляет запрос на сервер, сервер уведомляет браузер о том, что запрос принят на обработку, и освобождает его для дальнейшей работы. После пересылки сервером подготовленного ответа на браузере запускается заранее подготовленная функция показа сообщения. Пока ответ формируется и пересылается – браузер свободен : пользователь может добавлять комментарии, заполнять формы, посылать новые асинхронные запросы.

    6 Асинхронная модель обмена данными Синхронная модель обмена данными

    7 Особенности асинхронной модели обмена данными: Сложность в реализации и отладке : заранее должно быть задано то, что сработает после ; недостаточные возможности браузеров. Неопределена последовательность выполнения запросов : поскольку можно одновременно делать несколько задач, задача, начатая первой, может окончиться последней. Разрыв по времени между действием и реальным результатом, приложение становится более чувствительным к ошибкам, как пользовательским ( нехватка привилегий ), так и ошибкам коммуникации ( разрыв связи и т. п.). Контроль целостности. Интерактивность. Быстрый интерфейс : мгновенная реакция на действия пользователя.

    8 AJAX – интеграция технологий (X)HTML, CSS для представления и стилизации информации. JavaScript производит операции над DOM- моделью на стороне клиента для обеспечения динамического отображения информации и интерактивности. XMLHttpRequest для асинхронного обмена данными с веб — сервером. XML и XSLT, HTML, JSON для формирования данных. JavaScript объединяет все перечисленное в единую технологию. AJAX HTML CSS DOM JavaScript XmlHttpRequest XML AJAX

    9 Типичное AJAX–приложение состоит их двух частей: БраузерJavaScriptСервер Java, PHP XMLHttpRequest

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

    11 Примеры: Google suggest Google — одна из первых систем, предложившая » живой » поиск (live search). Пользователь печатает поисковую фразу, а система автодополняет ее, получая список самых вероятных дополнений с сервера.

    12 Примеры: Google suggest Принцип реализации : Активируется примерно при каждом нажатии клавиши : система отслеживает время посылки последнего запроса, при » обычной » скорости печати запрос отсылается при каждом нажатии, при » программисткой » скорости – каждые несколько нажатий. Создается скрытый, который показывается при начале печати. заполняется ответом сервера : текущий результат подсвечивается. Результаты кэшируются : при нажатии на » удалить «, обращения к серверу не происходит. Для управления частотой запросов отслеживается время на осуществление запроса : при подключении по выделенной линии запросы идут чаще, чем при подключении через модем.

    13 Примеры: Gmail На момент появления являлся единственным открытым почтовым сервисом, использующим AJAX. Проверка ошибок ввода формы ДО Submit : на сервер передается имя пользователя, результат проверки возвращается на страницу. Быстрая загрузка : браузер обращается к серверу только за данными, а не обновляет весь интерфейс. Автоматическая » доставка » писем в открытую папку : на сервер периодически отправляется запрос и, если пришли новые письма, они появляются в браузере. Автодополнение : достаточно ввести первые буквы имени адресата, остальные дополняются автоматически.

    14 Преимущества Экономия трафика при работе веб — приложением : вместо загрузки всей страницы достаточно загрузить только изменившуюся часть. Уменьшение нагрузки на сервер : например, на странице работы с почтой при отметке прочитанных писем серверу достаточно внести изменения в базу данных и отправить на клиент сообщение об успешном выполнении операции без необходимости повторно создавать страницу и передавать её клиенту. Ускорение реакции интерфейса : поскольку загружается только изменившаяся часть, пользователь видит результат своих действий быстрее.

    15 Недостатки Отсутствие интеграции со стандартными инструментами браузера : динамически создаваемые страницы не регистрируются браузером в истории посещения страниц ; не функционирует кнопка « Назад »; невозможно сохранить закладки на желаемый материал. Динамически загружаемое содержимое недоступно поисковикам, поэтому необходимо предусматривать альтернативные способы доступа к содержимому сайта. Становятся неактуальными старые методы учёта статистики сайтов, т. к. многие статистические сервисы ведут учет просмотра новых страниц. Кроссбраузерность : разные браузеры поддерживают стандарты неодинаково.

    16 Объект XMLHTTPRequest Низкоуровневая основа большинства AJAX- приложений. Представляет собой набор API для пересылки различных данных (XML, XHTML, JSON и т. д.) по HTTP- протоколу между браузером и веб — сервером. Позволяет осуществлять HTTP- запросы к удаленному серверу без необходимости перезагружать страницу. Ограничений на формат передаваемых данных нет : данные можно пересылать в виде XML, JSON, HTML или простого текста.

    18 Методы класса XMLHTTPRequest abort() отменяет текущий запрос ( обрыв соединения ) getAllResponseHeaders() возвращает полный список HTTP- заголовков в виде строки getResponseHeader( headerName ) возвращает значение указанного заголовка open(method, URL, async, userName, password) определяет метод, URL и другие опциональные параметры запроса ; параметр async определяет, происходит ли работа в асинхронном режиме send(data) отправляет запрос на сервер setRequestHeader(label, value) добавляет HTTP- заголовок к запросу

    19 Свойства класса XMLHTTPRequest onreadystatechange обработчик события, которое происходит при каждой смене состояния объекта readyState возвращает текущее состояние объекта : 0 — неинициализирован, 1 — открыт, 2 – отправка данных, 3 – получение данных, 4 – данные загружены responseText текст ответа на запрос responseXML текст ответа на запрос в виде XML status возвращает HTTP- статус в виде числа : 404 – «Not Found», 200 – «OK» и т. д. statusText возвращает статус в виде строки : «Not Found», «OK» и т. д.

    20 Пример реализации метода отправки запроса function sendRequest(file, _result >

    22 Пример Привет, мир AJAX’a Кликни, чтобы отправить запрос. Здесь будет результат запроса

    23 Пример : страница с несколькими вкладками Вкладка 1 Вкладка 2 Вкладка 3

    24 Пример : адресация запроса на скрипт Кликни, чтобы отправить запрос. Здесь будет результат запроса PHP- файл :

    25 Пример : Сверхдинамичный поиск Привет, мир AJAX’a function sendSearchRequest()

    » title=»Пример : Сверхдинамичный поиск . str_replace($query, $query , $page). ; if (!empty($result)) echo $result ; else echo По запросу \$query\ ничего найдено!; > else echo Введите запрос для поиска; ?>» > 26 Пример : Сверхдинамичный поиск «. str_replace($query, » $query «, $page). » «; if (!empty($result)) echo » $result «; else echo «По запросу \»$query\» ничего найдено!»; > else echo «Введите запрос для поиска»; ?> «> «> » title=»Пример : Сверхдинамичный поиск . str_replace($query, $query , $page). ; if (!empty($result)) echo $result ; else echo По запросу \$query\ ничего найдено!; > else echo Введите запрос для поиска; ?>»>

    Мастер Йода рекомендует:  20 лучших бесплатных ресурсов для дизайнеров
  • Добавить комментарий