AJAX для новичков


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

AJAX для новичков

Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.

Что такое AJAX?

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Обобщим достоинства AJAX:

  • Возможность создания удобного Web-интерфейса
  • Активное взаимодействие с пользователем
  • Частичная перезагрузка страницы, вместо полной
  • Удобство использования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание объекта XMLHttpRequest

Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

А для Internet Explorer`а используется следующее:

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

function CreateRequest ()
<
var Request = false ;

if ( window . XMLHttpRequest )
<
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest ();
>
else if ( window . ActiveXObject )
<
//Internet explorer
try
<
Request = new ActiveXObject ( «Microsoft.XMLHTTP» );
>
catch ( CatchException )
<
Request = new ActiveXObject ( «Msxml2.XMLHTTP» );
>
>

if (! Request )
<
alert ( «Невозможно создать XMLHttpRequest» );
>

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

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

  • Проверка существования XMLHttpRequest.
  • Инициализация соединения с сервером.
  • Посылка запрса серверу.
  • Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

//Проверяем существование запроса еще раз
if (! Request )
<
return;
>

//Назначаем пользовательский обработчик
Request . onreadystatechange = function()
<
//Если обмен данными завершен
if ( Request . readyState == 4 )
<
//Передаем управление обработчику пользователя
r_handler ( Request );
>
>

//Проверяем, если требуется сделать GET-запрос
if ( r_method . toLowerCase () == «get» && r_args . length > 0 )
r_path += «?» + r_args ;

//Инициализируем соединение
Request . open ( r_method , r_path , true );

if ( r_method . toLowerCase () == «post» )
<
//Если это POST-запрос

//Устанавливаем заголовок
Request . setRequestHeader ( «Content-Type» , «application/x-www-form-urlencoded; charset=utf-8» );
//Посылаем запрос
Request . send ( r_args );
>
else
<
//Если это GET-запрос

//Посылаем нуль-запрос
Request . send ( null );
>
>

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

function ReadFile ( filename , container )
<
//Создаем функцию обработчик
var Handler = function( Request )
<
document . getElementById ( container ). innerHTML = Request . responseText ;
>

//Отправляем запрос
SendRequest ( «GET» , filename , «» , Handler );

Именно таким образом происходит взаимодействие с сервером.

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

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

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

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

.
Request . onreadystatechange = function()
<
//Если обмен данными завершен
if ( Request . readyState == 4 )
<
if ( Request . status == 200 )
<
//Передаем управление обработчику пользователя
r_handler ( Request );
>
else
<
//Оповещаем пользователя о произошедшей ошибке
>
>
else
<
//Оповещаем пользователя о загрузке
>

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

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

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

Пример кода JSON:

«data» :
<
«misc» :
[
<
«name» : «JSON-элемент один» ,
«type» : «Подзаголовок 1»
>,

<
«name» : «JSON-элемент два» ,
«type» : «Подзаголовок 2»
>
]
>

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

После выполнения данного кода вам будет доступен объект responsedata.

Работа с серверными языками программирования

Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.

По традиции, начнем с приветствия нашему замечательному миру:

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

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

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

WEB-дизайн Технология AJAXизучаем Ajax на примере

Основы HTML
Структура документов
Создание web-страницы
Задаем стили текста
Вставляем картинку
Гиперссылки
Таблицы
Списки
Теги HTML
Специальные символы
Основы CSS
Свойства CSS
Технология Ajax
Основы AJAX
Изучаем AJAX на примере
SEO
SEO учебники
ТИЦ и как его повысить
Заработок в интернете
Заработок в интернете для новичков
Заработок в соц. сетях с помощью Prospero
GetGoodLinks – заработок на продаже ссылок.
Реклама

Изучаем AJAX на примерах.

AJAX расшифровывается как Asynchronous Javascript And XML, что означает Асинхронный JavaScript и XML. AJAX позволяет обновлять данные HTML-страницы без полной её перезагрузки. Кроме этого технология позволяет работать с интернет-страницами асинхронно. То есть пока JavaScript взаимодействует с Web-сервером, пользователь может продолжать работать с web-страницей.

Примером использования технологии AJAX является Google Suggest. Работа Google Suggest заключается в том, что пока вы вводите слово или фразу для поиска, JavaScript обращается к базе данных Google и запрашивает у неё 10 самых популярных запросов, начинающихся с тех же букв. И затем выводит этот список без перезагрузки страницы.

Для рассмотрения принципов работы технологии AJAX, реализуем на своем сайте механизм подобный Google Suggest. Допустим, у нас есть сайт туроператора. На сайте есть поле поиска предложений по названию страны. Добавим к этому полю раскрывающийся список с автозаполнением по введенным буквам. Приступим к решению этой задачи. Сразу оговорюсь, что для реализации этой задачи необходимо знание HTML и немного JavaScript(знатоком быть не обязательно). В качестве серверного языка будет использован php.

Для начала создадим форму поиска. Для этого на вашем web-сервере создайте файл index.html, откройте его при помощи любого текстового редактора и введите следующий html-код.

Поиск предложений.
http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ >

Освоение Ajax: Часть 1. Введение в Ajax

Освоение Ajax: эффективный подход к созданию Web-сайтов и знакомство с тем, как работает эта технология

Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения. Автор, эксперт по Ajax, демонстрирует совместную работу этих технологий (от общего обзора до детального изучения), цель которой – сделать чрезвычайно эффективную Web-разработку повседневной реальностью. Он также раскрывает основные концепции Ajax, включая объект XMLHttpRequest.

Брэт Маклафлин, автор и редактор, O’Reilly Media Inc.

Брэт Маклафлин (Brett McLaughlin) работает с компьютерами со времен Logo (помните маленький треугольник?). За последние несколько лет он стал одним из наиболее известных авторов и программистов сообщества по технологиям Java и XML. Он работал в Nextel Communications над реализацией сложных корпоративных систем, в Lutris Technologies, фактически, над созданием сервера приложений, а с недавних пор работает в O’Reilly Media, Inc., где продолжает писать и редактировать книги по данной тематике. В готовящейся Брэтом вместе с популярными авторами Эриком и Бет Фриманами книге Быстрый штурм Ajax использован общепризнанный и передовой подход к Ajax по методу Head First. Его недавняя книга «Java 1.5 Tiger: Заметки разработчика», является первой доступной книгой по новейшей технологии Java, а его классическая «Java и XML» остается одной из наиболее авторитетных работ по использованию технологий XML в языке программирования Java.

  • Содержание

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

Однако, Ajax – это далеко не чья-то прихоть, а мощный подход к созданию Web-сайтов, который не так трудно изучить, как полностью новый язык.

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

  • Настольные приложения
  • Web-приложения

Оба варианта знакомы; настольные приложения обычно поставляются на CD (или иногда загружаются с Web-сайта) и устанавливаются целиком на вашем компьютере. Они могут использовать Интернет для загрузки обновлений, но код, выполняющий эти приложения, размещен на вашем рабочем столе. Web-приложения (и это не удивительно) работают где-то на Web-сервере, а вы обращаетесь к этим приложениям через ваш Web-браузер.

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

С другой стороны, Web-приложения обычно самые свежие по времени и предоставляют возможности, которые вы никогда бы не смогли иметь на вашем компьютере (вспомните Amazon.com и eBay). Однако с могуществом Web приходит ожидание – ожидание ответа от сервера, ожидание обновления экрана, ожидание ответа на запрос и генерирования новой страницы.

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

Так чего же мы ждем? Начнем рассмотрение Ajax и способов превращения ваших неуклюжих Web-интерфейсов в чувствительные Ajax-приложения.

Старая технология, новые хитрости

Что касается Ajax, то реальность такова, что он охватывает много технологий – для его освоения необходимо углубиться в несколько различных технологий (вот почему я разобью на независимые части первые несколько статей из этой серии). Хорошей новостью является то, что вы, возможно, уже знаете достаточно о многих из этих технологий – большинство из этих индивидуальных технологий изучаются легко (определенно не так трудно, как язык программирования полностью, например Java или Ruby).

Определение Ajax

Между прочим, Ajax – это аббревиатура от Asynchronous JavaScript and XML (и DHTML, и т.д.). Фраза была придумана Джессе Джеймсом Гарретом из Adaptive Path (см. раздел Ресурсы) и, по словам Джессе, не предназначалась быть аббревиатурой.

Вот основные технологии, вовлеченные в Ajax-приложения:

  • HTML используется для создания Web-форм и указания полей для использования в вашем приложении.
  • JavaScript-код – это основной код, выполняющий Ajax-приложения и обеспечивающий взаимодействие с серверными приложениями.
  • DHTML, или Dynamic HTML, помогает динамически обновлять формы. Вы будете использовать div , span и другие динамические HTML-элементы для разметки вашего HTML.
  • DOM, Document Object Model (объектная модель документов), будет использоваться (через код JavaScript) для работы и со структурой вашего HTML, и (в некоторых случаях) с XML, полученным от сервера.

Рассмотрим все это по отдельности и разберемся в том, что делает каждая из этих технологий. Я исследую каждую из них в следующих статьях; сейчас просто познакомимся поближе с этими компонентами и технологиями. Чем больше вы знаете о них, тем легче перейти от бессистемных знаний к освоению каждой из них (и действительно улучшить процесс разработки Web-приложений).

Объект XMLHttpRequest

Первый объект, о котором вы хотите узнать, возможно, самый новый для вас; он называется XMLHttpRequest . Это объект JavaScript, и он создается так же просто, как показано в листинге 1.

Листинг 1. Создание нового объекта XMLHttpRequest

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

В нормальных Web-приложениях пользователи заполняют поля форм и нажимают кнопку Submit (подтвердить). Затем форма передается на сервер полностью, сервер обрабатывает сценарий (обычно PHP или Java, возможно, CGI-процесс или что-то в этом роде), а потом передает назад всю новую страницу. Эта страница может быть HTML-страницей с новой формой с некоторыми заполненными данными, либо страницей подтверждения, либо, возможно, страницей с какими-то выбранными вариантами, зависящими от введенных в оригинальную форму данных. Естественно, пока сценарий или программа на сервере не обработается и не возвратится новая форма, пользователи должны ждать. Их экраны очистятся и будут перерисовываться по мере поступления новых данных от сервера. Вот где проявляется низкая интерактивность – пользователи не получают немедленной обратной реакции и определенно чувствуют себя не так, как при работе с настольными приложениями.

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

Затем сервер передает данные обратно в ваш JavaScript-код (все еще находящийся в вашей Web-форме), который решает, что делать с данными. Он может обновить поля формы «на лету», придавая свойство немедленности вашему приложению – пользователи получают новые данные без подтверждения или обновления их форм. JavaScript-код может даже получить данные, выполнить какие-либо вычисления и передать еще один запрос, и все это без вмешательства пользователя! В этом заключается мощь XMLHttpRequest . Он может общаться с сервером по своему желанию, а пользователь даже не догадывается о том, что происходит на самом деле. В результате мы получаем динамичность, чувствительность, высокую интерактивность настольного приложения вместе со всеми возможностями интернет.

Добавление JavaScript-кода

После того, как вы разберетесь с XMLHttpRequest , оставшийся JavaScript-код превращается в рутинную работу. Фактически, вы будете использовать JavaScript-код для небольшого числа основных задач:

  • Получить данные формы: JavaScript-код упрощает извлечение данных из вашей HTML-формы и передает их на сервер.
  • Изменить значения в форме: Форма обновляется тоже легко, от установки значений полей до замены изображений «на лету».
  • Выполнить анализ HTML и XML: Вы будете использовать JavaScript-код для управления DOM (см. следующий раздел) и для работы со структурой вашей HTML-формы и всеми XML-данными, возвращаемыми сервером.

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

Листинг 2. Сбор и установка значений полей при помощи JavaScript-кода

Здесь нет ничего такого уж выдающегося, и это здорово! Вы должны начать понимать, что нет ничего чрезмерно сложного во всем этом. Как только вы освоите XMLHttpRequest , оставшаяся часть вашего Ajax-приложения будет простым JavaScript-кодом, похожим на приведенный в листинге 2, смешанным с немного более умным HTML. К тому же, время от времени есть немного работы с DOM. Итак, давайте рассмотрим это.

Завершение с DOM

И последнее, хотя и не менее важное, — это DOM, Document Object Model (объектная модель документа). Для некоторых из вас слухи о DOM могут быть немного пугающими – она не часто используется HTML-дизайнерами и даже немного не свойственна кодировщикам на JavaScript (пока вы действительно не решаете каких-либо программных задач высокого уровня). Вы можете найти широкое применение DOM в тяжеловесных программах, написанных на языках Java и C/C++; фактически, это и принесло DOM репутацию сложной и трудной для изучения.

К счастью, использование DOM в технологии JavaScript является делом легким и в основном интуитивным. Сейчас мне, наверное, надо было бы рассказать вам, как использовать DOM или хотя бы привести пару примеров кода, но даже это сбило бы вас с верного пути. Дело в том, что вы можете продвинуться довольно далеко в изучении Ajax без необходимости примешивать сюда DOM, и это именно тот путь, который я хочу вам показать. Я вернусь к DOM в следующей статье, но сейчас просто знайте, что она где-то здесь. Когда вы начнете передавать XML-данные вперед и назад между вашим JavaScript-кодом и реальными изменениями HTML-формы, вы углубитесь в DOM. А пока можно эффективно работать с Ajax без DOM, так что пока отложим ее до поры до времени.

Получение объекта Request

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

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

Работа с браузерами Microsoft

Браузер Microsoft Internet Explorer для обработки XML использует анализатор MSXML (ссылки на дополнительную информацию по MSXML вы можете найти в разделе Ресурсы). Поэтому, когда вы пишете Ajax-приложения, которые должны работать в Internet Explorer, необходимо создать объект особым способом.

Однако, это не так то и легко. На самом деле в ходу две различных версии MSXML. Версия MSXML зависит от версии технологии JavaScript, установленной в Internet Explorer, поэтому вам нужно написать код, подходящий для обеих версий. Взгляните на листинг 3, в котором приведен код для создания XMLHttpRequest в браузерах Microsoft.

Листинг 3. Создание объекта XMLHttpRequest в браузерах Microsoft

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

xmlHttp = new ActiveXObject(«Msxml2.XMLHTTP»);

xmlHttp = new ActiveXObject(«Microsoft.XMLHTTP»); .

В двух словах, этот код пытается создать объект, используя одну версию MSXML; если это не получится, создается объект для второй версии. Изящно, да? Если ничего не сработало, переменная xmlHttp устанавливается в false, для того чтобы указать вашему коду, что что-то не так. В этом случае вы, возможно, работаете с браузером не от Microsoft и должны использовать другой код для выполнения работы.

Работа с Mozilla и браузерами не от Microsoft

Если Internet Explorer не ваш браузер, либо вы пишете код для браузеров не от Microsoft, вам нужен другой код. Фактически, это простая строка, которую вы видели в листинге 1:

var xmlHttp = new XMLHttpRequest object; .

Эта намного более простая строка создает объект XMLHttpRequest в Mozilla, Firefox, Safari, Opera и в большой степени в каждом браузере не от Microsoft, поддерживающем Ajax в любой форме или разновидности.

Объединение

Мы хотим поддерживать все браузеры. Кто хочет писать приложение, работающее только в Internet Explorer, или приложение, работающее только во всех остальных браузерах? Еще хуже, хотите ли вы написать ваше приложение дважды? Конечно, нет! Итак, объединим поддержку для Internet Explorer и для остальных браузеров. В листинге 4 приведен код, делающий это.

Листинг 4. Создание объекта XMLHttpRequest для всех браузеров


Пока проигнорируйте комментарии и непонятные теги, типа @cc_on ; это специальные команды JavaScript-компилятора, которые мы рассмотрим детально в моей следующей статье, которая будет полностью посвящена XMLHttpRequest . Основу этого кода можно разделить на три шага:

  1. Создайте переменную xmlHttp для ссылки на объект XMLHttpRequest , который вы создадите.
  2. В блоке try создайте объект в браузерах Microsoft:
    • В блоке try создайте объект с использованием объекта Msxml2.XMLHTTP .
    • Если это не получится, В блоке try создайте объект с использованием объекта Microsoft.XMLHTTP .
  3. Если xmlHttp все еще не установлен, создайте объект для остальных браузеров.

В конце этого процесса xmlHttp должен ссылаться на корректный объект XMLHttpRequest , независимо от используемого пользователем браузера.

Пара слов о защите

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

Запрос/ответ в мире Ajax

Итак, вы уже знакомы с Ajax и имеете базовое представление об объекте XMLHttpRequest и о том, как создать его. Если вы читали внимательно, то вы даже понимаете, что это технология JavaScript общается с любым Web-приложением на сервере, а не ваша HTML-форма, которую вы подтвердили напрямую.

Что мы пропустили? Как на самом деле использовать XMLHttpRequest . Поскольку это критический код, который вы будете использовать в некоторых формах в каждом вашем Ajax-приложении, рассмотрим коротко, как выглядит базовая модель запрос/ответ в Ajax.

Выполнение запроса

У вас есть ваш превосходный новый объект XMLHttpRequest ; приведем его в движение. Во-первых, нам понадобится JavaScript-метод, который ваша Web-страница может вызвать (например, когда пользователь вводит текст или выбирает вариант из меню). Затем, нужно следовать одной и той же основной схеме практически во всех ваших Ajax-приложениях:

  1. Получить какие-либо данные из Web-формы.
  2. Создать URL для подключения.
  3. Открыть соединение с сервером.
  4. Установить функцию для сервера, которая выполнится после его ответа.
  5. Передать запрос.

В листинге 5 приведен пример Ajax-метода, который выполняет именно эти операции и именно в этом порядке:

Листинг 5. Выполнить запрос с Ajax

Многое из этого не требует пояснений. Первая часть кода использует базовый JavaScript-код для сбора значений из нескольких полей формы. Затем код устанавливает PHP-сценарий в качестве URL для подключения. Обратите внимание, как указывать URL и как добавлять к нему city и state (из формы), используя простые GET-параметры.

Затем открывается соединение; это первое место, где вы опять увидели в действии XMLHttpRequest . Указывается метод соединения (GET) и URL. Последний параметр, когда установлен в true , запрашивает асинхронное соединение (то есть, делает это способом, сооветствующим названию Ajax). При использовании false код ждал бы выполнения запроса и не продолжал бы работу до получения ответа. При использовании true ваши пользователи могут работать с формой (и даже вызывать другие JavaScript-методы) пока сервер обрабатывает этот запрос в фоновом режиме.

Свойство onreadystatechange xmlHttp (вспоминайте, это ваш экземпляр объекта XMLHttpRequest ) позволяет вам информировать сервер о том, что следует делать после завершения работы (что может быть через пять минут или через пять часов). Поскольку код не собирается ждать сервер, вы должны дать серверу знать, что делать, так чтобы вы смогли среагировать. В данном случае будет инициирован конкретный метод (называемый updatePage() ) после завершения сервером обработки вашего запроса.

Наконец, вызывается send() со значением null . Поскольку вы добавили данные для передачи на сервер (city и state) в URL запроса, вам не надо передавать что-либо в запросе. Таким образом, передается ваш запрос, и сервер может делать то, что вы указали ему делать.

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

Код в листинге 5 очень прост. Данные являются простым текстом и могут быть включены как часть URL-запроса. GET посылает запрос вместо более сложного POST. Не добавляется XML, заголовки контента, не передаются данные в теле запроса – можно сказать, Ajax-утопия.

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

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

Теперь вы должны разобраться с ответом сервера. Пока вы должны знать только два момента:

  • Не делать ничего, пока свойство xmlHttp.readyState не будет равно 4.
  • Сервер будет записывать свой ответ в свойстве xmlHttp.responseText .

Первый момент (состояния готовности) готовится стать основным объемом следующей статьи; вы узнаете о стадиях HTTP-запроса столько, сколько никогда даже и не хотели знать. Пока вы просто проверяйте на равенство определенному значению (4), и все будет работать (и вы будете знать, что искать в следующей статье). Второй момент (использование свойства xmlHttp.responseText для получения ответа от сервера) является простым. В листинге 6 приведен пример метода (который сервер может вызвать), основанного на значениях, переданных в листинге 5.

Листинг 6. Обработка ответа от сервера

Опять же, код не является трудным или сложным. Он ожидает, пока сервер не вызовет его с нужным состоянием готовности, и затем использует значение, которое сервер возвращает (в данном случае ZIP-код для введенного пользователем города и штата), для установки другого поля формы. В результате поле zipCode неожиданно появляется с ZIP-кодом, но пользователь ни разу не щелкнул по кнопке! Это поведение настольного приложения, о чем я говорил ранее. Оперативность, ощущение динамичности и т.д., а все с маленьким Ajax-кодом.

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

Перехват в Web-формах

Что нам осталось? В сущности, не много. Вы имеете JavaScript-метод, собирающий введенную пользователем в форму информацию, передаете ее серверу, предоставляете еще один JavaScript-метод для обработки ответа и даже устанавливаете значение поля, когда этот ответ приходит. Все что осталось на самом деле – вызвать этот первый метод и запустить полный процесс. Вы могли бы, очевидно, добавить кнопку в вашу HTML-форму, но это же старый, добрый 2001 год, не так ли? Воспользуемся возможностями технологии JavaScript, как показано в листинге 7.

Листинг 7. Запуск Ajax-процесса

Если это выглядит как еще один кусок в рутинном, в некоторой степени, коде – вы правы, так и есть! Когда пользователь вводит новое значение для любого из полей city или state, запускается метод callServer() , и Ajax-функция начинается. Вам кажется, что вы начинаете понимать суть вещей? Отлично!

В заключение

В настоящий момент вы, возможно, не готовы взять и написать ваше первое Ajax-приложение, по крайней мере, пока не исследовали раздел Ресурсы. Однако, вы уже можете начать понимать основную идею о том, как работают такие приложения и что такое объект XMLHttpRequest . В готовящихся статьях вы изучите этот объект, а также то, как контролировать взаимодействие JavaScript-to-server и работать с HTML-формами, и даже разберетесь с DOM.

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

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

Что такое AJAX?

AJAX расшифровывается Asynchronous JavaScript And XML (Асинхронный JavaScript и XML).

AJAX — это не новый язык программирования или разметки. AJAX — это эффективный способ совместного использования HTML, CSS, JavaScript и DOM.

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

AJAX используется многими известными веб-приложениями такими как: Facebook, Flickr, Gmail, Google Maps и Youtube.

Какие технологии включает AJAX?

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

  • HTML в качестве «каркаса»;
  • CSS для оформления;
  • DOM для извлечения или изменения информации на странице;
  • Объект XMLHttpRequest для асинхронного обмена данными с сервером;
  • JavaScript для связи перечисленных выше технологий между собой.

Этапы выполнения AJAX запроса

Обратите внимание: далее в данном учебнике будут подробно рассмотрены шаги выполнения AJAX запроса.

60% AJAX

Что такое AJAX, я, думаю, рассказывать не стоит, ибо с приходом веб-два-нуля большинство пользователей уже воротят носом от перезагрузок страниц целиком, а с появлением jQuery реализация упростилась в разы…

Начнём с самого простого – загрузка HTML-кода в необходимый нам DOM-элемент на странице. Для этой цели нам подойдет метод «.load()». Данный метод может принимать следующие параметры:

url – запрашиваемой страницы

data – передаваемые данные (необязательный параметр)

callback – функция, которая будет вызвана при завершении запроса к серверу (необязательный параметр)

Теперь на примерах.

Подгрузим на подопытную страницу информацию со странички html.example.html:

С помощью следующего запроса, в элемент с « » будет вставлен весь HTML с указанной страницы:

Как видите, подгружается весь HTML вместе со всеми стилями. Чтобы избежать подобного беспорядка, из подгружаемой странички следует выбрать лишь нужный нам элемент. Для этого достаточно через пробел указать селектор:

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

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

Из моего опыта работы – вам очень часто придётся пользоваться методом «.load()» как описано в первом примере. А ещё советую запомнить второй пример, он может выручить, когда надо реализовать загрузку через AJAX, а доступа к сервер-сайду у вас нет или он ограничен.

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

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

Разработка кода для JavaScript для реализации AJAX с нуля является весьма трудоемким и нудным процессом. Однако множество библиотек JavaScript, включая jQuery, имеют отличную высокоуровневую реализацию AJAX в виде набора методов и функций, которые облегчают и ускоряют построение веб сайтов.

В данной серии уроков мы рассмотрим основы построения запросов AJAX с помощью jQuery. Будут раскрыты следующие темы:

  • Что такое технология AJAX? Как она работает? В чем ее преимущества?
  • Как выполнить различные типы запросов AJAX с помощью jQuery?
  • Отправка данных на сервер с помощью запросов AJAX.
  • Обработка и выделение данных из ответов AJAX с сервера.
  • Как настроить обработку AJAX в jQuery и изменить установки по умолчанию?

Примечание: Уроки сконцентрированы на части JavaScript клиентской стороны. Но разработка серверной части также достаточно проста. Для более полной информации следует изучить материалы по языкам программирования серверной стороны, например PHP.

Что такое AJAX и чем он полезен?

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

  • Обычная веб страница содержит ссылки или формы, которые при нажатии или отправке создают запрос к новому адресу URL на веб сервере. Сервер отправляет полностью новую страницу HTML, которую затем выводит браузер, заменяя оригинальную страницу. Такой подход занимает много времени и плохо действует на посетителя, так как тому приходится ждать загрузки новой страницы.
  • При использовании технологии AJAX, JavaScript код делает запрос к URL на сервере. Код также может отправить данные вместе с запросом. Затем JavaScript код обрабатывает ответ сервера и действует соответствующим образом. Например, могут быть произведены вычисления с возвращаемыми данными, добавлен или обновлен виджет на странице, выдано сообщение посетителю об обновлении базы данных на сервере.

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

Фундаментальным моментом AJAX является объект JavaScript XMLHttpRequest . Он предоставляет ряд методов, таких как open() , send() и onreadystatechange() , которые могут быть использованы при отправке запросов AJAX на сервер и обработке ответов в фоновом режиме.

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

Для тех кто более любопытен, слово AJAX является аббревиатурой из первых букв выражения на английском языке «Asynchronous JavaScript And XML» (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение — запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.

Делаем запрос GET с помощью $.get()

Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).

В простейшей форме можно вызвать метод так:

. где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:

. хотя можно также запросить статический документ:

При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:

Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:

В качестве альтернативы вы можете передать данные методу $.get() как строку:

Получаем данные с сервера

До сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.

AJAX запрос — асинхронный

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

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

Определяем тип данных ответа

Обычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML, JSON, JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.

Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:

Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:

Пример использования метода $.get()

Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:

Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.

Затем создаем страницу showForecast.html в той же папке что и getForecast.txt :

Открываем showForecast.html в браузере и нажимаем кнопку «Получить прогноз погоды». В окне сообщения получим прогноз погоды с нашего сервера.

Вот как работает данный код:

  1. showForecast.html содержит элемент button «Получить прогноз погоды» с ID getForecast .
  2. JavaScript вверху страницы выполняется как только страница будет загружена и DOM окажется в состоянии готовности.
  3. Код JavaScript сначала привязывает обработчик события click к кнопке #getForecast . Данный обработчик выполняет AJAX запрос GET к getForecast.txt , передавая название города и дату для прогноза. Также определяется возвратная функция success(), которая будет выполняться по завершению запроса. Формат возвращаемых сервером данных определяется как JSON.
  4. Файл getForecast.txt возвращает браузеру данные прогноза в формате JSON.
  5. Вызывается функция success() . jQuery разбирает данные JSON, полученные от getForecast.txt , конвертирует их в объект JavaScript, и передает их в функцию.
  6. Функция возвращает объект данных forecastData и выводит сообщение, которое содержит несколько свойств объекта, включая название города, прогноз и температуру.

Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .

Что Такое AJAX И Как Он Работает

AJAX это Асинхронный JavaScript и XML. Это набор методов веб-разработки, которые позволяют веб-приложениям работать асинхронно — обрабатывать любые запросы к серверу в фоновом режиме. Подождите, что снова AJAX? Давайте рассмотрим каждый термин отдельно и разберём, что такое AJAX.

JavaScript — это хорошо известный язык кодирования. Помимо прочего, он управляет динамическим контентом веб-сайта и позволяет динамически взаимодействовать с пользователем. XML — это ещё один вариант языка разметки, такой как HTML, как следует из названия — расширяемый язык разметки. Если HTML предназначен для отображения данных, XML предназначен для хранения и переноса данных.

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

Практические AJAX примеры

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

Концепция AJAX фактически существует со середины 90-х годов. Тем не менее, она получила более широкое признание, когда Google начал внедрять эту концепцию в Google Mail и Google Maps в 2004 году. Сегодня она широко используется в различных веб-приложениях для оптимизации процесса взаимодействия с сервером.

Вот более полезные AJAX примеры в нашей повседневной жизни.

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

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

Если вы хотите улучшить свой веб-сайт, не забудьте показать Google и вашим клиентам, что вы позаботились о проблемах безопасности. Сертификат SSL ОБЯЗАТЕЛЕН в наши дни.

Если у вас ещё нет SSL-сертификата, возьмите его у Hostinger.

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

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

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

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

Диаграмма:

Сравнительная таблица:
Обычная модель AJAX модель
  1. HTTP-запрос отправляется с веб-браузера на сервер.
  2. Сервер получает и впоследствии извлекает данные.
  3. Сервер отправляет запрошенные данные в веб-браузер.
  4. Веб-браузер получает данные и перезагружает страницу для отображения данных.

Во время этого процесса у пользователей нет выбора, кроме как ждать, пока весь процесс не будет завершён. Это не только отнимает много времени, но и создаёт ненужную нагрузку на сервер.

  1. Браузер создаёт вызов JavaScript, который затем активирует XMLHttpRequest.
  2. В фоновом режиме веб-браузер создаёт HTTP-запрос к серверу.
  3. Сервер получает, извлекает и отправляет данные обратно в веб-браузер.
  4. Веб-браузер получает запрошенные данные, которые будут непосредственно отображаться на странице. Перезагрузка не требуется.

Послесловие

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

AJAX для новичков

Сейчас в сети Интернет наблюдается очень активное развитие (и даже использование) новых технологий. Одна из таких технологий — AJAX.

Что такое AJAX?

AJAX — это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX — это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.

При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.

Обобщим достоинства AJAX:

  • Возможность создания удобного Web-интерфейса
  • Активное взаимодействие с пользователем
  • Частичная перезагрузка страницы, вместо полной
  • Удобство использования

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание объекта XMLHttpRequest

Как уже говорилось выше, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:

А для Internet Explorer`а используется следующее:

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

