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-код.
Поиск предложений.
Отдых на море
Поиск предложений:
В этом листинге мы создали форму поиска с полем для ввода текста и кнопкой отправки, и создаем слой div для вывода результатов. К данной странице так же прикрепляется файл ajax.js, который будет содержать функции JavaScript.
Далее напишем функции JavaScript, которые будут посылать запросы серверу и обновлять страничку. Для того чтобы не приходилось перегружать html-документ полностью нам и понадобиться технология Ajax. Итак, приступим. Создайте файл ajax.js, поместите его в ту же папку, что и index.html, и откройте его в текстовом редакторе.
Для начала необходимо создать объект, который будет передавать запросы серверу и принимать ответы. В разных браузерах этот объект создается по разному. Мы напишем универсальную функцию, которая должна работать в разных браузерах. Добавьте в файл ajax.js следующий код JavaScript.
/*переменная для хранения объекта запроса*/
var request;
/*функция создания объекта запроса*/
function CreateRequest()
{
var request=null;
try
{
//создаем объект запроса для Firefox, Opera, Safari
request = new XMLHttpRequest();
}
catch (e)
{
//создаем объект запроса для Internet Explorer
try
{
request=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return request;
}
Выводить список результатов необходимо при каждом изменении в поле поиска. Для этого воспользуемся обработчиком событий JavaScript. Определять изменения будем при каждом событии клавиатуры keyup . Для этого в наш HTML-код файла index.html в строке, где создается поле поиска с именем country , добавим атрибут onkeyup="KeyPress(this.value)" :
Т. е. при нажатии любой клавиши будет вызываться функция JavaScript KeyPress() , в которую в качестве параметра передаются символы, введенные в строку поиска. Функция KeyPress() должна выполнить следующие задачи:
- Создать новый объект запроса посредством вызова функции CreateRequest();
- Сформировать URL-адрес, к которому необходимо подключиться для получения результатов;
- Настроить объект запроса для установки связи с сервером;
- Отправить запрос серверу.
Приступим к созданию функции KeyPress() . Для создания нового объекта запроса нам просто необходимо переменной request присвоить значение, возвращаемое ранее созданной функцией CreateRequest() . И для надежности проверим переменную request . Если она равна NULL , то объект запроса создать не удалось. Вот так будет выглядеть код JavaScript для решения данной задачи:
Function KeyPress(term)
{
request=CreateRequest();
if(request==null)
{
return;
}
}
Далее необходимо указать объекту запроса request какая функция JavaScript будет обрабатывать ответ сервера. Для этого необходимо свойству onreadystatechange присвоить имя соответствующей функции. Данное свойство указывает браузеру, какую функцию запускать при каждом изменении состояния готовности запроса. У нас обработкой ответа будет заниматься функция LoadResults() . Добавьте в функцию следующую строку: request.onreadystatechange = LoadResults; . Отметим, что после названия функции нет скобок.
Затем займемся настройкой подключения. Для этого сначала необходимо указать объекту, куда передавать этот запрос. Сформируем URL-адрес сценария, который будет вычислять результаты, и присвоим его переменной url . Допустим, за вычисление результатов на стороне сервера у нас будет отвечать php-скрипт country.php . Тогда наш URL-адрес будет выглядеть следующим образом: var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random(); , где с переменной s передаются введенные в поле поиска символы, а sid присваивается случайное число, чтобы браузер не кэшировал страницу. Добавьте эту строчку в тело функции KeyPress() .
Далее необходимо инициализировать подключение с помощью метода open("GET", url, true) объекта request . Этот метод имеет три параметра. Параметр "GET" указывает, как отправить данные серверу. Мы используем метод GET , потому что введенные символы в строку поиска передаются серверному сценарию через url-адрес. Во второй параметре указывается url-адрес серверного сценария. У нас url-адрес храниться в переменной url , поэтому во втором параметре мы указываем эту переменную. Третий параметр может иметь два значения: true - асинхронный режим и false - синхронный режим. Наше приложение будет работать в асинхронном режиме, поэтому указываем true . После инициализации подключения, необходимо создать подключение и запросить результаты. Для этого просто необходимо вызвать функцию send(null) объекта request . Параметр null указывает, что запрос не содержит данных.
После внесения всех изменений функция KeyPress(this.value) примет следующий вид:
Function KeyPress(term)
{
/*создаем новый объект запроса*/
request=CreateRequest();
/*если не удалось создать объект запроса, то заканчиваем выполнение функции*/
if(request==null)
{
return;
}
/*формируем url-адрес*/
var url = "country.php" + "?s=" + encodeURIComponent(term) + "&sid=" + Math.random();
/*настраиваем объект запроса для установки связи*/
request.onreadystatechange = LoadResults;
request.open("GET", url, true);
/*отправляем запрос серверу*/
request.send(null);
}
Итак, соединение установлено, запрос отправлен, сервер обрабатывает данные и возвращает результат. Далее необходимо получить ответ, обработать и вывести результаты на web-страницу. Всем этим будет заниматься функция LoadResults() , которая будет вызываться при каждом изменении статуса готовности запроса. Рассмотрим, как должна работать эта функция.
Для начала необходимо проверить текущее состояние готовности. Статус готовности хранит свойство объекта запроса readyState . При завершении обработки запроса состояние готовности равно 4. Т.е. если request.readyState == 4 , то можно обрабатывать ответ:
Function LoadResults()
{
/*обрабатываем ответ*/
}
}
Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
/*все в порядке, обрабатываем ответ*/
}
}
}
Если проверка состояния и статуса запроса закончилась успешно, то можно приступать к обработке данных, полученных от сервера. Получить данные можно двумя способами: request.responseText - получение данных в виде текста, либо request.responseXML - получение данных в виде объекта XMLDocument. Допустим, у нас сервер передает ответ в виде текстового списка стран через запятую. Тогда получаем данные: var answer = request.responseText . Далее обрабатываем данные и выводим их в слой с id="searchresults" .
Я не буду вдаваться в подробности обработки данных, а просто приведу код функции с комментариями:
Function LoadResults()
{
/*Проверяем состояние готовности*/
if (request.readyState == 4){
/*Проверяем статус запроса*/
if (request.status == 200){
//делаем слой searchresults видимым
ShowDiv("searchresults");
//очищаем результаты
ClearResults();
//получаем данные
var answer = request.responseText;
//преобразуем строку текста в массив
var array = answer.split(",");
//определяем размер массива
var count = array.length;
//находим слой searchresults
//создаем таблицу в объектной модели документа
var tbl = document.createElement("table");
var tblbody = document.createElement("tbody");
var tblRow, tblCell, tblNode;
//перебираем все элементы массива array
for(var i = 0; i
{
var text = array[i];
//создаем строки таблицы и добавляем в ее тело
tblRow = document.createElement("tr");
tblCell = document.createElement("td");
//задаем атрибуты и функции ячеек
tblCell.onmouseover = function(){this.className="mouseOver";};
tblCell.onmouseout = function(){this.className="mouseOut";};
tblCell.setAttribute("border", "0");
tblCell.onclick = function(){Replace(this);};
tblNode = document.createTextNode(text);
tblCell.appendChild(tblNode);
tblRow.appendChild(tblCell);
tblbody.appendChild(tblRow);
}
//добавляем в таблицу ее тело
tbl.appendChild(tblbody);
//помещаем таблицу в слой
div.appendChild(tbl);
}
}
}
И еще пару вспомогательных функций JavaScript для вывода результатов на экран:
/*делаем слой с результатами видимым*/
function ShowDiv(id)
{
if (document.layers) document.layers.visibility="show";
else document.getElementById(id).style.visibility="visible";
}
/*делаем слой с результатами не видимым*/
function HideDiv(id)
{
if (document.layers) document.layers.visibility="hide";
else document.getElementById(id).style.visibility="hidden";
}
/*очистка результатов*/
function ClearResults()
{
/* Удаление существующих строк из таблицы результатов
var div = document.getElementById("searchresults");
var counter = div.childNodes.length;
for(var i = counter-1; i >= 0; i--)
{
div.removeChild(div.childNodes[i]);
}
}
/*Заменяем значение в поле ввода значением, выбранным щелчком мыши*/
function Replace(tblCell)
{
var inputbox = document.getElementById("country");
inputbox.value = tblCell.firstChild.nodeValue;
ClearResults();
HideDiv("searchresults");
}
Так же в наш html-файл index.html между тегами и добавьте следующие правила CSS:
.mouseOut{ background: #ffffff; color: #0000000;
}
.mouseOver{ background: #ccccff; color: #0000000;
}
table {width:250px
}
На этом все. В данной статье мы рассмотрели основы работы технологии Ajax на примере.
AJAX - это аббревиатура, которая означает Asynchronous Javascript and XML. На самом деле, AJAX не является новой технологией, так как и Javascript, и XML существуют уже довольно продолжительное время, а AJAX - это синтез обозначенных технологий. AJAX чаще всего ассоцириуется с термином Web 2.0 и преподносится как новейшее Web-приложение.
При использовании AJAX нет необходимости обновлять каждый раз всю страницу, так как обновляется только ее конкретная часть. Это намного удобнее, так как не приходится долго ждать, и экономичнее, так как не все обладают безлимитным интернетом. Правда в этом случае, разработчику необходимо следить, чтобы пользователь был в курсе того, что происходит на странице. Это можно реализовать с использованием индикаторов загрузки, текстовых сообщений о том, что идёт обмен данными с сервером. Необходимо также понимать, что не все браузеры поддерживают AJAX (старые версии браузеров и текстовые браузеры). Плюс Javascript может быть отключен пользователем. Поэтому, не следует злоупотреблять использованием технологии и прибегать к альтернативным методам представления информации на Web-сайте.
Обобщим достоинства AJAX:
- Возможность создания удобного Web-интерфейса
- Активное взаимодействие с пользователем
- Удобство использования
Для того, чтобы осуществлять обмен данными, на странице должен быть создан объект XMLHttpRequest, который является своеобразным посредником между Браузером пользователя и сервером (рис. 1). С помощью XMLHttpRequest можно отправить запрос на сервер, а также получить ответ в виде различного рода данных.
Обмениваться данными с сервером можно двумя способами. Первый способ - это GET-запрос. В этом запросе вы обращаетесь к документу на сервере, передавая ему аргументы через сам URL. При этом на стороне клиента будет логично использовать функция Javascript`а escape для того, чтобы некоторые данные не прервали запрос.
Клиент часть, написанная на 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(«имя_заголовка»,«значение») - установить значения заголовка запроса.
Свойства объекта XMLHttpRequestonreadystatechange - одно из самых главных свойств объекта XMLHttpRequest. С помощью этого свойства задаётся обработчик, который вызывается всякий раз при смене статуса объекта.
readyState - число, обозначающее статус объекта.
responseText - представление ответа сервера в виде обычного текста (строки).
responseXML - объект документа, совместимый с DOM, полученного от сервера.
status - состояние ответа от сервера.
statusText - текстовое представление состояния ответа от сервера.
Следует подробнее расммотреть свойство readyState:
- 0 - Объект не инициализирован.
- 1 - Объект загружает данные.
- 2 - Объект загрузил свои данные.
- 3 - Объек не полностью загружен, но может взаимодействовать с пользователем.
- 4 - Объект полностью инициализирован; получен ответ от сервера.
Как уже говорилось выше, создание данного объекта для каждого типа браузера - уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror`е и Safari, нужно использовать следующее выражение:
Var Request = new XMLHttpRequest();
А для Internet Explorer`а используется следующее:
Var Request = new ActiveXObject("Microsoft.XMLHTTP");
Var Request = new ActiveXObject("Msxml2.XMLHTTP");
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
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"); } return Request; }
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверуАлгоритм запроса к серверу выглядит так:
- Проверка существования XMLHttpRequest.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
/* Функция посылки запроса к файлу на сервере r_method - тип запроса: GET или POST r_path - путь к файлу r_args - аргументы вида a=1&b=2&c=3... r_handler - функция-обработчик ответа от сервера */ function SendRequest(r_method, r_path, r_args, r_handler) { //Создаём запрос var Request = CreateRequest(); //Проверяем существование запроса еще раз 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); }
Именно таким образом происходит взаимодействие с сервером.
Обработка ответаВ предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о загрузке } } ...
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
Request.onreadystatechange = function() { //Если обмен данными завершен if (Request.readyState == 4) { if (Request.status == 200) { //Передаем управление обработчику пользователя r_handler(Request); } else { //Оповещаем пользователя о произошедшей ошибке } } else { //Оповещаем пользователя о загрузке } } ...
Варианты ответа от сервераОт сервера можно получить данные нескольких видов:
- Обычный текст
JSON - это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
Пример кода JSON:
{
"data":
{
"misc":
[
{
"name" : "JSON-элемент один",
"type" : "Подзаголовок 1"
},
{
"name" : "JSON-элемент два",
"type" : "Подзаголовок 2"
}
]
}
}
При получении такого кода, производим следующее действие:
Var responsedata = eval("(" + Request.responseText + ")")
После выполнения данного кода вам будет доступен объект responsedata .
Работа с серверными языками программированияТакая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
Echo "Hello, World!";
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Последнее обновление: 1.11.2015
Технология AJAX представляет собой технологию асинхронного взаимодействия с сервером. Благодаря данной технологии мы можем отправлять запросы к серверу и получать от него ответы без перезагрузки страницы в фоновом режиме, создавать насыщенные интерактивные веб-приложения, например, веб-чаты.
Первоначально возможность асинхронного взаимодействия с сервером была использована в виде объекта ActiveX в компании Microsoft. В последствии идея асинхронного взаимодействия была подхвачена и другими компаниями. И в настоящее время функционал асинхронных запросов в браузерах доступен веб-разработчикам через объект XMLHttpRequest .
Поскольку данный материал посвящен jQuery, я не буду подробно останавливаться на объекте XMLHttpRequest . Но вкратце покажу суть его использования.
Итак, прежде всего для работы с AJAX нам нужен веб-сервер. Это может быть Node.js, IIS, Apache, nginx. В дальнейшем я буду использовать веб-сервер Apache.
Создадим веб-страничку, где будет использоваться XMLHttpRequest:
Загрузить Нет новостей function ajaxload(){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(this.readyState==4){ if(this.status >=200 && xhr.status < 300){ document.getElementById("news").innerHTML=this.responseText; } } } xhr.open("GET", "ajax.php"); xhr.send(); }
В плане разметки у нас есть два элемента: кнопка, по нажатию на которую совершается функция ajaxload , и блок div, в который будут загружаться данные при запросе.
Все основное действие у нас происходит в функции ajaxload. Во-первых, мы создаем объект XMLHttpRequest: var xhr=new XMLHttpRequest(); .
Через этот объект мы будем отправлять запросы. При получении ответа будет срабатывать событие onreadystatechange . И для обработки данного события мы присваиваем свойству xhr.onreadystatechange функцию обработки ответа.
В функции обработки мы, во-первых, смотрим на готовность ответа через свойство readyState (состояние this.readyState==4 означает, что запрос завершен). Далее мы проверяем статусный код ответа: если сервер возвратил статусный код от 200 до 300, то запрос прошел успешно.
И затем мы передаем текст ответа в блок div, который у нас имеется на странице через свойство responseText .
В строке xhr.open("GET", "ajax.php"); мы устанавливаем метод запроса и ресурс, к которому будет идти запрос.
Ну и последней строчкой xhr.send() отправляем запрос. В итоге мы написали очень много кода, чтобы выполнить простой запрос.
Пусть у нас на сервере находится обработчик запросов на языке php. Я сделаю его предельно простым. Он будет просто передавать в ответ разметку html:
Теперь по нажатию по кнопке будет происходить ajax-запрос, результаты которого будут загружаться на страницу:
Теперь перепишем код страницы с использованием jQuery:
Загрузить Нет новостей $(function(){ $("button").click(function(){ $("#news").load("ajax.php"); }); });
Таким образом, код становится чище и проще за счет использования библиотеки jQuery. Нам достаточно применить метод load , передав в качестве параметра адрес ресурса. И итоговый результат будет тот же самый.
AJAX (Asynchronous JavaScript and XML) – это технология, обеспечивающая динамические запросы на сервер, в ходе которых нет нужды перезагружать страницу. Сайт функционирует на порядок быстрее, потому что не нужно регулярно обновлять всю страницу, поэтому его использование становится более удобным для пользователя, но не для поисковых систем.
Огромное количество подобных технологий начали применяться еще в далеких 90-х годах прошлого века. Например, в 96-ом году в браузер Internet Explorer 3 внедрили HTML-элемент IFRAME, а спустя два года Microsoft реализовала механизм Remote Scripting.
Однако сам термин «Asynchronous JavaScript and XML» стал известен миру лишь на заре 2005 года, когда Джесси Гаррет выпустил статью под названием «Ajax: новый подход к веб-приложениям» . В своем материале Гаррет подробно рассказал, как создаются интернет-приложения для Google Maps и Gmail. Он с уверенностью заявил, что это стало началом стремительного развития возможностей, доступных пользователям в приложениях.
Джесси Джеймс Гарретт (Jesse James Garrett)
Особое внимание Джесси Гаррет уделил именно технологии AJAX, дал ей название и детально описал новый тренд. Но стоит отметить, что не он придумал эту технологию, он дал ей только название.
После этого сфера разработок интернет-приложений стала куда совершеннее. Отныне результаты обмена данными между браузером и сервером пользователи могут видеть на своих дисплеях.
Зайдя на определенный сайт, вы сразу поймете, что на нем применяется технология AJAX. Раньше пользователям приходилось нажимать на различные кнопки и переходить по ссылкам, чтобы подтвердить свои действия. Сегодня же веб-страница самостоятельно принимает новые данные в реальном времен без перезагрузки на стороне пользователя.
Все это обеспечивает более удобное использование веб-ресурса, так как существенно сокращается время, выделяемое на взаимодействие с ним. По сути, мы начинаем общаться с быстродействующим приложением. И чтобы оно работало полноценно, вам хватит доступа в интернет, а также браузера, работающего с JavaScript.
Принцип работы технологииЧтобы конкретно понять, как именно работает AJAX, рассмотрим 4 важнейших этапа:
Если объяснять суть технологии визуально, то на изображении данный процесс будет выглядеть так:
Без объекта XMLHttpReques обмен информацией невозможен, поэтому он предварительно размещается на самой странице. Объект выступает в роли связывающего звена для сервера и веб-браузера. Сами запросы переходят от системы к серверу в формате POST или GET. Для типа GET присущее обращение к документу, находящемуся на сервере, а в качестве аргумента он получает адрес сайта. Чтобы запрос не был прерван, создана надежная функция JavaScript Escape, предотвращающая такие случаи.
Если данные передаются в больших объемах, не обойтись без функции POST. Сервер занимается обработкой информации, которая ему поступает, и затем, основываясь на них, образует обновленные данные, которые отправляются пользователю.
Подход с применением AJAX подразумевает разновременную передачу информации. Благодаря этому клиенту доступны самые разные функции в ходе «фоновой» передачи данных. Юзеру приходит сообщение о процессе передачи информации, чтобы он не счел его зависшим - это позволяет удержать его на сайте.
Для отправки ответа, сервер применяет стандартный текст JSON либо XML. Получая JSON-документ, он сразу выводится на экран. Но еще пользователь обязан выполнить код, который он получит, после чего сформируется объект JavaScript. А если отправляется текст в формате XML, его сначала нужно заменить на HTML, а затем уже отобразить на странице.
Какие плюсы у AJAX?- Уменьшает нагрузку на сервер. Но это возможно только в том случае, если применять технологию правильно. Вы можете использовать шаблон, который поможет создавать постоянные элементы веб-ресурса: меню, логотип, шапка и прочее. А чтобы удовлетворять запросы посетителей, нет необходимости перезагружать страницу целиком. К примеру, вы создали блок с голосованием, и посетителю предлагается выбрать оптимальный для него пункт, чтобы проголосовать. Как только он нажмет на кнопку, информация моментально уйдет на сервер, а затем человеку придет ответ. И все это происходит без обновления страницы.
- Повышает работоспособность сервера. Потому что происходит загрузка лишь содержания страницы, и пользователям приходят результаты их действий намного быстрее.
- Снижает трафик. Число данных в процессе работы с приложениями существенно уменьшается. Обеспечивается это тем, что заново загружается не вся страница, а лишь ее измененные элементы или данные. Затем скрипт меняет информацию на странице в браузере.
- Открывает большое разнообразие возможностей. Сделав выбор в пользу AJAX, вам будет доступно изобилие действий. Так, регистрируясь на сайтах, посетитель, указывая логин, сразу же узнает, занят он, или нет. А вводя запрос в поисковой строке Google или Яндекс, после любого последующего слова или буквы, ниже отображаются готовые варианты запросов. Разумеется, это значительно облегчает задачу интернет-пользователям.
- Нужно постоянно включать JavaScript. Без данной поддержки технология AJAX на соответствующих страницах практически бесполезна.
- Проблемы с . Нередко контент, размещающийся на страницах динамически, остается без внимания поисковых ботов. В связи с этим рекомендуется применять динамический способ загрузки только по отношению к некоторым фрагментам содержимого. Только так можно свести к минимуму негативное влияние технологии на SEO-продвижение.
- Невозможно объединиться с инструментами браузера. Если создавать страницы динамическим методом, браузер не будет запоминать их и показывать в истории, в связи с чем при нажатии кнопки «Назад» вы не вернетесь на ранее посещенную страницу. Но проблема решается специальными скриптами. Еще у вас не будет возможности сохранить закладку на какой-нибудь контент.
- Отсутствие количества обращений. Из-за динамической загрузки материалов, система не может точно отображать статистику, потому что, когда пользователь перемещается по разным страницам, они не перезагружаются, и счетчик не учитывает эти переходы. Из за этого могут возникать проблемы при оценке аналитике на сайте.
- Снижается уровень безопасности. Установив AJAX, любой пользователь может просмотреть исходный код страницы, а это небезопасно.
Выше уже было сказано о том, что страницы на базе данной технологии очень плохо попадают в индекс. Чтобы этого избежать, лучше заранее побеспокоиться о том, чтобы динамически подгружаемые данные были доступны и по ссылкам тоже. Предусмотрев такую возможность, страницы веб-ресурса будут нормально отображаться и у тех пользователей, которые сидят в браузере без JavaScript.
Владельцам сайтов, где контент загружается динамическим способом, нужно убедиться, что роботы поисковых систем помимо того, что понимают содержимое страниц, еще и верно определяют правила навигации по сайту.
Для максимального снижения отрицательного воздействия AJAX на продвижение сайта, его необходимо оптимизировать:
Зачастую поисковые системы относятся к AJAX ресурсам хуже, чем к сайтам, где эта технология не используется. Причин этого бывает несколько:
- некоторый контент может быть не проиндексирован роботами;
- все страницы имеют одинаковые url;
- определенные страницы могут отображаться у поисковых ботов не так, как у пользователей.
Но если вы будете применять технологию AJAX грамотно, то есть использовать её только для определенных фрагментов на сайте, то тогда у вас не будут возникать проблемы с индексацией.
Я бы не рекомендовал для всего сайта использовать технологию AJAX, такие сайты плохо индексируются поисковыми системами. А вот для части пользовательских элементов (например опросы, добавление комментариев), такая технология полезна и наоборот может повышать юзабилити вашего проекта.
ЗаключениеТехнология AJAX открывает огромные возможности для пользователей, делает общение с веб-сайтами намного быстрее и комфортнее, повышает скорость их работы. Но у нее есть и существенные недостатки, которых можно избежать, если использовать ее правильно. Только при грамотном подходе ваш сайт поднимется на высокие позиции в поисковой выдаче и будет на хорошем счету у поисковых систем.
Большинство современных сайтов используют технологию, которая называется 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 является аббревиатурой из первых букв выражения на английском языке "A synchronous J avaScript A nd X ML" (Асинхронный JavaScript и XML). Однако, термин может ввести в заблуждение - запрос не обязательно должен быть асинхронным и необязательно использовать XML для отправки данных.
Делаем запрос GET с помощью $.get()Метод jQuery $.get() предоставляет легкий и удобный способ сделать простой запрос AJAX. Он выполняет запрос с помощью метода HTTP GET (используется для получения URL, например страниц и изображений), вместо метода POST (который традиционно используется для отправки данных формы).
В простейшей форме можно вызвать метод так:
Где url является адресом URL ресурса, от которого ожидается ответ. Обычно это скрипт на стороне сервера, который выполняет какие-нибудь действия и может возвращать некие данные:
$.get("http://example.com/getForecast.php");
Хотя можно также запросить статический документ:
$.get("http://example.com/mypage.html");
При запросе URL, вы можете отправить данные с запросом. Вы можете передать данные в строке запроса, так же как и при обычном запросе GET:
$.get("http://example.com/getForecast.php?city=rome&date=20120318");
Корректно будет сделать то же самое передав объект данных в качестве второго параметра методу $.get() . Объект данных должен содержать информацию в виде пар имя свойства/значение свойства. Например:
Var data = { city: "rome", date: "20120318" }; $.get("http://example.com/getForecast.php", data);
В качестве альтернативы вы можете передать данные методу $.get() как строку:
Var data = "city=rome&date=20120318"; $.get("http://example.com/getForecast.php", data);
Получаем данные с сервераДо сих пор мы рассматривали примеры использования $.get() только для отправки запросов на сервер, игнорируя любой ответ, который может сформировать скрипт на серверной стороне. Но в большинстве случаев ваш JavaScript код будет ожидать ответ от скрипта на серверной стороне и обрабатывать полученные данные.
AJAX запрос - асинхронный , что означет его выполнение в фоновом режиме, когда остальной код JavaScript продолжает действовать. Как же в таком случае получать ответ от сервера, когда завершится запрос?
Вам нужно написать возвратную функцию , которая будет автоматически выполняться по завершению запроса AJAX и отправке ответа сервером. Как минимум, ваша функция должна принимать данные, возвращаемые сервером, как свой первый аргумент:
Function myCallback(returnedData) { // Делаем обработку данных returnedData }
Как только возвратная функция создана, вы можете передать ее в качестве третьего аргумента в метод $.get() :
Var data = { city: "rome", date: "20120318" }; $.get("http://example.com/getForecast.php", data, myCallback);
Определяем тип данных ответаОбычно, серверная сторона передает данные в одном из нескольких типовых форматов, включая XML , JSON , JavaScript, или HTML. По умолчанию jQuery пытается определить наиболее подходящий формат и разобрать данные соответствующим образом. Но лучше явно определить формат.
Для указания формата надо передать четвертый аргумент методу $.get() . Данный аргумент может быть строкой из следующего списка:
- "xml"
- "json"
- "script"
- "html"
Например, если вы знаете, что скрипт сервера возвращает данные в формате JSON, то вызываете метод $.get() следующим образом:
$.get("http://example.com/getForecast.php", data, myCallback, "json");
Пример использования метода $.get()Здесь приводится пример создания запроса AJAX с помощью метода $.get() и простая обработка ответа. Для работы примера нужно на сервере создать простой текстовый файл с именем getForecast.txt , содержащий следующий текст:
{ "city": "Васюки", "date": "18 марта 2012", "forecast": "Зубодробительный холод и слякоть", "maxTemp": +1 }
Данный файл будет имитировать ответ в формате JSON, который мог быть сформирован скриптом прогноза погоды на сервере.
Затем создаем страницу showForecast.html в той же папке что и getForecast.txt:
Прогноз погоды $(function() { $("#getForecast").click(function() { var data = { city: "Васюки", date: "20120318" }; $.get("getForecast.txt", data, success, "json"); }); function success(forecastData) { var forecast = forecastData.city + " прогноз на " + forecastData.date; forecast += ": " + forecastData.forecast + ". Максимальная температура: " + forecastData.maxTemp + "C"; alert(forecast); } }); Получить прогноз погоды
Открываем showForecast.html в браузере и нажимаем кнопку "Получить прогноз погоды". В окне сообщения получим прогноз погоды с нашего сервера.
Вот как работает данный код:
Простой пример в несколько строк демонстрирует работу запроса AJAX с использованием метода $.get() .