function CreateRequest ()
<
var Request = false ;

if ( window . XMLHttpRequest )
<
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest ();
>
else if ( window . ActiveXObject )
<
//Internet explorer
try
<
Request = new ActiveXObject ( «Microsoft.XMLHTTP» );
>
catch ( CatchException )
<
Request = new ActiveXObject ( «Msxml2.XMLHTTP» );
>
>

if (! Request )
<
alert ( «Невозможно создать XMLHttpRequest» );
>

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

Запрос к серверу

Алгоритм запроса к серверу выглядит так:

  • Проверка существования XMLHttpRequest.
  • Инициализация соединения с сервером.
  • Посылка запрса серверу.
  • Обработка полученных данных.

Для создания запроса к серверу мы создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.

//Проверяем существование запроса еще раз
if (! Request )
<
return;
>

//Назначаем пользовательский обработчик
Request . onreadystatechange = function()
<
//Если обмен данными завершен
if ( Request . readyState == 4 )
<
//Передаем управление обработчику пользователя
r_handler ( Request );
>
>

//Проверяем, если требуется сделать GET-запрос
if ( r_method . toLowerCase () == «get» && r_args . length > 0 )
r_path += «?» + r_args ;

//Инициализируем соединение
Request . open ( r_method , r_path , true );

if ( r_method . toLowerCase () == «post» )
<
//Если это POST-запрос

//Устанавливаем заголовок
Request . setRequestHeader ( «Content-Type» , «application/x-www-form-urlencoded; charset=utf-8» );
//Посылаем запрос
Request . send ( r_args );
>
else
<
//Если это GET-запрос

//Посылаем нуль-запрос
Request . send ( null );
>
>

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

function ReadFile ( filename , container )
<
//Создаем функцию обработчик
var Handler = function( Request )
<
document . getElementById ( container ). innerHTML = Request . responseText ;
>

//Отправляем запрос
SendRequest ( «GET» , filename , «» , Handler );

Именно таким образом происходит взаимодействие с сервером.

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

В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.

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

Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.

.
Request . onreadystatechange = function()
<
//Если обмен данными завершен
if ( Request . readyState == 4 )
<
if ( Request . status == 200 )
<
//Передаем управление обработчику пользователя
r_handler ( Request );
>
else
<
//Оповещаем пользователя о произошедшей ошибке
>
>
else
<
//Оповещаем пользователя о загрузке
>

Варианты ответа от сервера

От сервера можно получить данные нескольких видов:

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

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

Пример кода JSON:

«data» :
<
«misc» :
[
<
«name» : «JSON-элемент один» ,
«type» : «Подзаголовок 1»
>,

<
«name» : «JSON-элемент два» ,
«type» : «Подзаголовок 2»
>
]
>

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

После выполнения данного кода вам будет доступен объект responsedata.

Работа с серверными языками программирования

Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.

По традиции, начнем с приветствия нашему замечательному миру:

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

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

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

Ajax jQuery для начинающих + видеоурок

Приветствую вас, уважаемый читатель моего блога.

Данная статья посвящена изучению основ работы с Ajax посредством jQuery.

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

Видеоурок Ajax jQuery:

В первой статье курса по ООП в PHP я пояснял термины класс, метод и свойство. Для совершенствования понимания работы с объектами рекомендую просмотреть весь видеокурс по PHP и Kohana.

Работать с Ajax можно двумя способами:

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

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

Итак, наш выбор пал на библиотеку jQuery и ее видение Ajax.

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

Чуть-чуть теории Ajax

Ajax работает следующим образом:

Данные с определенной страницы передаются в файл с PHP-скриптом, который, учитывая полученные данные, формирует ответ и передает его назад той самой определенной странице без ее перезагрузки (асинхронно).

Практика использования Ajax+jQuery

Постановка задачи: загрузка определенной страницы инициирует получение информации из MySQL-базы данных. Полученная посредством PHP-скрипта информация асинхронно передается в определенную страницу и подставляется в поля ввода.

Листинг 1: PHP-скрипт, получающего из базы данных значения и передающего их ajax-запросу:

Пояснение к коду:

2-я строка — соединились с базой данных (пользователь: root, пароль: root).

4-я строка — в случае безуспешной попытки соединения прекратить выполнение скрипта.

6-я строка — выбираем базу данных test.

7-я строка — выбираем все из таблицы test_table базы данных test (визуально структура test_table представлена на рис. 1).

8-я строка — текущая строка выборки из базы данных возвращается в виде ассоциативного массива.

9-я строка — выводится перекодированный в формат json ассоциативный массив.

Структура таблицы test_table:

Рис. 1: Струтура таблицы test_table.

Все, что отправляется на вывод PHP-скрипта, будет передано ajax-запросу (Листинг 2), в том числе и содержимое базы данных, преобразованное в json в виде объекта с именем data. Для доступа к полям id и content таблицы базы данных необходимо обратиться к соответствующим полям объекта data: data.id и data.content

Листинг 2: Ajax jQuery-код определенной страницы (раздел head HTML-документа):

Пояснения к коду:

2-я строка — дожидаемся загрузки всего документа и лишь после этого выполняем код асинхронного запроса (пояснение необходимости ожидания загрузки документа см. в первом видеоуроке по jQuery).

4-я строка — способ отправки данных в файл с PHP-скриптом (POST или GET) (пока мы PHP-скрипту ничего отправлять не будем, но тип глобального массива отправки все равно укажем).

5-я строка — путь к файлу с PHP-скриптом (PHP-скрипт представлен в Листинге 1).

6-я строка — тип принимаемых от PHP-скрипта данных. Да-да, именно json.

7-я строка — если запрос к серверу успешно обработан (PHP-скрипт вернул данные), то метод success выполнит инструкции, расположенные в инициализируемой на лету функции. Обратите внимание, в качестве аргумента функции передается массив data, именно он будет содержать данные, полученные из PHP-скрипта (так уж устроен jQuery).

9-я строка — размещение значения поля >

10-я строка — в абзац с >
Рис. 2: Структура проекта.

Ajax-отправка данных PHP-скрипту

Постановка задачи: после нажатия на кнопку организовать отправку данных методом POST из поля ввода формы PHP-скрипту и получить асинхронный ответ.

Немного преобразуем наш HTML (jquery.html) — добавим поле ввода . Из него мы будем забирать значение для отправки PHP-скрипту.

Ajax-запрос будет запускаться после нажатия на вновь добавленную кнопку .

Листинг 3: раздел BODY HTML-документа

Листинг 4: PHP-скрипт, отвечающий на Ajax-запрос

Пояснения к коду листинга 4:

2-я строка — получение содержимого поля key глобального массива POST (переданного Ajax-запросом) в переменную $key.

10-я строка — к массиву $res добавляется поле key, в которое записывается значение переданного методом POST параметра.

11-я строка — сформированный массив, включая поле key, отправляется в Ajax-запрос.

Листинг 5: Ajax-запрос с отправкой данных методом POST:

Обратите внимание, теперь код Ajax-запроса спрятан внутри функции runajax(). Это приведет к тому, что Ajax-запрос будет обрабатываться только после вызова данной функции, а не сразу после загрузки документа, как это было в предыдущем примере.

Пояснение к коду листинга 5:

4-я строка — получение содержимого поля ввода с >

7-я строка — формируются данные для отправки PHP-скрипту. В глобальном массиве пост создается поле key со значением равным содержимому поля ввода >

13-я строка — сохраняем в переменную $temp содержимое полей data.content и data.key, разделенных пробелами.

14-я строка — содержимое переменной $temp выводится в абзац >

18-я строка — дожидаемся загрузки всего документа полностью.

19-я строка — демонстрируется интересный подход к обработке клика по кнопке >

Дело в том, что задачу можно решить установкой обработчика событий onClick кнопке: , но такой подход смешивает во едино JavaScript и HTML, что философски неправильно.

Отправка Ajax-формы при помощи jQuery Form Plugin

Постараемся решить задачу номер 2 более простым способом. Для этого существует дополнение jQuery Form Plugin.

Скачаем и подключим данное дополнение к нашему проекту:

Необходимо изменить HTML-код раздела BODY (добавить тег формы и кнопке ):

Листинг 6: Изменение jQuery-кода для применения jQuery Form Plugin

Пояснение к листингу 6:

4-я строка — под идентификатором , вместо этого выполняется Ajax-запрос к файлу PHP-скрипта, указанного в теге формы myForm.

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

В первой статье данной серии мы рассмотрели основы AJAX. Во второй разобрали примеры использования vanilla JavaScript.

В данной статье мы пройдемся через jQuery функции и методы, который имеют отношение к AJAX. Более подробно мы рассмотрим метод load и функцию ajax.

Использование метода load.

Load — простой и достаточно мощный метод для извлечения удаленных данных. Ниже вы видите синтаксис:

Следующая таблица показывает возможные параметры:

Параметр Описание Необходим
url Строка, содержащая URL, которой отправляется запрос. Да
data Данные (либо строка либо просто объект) который отправляется на сервер с запросом Нет
complete Возвращающая функция, которая выполняется, когда запрос выполнен либо успешно, либо не успешно. Нет

Параметры возвращающей функции:

Параметр Описание
responseText Данные, полученные из запроса
textStatus Строка, характеризующая статус запроса
jqXHR jQuery объект XMLHttpRequest, который перенастраивает встроенный в браузер XMLHttpRequest (XHR) объект.

Список возможных значений параметра textStatus:

Для того, чтобы лучше понимать, как работает метод load, давайте взглянем на пример, который был рассмотрен в предыдущей статье:

Взгляните еще раз на эту простую HTML структуру:

Вот как это выглядит:

Помните, что мы хотели обновлять содержимое элемента #bio возвращаемыми данными при нажатии на кнопку.

Вот так выглядит jQuery код:

Предположим, что запрос выполнен успешно (т.е когда textStatus имеет значение success или notmodified), то конечный результат должен выглядеть примерно так:

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

Левая часть изображения показывает XHR object, напечатанный в консоли браузера, как если бы мы использовали простой JavaScript (см. предыдущую статью) для создания запроса. С другой стороны, правая часть соответственно показывает jqXHR объект, если мы используем метод load.

Однако, в случае неудачного запроса должно появиться соответствующее сообщение. Для того, чтобы сделать это, мы отследим значение параметра textStatus и отобразим сообщение об ошибке:

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

Наконец, стоит отметить, что по умолчанию метод load использует HTTP метод GET, если мы отправляем данные на сервер как объект. Только затем вызывается метод POST.

Смотрите пример с exabyte ниже:

Теперь давайте изменим формат файла, который мы запрашиваем с сервера. Для этого примера необходимые данные включены в файл Bio.html, а не в файл Bio.txt. Также стоит отметить, что необходимый файл содержит 2 параграфа.

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

Выглядит это примерно так:

И это пример с exabyte:

Заключение

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

Мастер Йода рекомендует:  Видеоурок по веб-разработке от GeekBrains
Добавить комментарий