Ajax примеры на JavaScript. JavaScript - Асинхронные AJAX запросы на примерах Настройка базовых параметров Ajax-запросов

1.1 Особенности технологии AJAX

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

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

Для применения AJAX необходимы следующие компоненты:

• JavaScript (основной компонент);
• объект XMLHttpRequest;
• серверные технологии (например, PHP).

Первоначально технологию AJAX разработала фирма Microsoft как объект ActiveX для браузера Internet Explorer. Затем фирма Mozilla создала объект XMLHttpRequest с (почти) идентичными API, который в настоящее время поддерживается всеми современными браузерами.
Рекомендации организации W3C аналогичной функциональности пока не применены ни в одном браузере.

1.2 Использование объекта XMLHttpRequest

Объект XMLHttpRequest дает возможность отправлять асинхронные HTTP-запросы из кода JavaScript серверу, принимать от него ответы и обновлять отдельные части Web-страницы, не прерывая работу пользователя. Имеет следующие методы и свойства:

• abort() - останавливает выполнение текущего запроса;
• getAllResponseHeaders() - возвращает все HTTP-заголовки ответа в виде строки;
• getResponseHeader(header) - возвращает указанный HTTP-заголовок ответа в виде строки;
• open(method, URL [, async_flag [, userName [. password ]]]) - инициализирует параметры запроса, где:
  • method - один из методов обмена данными с сервером: наиболее часто используются GET и POST, но разрешены также методы HEAD, PUT или DELETE;
  • URL - абсолютный или относительный URL-адрес сервера;
  • async_flag (необязательнлый параметр) - значение true означает асинхронный режим работы с сервером: скрипт, послав запрос серверу, продолжает свою работу (значение по умолчанию), значение false означает синхронный режим работы с сервером: скрипт, послав запрос серверу, приостанавливает свою работу, ожидая ответа от сервера;
  • userName (необязательнлый параметр) - имя пользователя для аутентификации, если параметр равен Null или "" и сайт требует аутентификации, то появляется окно login;
  • password (необязательнлый параметр) - пароль пользователя для аутентификации, если равен Null или "", то игнорируется;
• send(data) - выполняет запрос, данные указываются только для методов POST или PUT;
• setRequestHeader(level, value) - указывает имя и значение HTTP-заголовка в запросе;
• onreadystatechange - используется для установки функции обратного вызова, которая будет обслуживать изменения состояния запроса;
• readyState - возвращает состояние запроса:
  • 0 - не инициализирован;
  • 1 - выполняется подготовка запроса;
  • 2 - запрос отправлен;
  • 3 - выполняется обмен;
  • 4 - обмен завершен.
• responseText - возвращает ответ сервера в виде строки;
• responseXML - возвращает ответ сервера в формате XML;
• responseStream - возвращает ответ сервера в виде двоичных данных;
• status - возвращает HTTP-код состояния запроса;
• statusText - возвращает сообщение о состоянии запроса.

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

• создание объекта xmlHttp;
• формирование запроса к серверу;
• получение данных из сервера.

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

Создание объекта xmlHttp осуществляется с помощью функции createxmlHttp() . Поскольку объект xmlHttp создается в обоих примерах ( и ), оператор присвоения, вызывающий функцию createxmlHttp() и сама функция описаны во внешнем файле ajax.js :

xmlHttp=createxmlHttp();
function createxmlHttp()
{
try
{
var xmlHttp=new XMLHttpRequest(); //var делает переменную локальльной
}
catch(e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
}
if(!xmlHttp) alert("Объект xmlHttp не создан");
else return xmlHttp;
}

Функция createxmlHttp() содержит конструкцию try/catch , которая используется для проверки того, выполняется ли некоторый код JavaScpipt без ошибок:

try
{
// Проверяемый код
}
catch(e)
{
// Обработка ошибки
}

Проверяемый код помещается в блок try{} . Если при выполнении кода произошла ошибка (возникла исключительная ситуация), то управление передается блоку catch(e){} , который перехватывает возникшее исключение и обрабатывает ошибку. При этом исключение не доходит до интерпретатора JavaScpipt и поэтому не сообщается пользователю. Если в блоке try{} код выполняется без ошибок, то блок catch(e){} управление не получает вовсе.
Как отмечалось выше, современные браузеры поддерживают работу с XMLHttpRequest . Однако это не относится к браузерам IE версии 6 и ниже. Поэтому функция createxnlHttp() сначала пытается создать объект xmlHttp с помощью класса XMLHttpRequest (блок try{} ). Если при этом возникает исключительлная ситуация, управление передается в блок catch(e){} , где делается попытка создать объект xmlHttp уже с помощью объекта ActiveXObject .
Если объект и при этом создать не удается, то выводится сообщение о том, что объект xmlHttp не создан.

1.2.2 Формирование запроса к серверу

После создания объекта xmlHttp можно использовать его методы и свойства для организации запроса к серверу. Это делается с помощью функции process() , которая как и функция createxnlHttp() используется в примерах

и и хранится в файле ajax.js :

function process()
{
if(xmlHttp)
{
try
{
xmlHttp.open("GET",serverAddr+serverPar,true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.send(null);
}
catch(e)
{
alert("Невозможно соединится с сервером:\n"+e.toString()+ "\n"+e.description);
}
}
}

Функция process() сначала проверяет, создан ли объект xmlHttp . Если создан, то выполняются следующие действия:

• С помощью метода open() задаются значения параметров соединения с сервером:
  • метод - GET;
  • адрес сервера и передаваемые параметры указываются с помощью переменных serverAddr и serverPar;
  • режим обмена - асинхронный.
• С помощью свойства onreadystatechange указывается обработчик изменений состояния запроса - функция handleStateChange;
• С помощью метода send() посылается запрос на сервер;
• С помощью конструкции try{}/catch(e){} проверяется, не возникла ли ошибка при выполнении вышеописанных действий по созданию и отправлению запроса на сервер.

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

• с помощью метода toString();
• с помощью свойства description.

Функция process() использует обе эти возможности. При этом в случае, например, неправильного задания URL-адреса сервера на экране появляются следующие сообщения:

Невозможно соединится с сервером
Отказано в доступе

1.2.3 Получение данных из сервера

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

Чтение текста из сервера с помощью AJAX


serverAddr="http://zykov/data.txt";
serverPar="";
function handleStateChange()
{
myDiv=document.getElementById("div");
if(xmlHttp.readyState==1)
{
myDiv.innerHTML+="Состояние запроса:1 (подготовка к отправлению)";

"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==2)
{
myDiv.innerHTML+="Состояние запроса:2 (отправлен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==3)
{
myDiv.innerHTML+="Состояние запроса:3 (идет обмен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
}
else
{
if(xmlHttp.readyState==4)
{
myDiv.innerHTML+="Состояние запроса:4 (обмен завершен)";
try { myDiv.innerHTML+=", статус: "+xmlHttp.statusText+"
"; }
catch(e) { myDiv.innerHTML+="
"; }
if(xmlHttp.status==200)
{
try
{
resp=xmlHttp.responseText;
myDiv.innerHTML+="

Сервер передал:"+resp;
}
catch(e) { alert("Ошибка чтения ответа: "+e.description); }
}
else { alert("Ошибка получения данных\n статус: "+xmlHttp.statusText);}
}
}
}
}
}

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

Необходимо также отметить, что текстовые данные, если они являются кириллицей, должны быть сохранены на сервере в кодировке UTF-8.
Фукция handleStateChange() с помощью свойства readyState проверяет текущее состояние запроса и при его изменении выводит на экран в тэг с помощью свойства innerHTML такие данные: номер состояния, его текстовое значение и статус. Текстовое значение статуса определяется с помощью свойства statusText объекта xmlHttp . Поскольку не для всех состояний запроса оно доступно, применяется конструкция try/catch(e) .
Вывод всех состояний запроса сделан с учебной целью. Для получения данных достаточно проанализировать состояние 4 ("обемен данными завершен"), что и сделано в Ajax примере .

Затем в состоянии 4 с помощью свойства status определяется, нормально ли закончился обмен данными с сервером. Если статус равен 200 (текстовое значение "OK"), что означает, что операции с сервером закончились успешно, делается попытка чтение данных, возвращенных сервером. Если ошибки нет - данные выводятся на экран, в виде свойства innerText тэга .

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

При выполнении всех операций в примере без ошибок на экран будут выведены следующие данные:

cостояние запроса:1 (подготовка к отправлению)
Состояние запроса:2 (отправлен), статус: OK
Состояние запроса:3 (идет обмен), статус: OK
Состояние запроса:4 (обмен завершен), статус: OK

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

Robert Sheckly,

необходимо, помимо указания нового адреса файла - serverAddr ="http://zykov/data.xml", заменить в функции

handleStateChange()

resp=xmlHttp.responseText;

resp=xmlHttp.responseXML.getElementsByTagName("name").firstChild.data;

Тогда вместо сообщения

Сервер передал: Привет, клиент!

появится сообщение

Сервер передал: Robert Sheckly

В данной статье поговорим о взаимодействии ajax с php. Как связать работу ajax скрипта и php кода? Как применить ajax в веб разработке? Если вас интересуют такие вопросы, вы найдете на них ответы в нашей статье. А также примеры ajax php кода.

Применение ajax + php

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

Где можно применить ajax + php?

1. Добавление нового комментария

4. Организация поиска на сайте (автозавершение)

5. Пошаговая регистрация пользователя на сайте

6. Подписка на e-mail

7. Просмотр фотографий

И другие…

Как видите вариантов применения ajax + php масса. То есть, можно применить там, где перезагрузка страницы будет не уместной, где нужно просто обменяться данными с сервером.

Где не стоит применять ajax + php

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

1. Для реализации меню

2. Реализации вкладок на странице (Например: когда в интернет магазине на странице товара вы видите обзор, информация, комментарии, фото, видео … не нужно делать загрузку данных при переключении данных вкладок.)

И другие негативные примеры, которые могут навредить лучшему ранжированию вашей страницы.

Взаимодействие ajax с php

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

Для отправки данных на сервер, нужно создать объект XMLHTTPRequest. С помощью него открыть url (php скрипт), послать на него данные (POST или GET метод), получить ответ, и средствами знаний языка js вывести полученный ответ сервера на монитор (ответом может быть любой фрагмент или элемент страницы сайта).

Для прояснения посмотрите ниже предоставленную схему иллюстрирующую взаимодействие ajax с php.

Ajax + php пример

Для примера взаимодействия ajax с php, создадим два файла:

1. ajax_page.html

2. get_ajax.php

Сначала рассмотрим пользовательскую сторону приложения, то есть ajax_ page. html :

Ajax + PHP: пример | сайт function XmlHttp() { var xmlhttp; try{xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e) { try {xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {xmlhttp = false;} } if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function ajax(param) { if (window.XMLHttpRequest) req = new XmlHttp(); method=(!param.method ? "POST" : param.method.toUpperCase()); if(method=="GET") { send=null; param.url=param.url+"&ajax=true"; } else { send=""; for (var i in param.data) send+= i+"="+param.data[i]+"&"; send=send+"ajax=true"; } req.open(method, param.url, true); if(param.statbox)document.getElementById(param.statbox).innerHTML = ""; req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send(send); req.onreadystatechange = function() { if (req.readyState == 4 && req.status == 200) //если ответ положительный { if(param.success)param.success(req.responseText); } } } Здесь будем принимать отчеты о работе ajax приложения и ответ сервера.

Поле ввода 1

Введите свой текст.!

Поле ввода 2

Произвольный текст... Я тащусь от этой статьи, и хочу подписаться на RSS, что-бы читать такие статьи почаще!!!

ajax_page.html:

Разберем javascript сторону данного примера:

XmlHttp() – функция которая создает объект XMLHttpRequest(), она написана максимально компактно и кроссбраузерно.

ajax(param) – наш обработчик при вызове событий (onclick), принимает в массиве paramнеобходимые данные:

url – куда отсылать данные, причем он может быть в таком виде page. php? parameter= value , то есть информация может передаваться по методу GET.

statbox – ид html блока который будет принимать результаты работы ajax + php приложения.

method – метод отправки данных, может быть POST или GET. В нашем примере мы используем POST метод, но в то же время через url можно передавать информацию GET методом.

data – массив передаваемых данных. В нашем примере, данные автоматически берутся из поля 1 и 2, хотя можно просто писать data: {name: "value"}.

success – имя функции или сама функция, которая будет обрабатывать полученные данные (текст).

Вызов функции ajax как вы видите сделан событием onclick=ajax().

Теперь разберем серверную сторону ajax + php приложения, то есть файл get_ ajax. php:

Здесь все гораздо проще. Сначала устанавливаем кодировку выходящих данных, с помощью header. Устанавливаем запрет на кеширование данных. sleep(2) – приостанавливает работу скрипта на 2 секунды, это для того, что бы увидеть анимацию ожидания wait.gif. Выводим полученные данные, при этом читая все элементы массива $_POST и преобразуя их в нужную кодировку (для кириллицы).

Для запуска нашего ajax php приложения загружаем в браузер страничку ajax_page.html

Вот что у меня получилось при нажатии кнопки TEST AJAX:

Это ответ, полученный от файла get_ajax.php:

Остались еще вопросы по поводу ajax + php? Задайте их в комментариях ниже…

Набор пар ключ/значение, которые настраивают запрос AJAX . Все параметры являются необязательными . Допускается, но не рекомендовано установить значение по умолчанию для любого параметра с использованием метода $.ajaxSetup() .
Метод $.ajax() поддерживает следующие параметры:

accepts (по умолчанию: зависит от dataType ).

Тип: PlainObject .
Набор пар ключ/значение, которые отправляется в Accept заголовка запроса. Этот заголовок сообщает серверу, какой ответ запрос будет принимать в ответ. Обратите внимание, что значение параметра, указанного в dataType (тип данных, которые мы ожидаем от сервера) сопоставляется с указанным в параметре. Кроме того, для корректной обработки ответа от сервера необходимо в параметре converters указать функцию, которая возвращает преобразованное значение ответа. Например: $.ajax({ accepts : { mycustomtype: "application/x-some-custom-type " } , // указываем как обрабатывать ответ converters : { "text mycustomtype ": function (result ) { // возвращаем преобразованное значение ответа return newresult; } } , // Ожидаемый тип данных ("mycustomtype") dataType : "mycustomtype " } );

async (по умолчанию: true ).

Тип: Boolean .
По умолчанию, все запросы отправляются асинхронно, если вам необходимо организовать синхронные запросы, то установите этот параметр в false . Обратите внимание, что кроссдоменные запросы и элемент, параметр dataType которого имеет значение "jsonp" не поддерживают запросы в синхронном режиме. Учтите, что используя синхронные запросы вы можете временно заблокировать браузер отключив какие-либо действия пока запрос будет активен.

beforeSend . Тип: Function (jqXHR jqXHR , PlainObject settings ).
Функция обратного вызова, которая будет вызвана перед осуществлением AJAX запроса. Функция позволяет изменить объект jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) до его отправки. Объект jqXHR это надстройка расширяющая объект XMLHttpRequest , объект содержит множество свойств и методов, которые позволяет получить более полную информацию об ответе сервера, а так же объект содержит Promise методы. Если функция beforeSend возвращает false , то AJAX запрос будет отменен. Начиная с версии jQuery 1.5 функция beforeSend будет вызываться независимо от типа запроса.

cache (по умолчанию: true , для dataType "script" и "jsonp" false ).

Тип: Boolean .
Если задано значение false , то это заставит запрашиваемые страницы не кэшироваться браузером. Обратите внимание, что значение false будет правильно работать только с HEAD и GET запросами.

complete .

Тип: Function (jqXHR jqXHR , String textStatus ).
Функция, которая вызывается, когда запрос заканчивается (функция выполняется после AJAX событий "success" или "error" ). В функцию передаются два параметра: jqXHR (в jQuery 1.4.х объект XMLHTTPRequest ) и строка соответствующая статусу запроса ("success" , "notmodified" , "nocontent" , "error" , "timeout" , "abort" , или "parsererror" ). Начиная с версии jQuery 1.5 параметр complete может принимать массив из функций, которые будут вызываться по очереди.

contents .

Тип: PlainObject .
Объект состоящий из пар строка/регулярное выражение, определяющих, как jQuery будет обрабатывать (парсить) ответ в зависимости от типа содержимого. Добавлен в версии jQuery 1.5.

contentType (по умолчанию: "application/x-www-form-urlencoded; charset=UTF-8" ).

Тип: Boolean , или String .
Определяет тип содержимого, которое указывается в запросе при передаче данных на сервер. С версии с jQuery 1.6 допускается указать значение false , в этом случае jQuery не передает в заголовке поле Content-Type совсем.

context .

Тип: PlainObject .
При выполнении AJAX функций обратного вызова контекстом их выполнения является объект window . Параметр context позволяет настроить контекст исполнения функции таким образом, что $(this ) будет ссылаться на определенный DOM элемент, или объект. Например: $.ajax({ url : "test.html ", context : $(".myClass "), // новый контекст исполнения функции success : function (){ // если запрос успешен вызываем функцию $(this ).html("Всё ок "); // добавлем текстовое содержимое в элемент с классом.myClass } } );

converters

Значения по умолчанию:
{ "* text ": window.String, // любой тип в текст "text html ": true , // текст в html "text json ": jQuery.parseJSON, // текст в JSON "text xml ": jQuery.parseXML // текст в XML } Тип: PlainObject .
Объект, содержащий тип данных для конвертации и способ его преобразования. Значение каждого преобразователя является функцией, которая возвращает преобразованное значение ответа. Добавлен в версии jQuery 1.5.

crossDomain (по умолчанию: false для запросов внутри того же домена, true для кроссдоменных запросов).

Тип: Boolean .
Если вы хотите сделать кроссдоменный запрос находясь на том же домене (например jsonp-запрос), то установите этот параметр в true . Это позволит, к примеру, сделать перенаправление запроса на другой домен с вашего сервера. Добавлен в версии jQuery 1.5.

Тип: PlainObject , или String , или Array .
Данные, которые будут отправлены на сервер. Если они не является строкой, то преобразуются в строку запроса. Для GET запросов строка будет добавлена к URL. Для того, чтобы предотвратить автоматическую обработку вы можете воспользоваться параметром processData со значением false . Если данные передаются в составе объекта, то он должен состоять из пар ключ/значение. Если значение является массивом, то jQuery сериализует несколько значений с одним и тем же ключом (в зависимости от значения параметра traditional , который позволяет задействовать традиционный тип сериализации основанный на методе $.param).

dataFilter .

Тип: Function (String data , String type ) => Anything .
Функция вызывается после успешного выполнения AJAX запроса и позволяет обработать "сырые" данные, полученные из ответа сервера. Возврат данных должен происходить сразу после их обработки. Функция принимает два аргумента: data - данные полученные от сервера в виде строки и type - тип этих данных (значение параметра dataType ).

dataType (по умолчанию: xml , json , script , или html ).

Тип: String .
Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML тип MIME приведет к получению XML , с версии jQuery 1.4 json будет давать объект JavaScript , script будет выполнять скрипт, а все остальное будет возвращено в виде строки).


Основные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ):

• "xml" - возвращает XML документ, который может быть обработан с помощью jQuery.
• "html" - возвращает HTML как обычный текст, теги будут обработаны и выполнены после вставки в объектную модель документа (DOM ).
• "script" - расценивает ответ как JavaScript и возвращает его как обычный текст. Отключает кэширование с помощью добавления параметра к строке запроса _= , даже если парамета cache имеет значение true . Это превратит метод POST в GET для кроссдоменных запросов.
• "json" - расценивает ответ как JSON и возвращает объект JavaScript . Кроссдоменные "json" запросы преобразуются в "jsonp" , если в параметрах запроса не указано jsonp : false . Данные JSON парсятся в строгом порядке и должны соответствовать общепринятому формату , любой некорректный JSON отвергается и выдается ошибка. С версии jQuery 1.9, пустой ответ не принимается, сервер должен вернуть в качестве ответа NULL , или {} .
• "jsonp" - загружает данные в формате JSON , используя при этом формат загрузки JSONP . Добавляет дополнительный параметр "?callback=? " в конец URL адреса для указания имени функции обработчика. Отключает кэширование путем добавления параметра _= к URL адресу,даже если парамета cache имеет значение true .
• "text" - обычная текстовая строка.
• несколько значений - значения разделяются пробелом. Начиная с версии 1.5, jQuery может преобразовать тип данных, который получен в Content-Type заголовка, в тип данных, который вам требуется. Например, если вы хотите, чтобы текстовый ответ был расценен как XML, используйте "text XML" для этого типа данных. Вы также можете сделать JSONP запрос, получить его в виде текста и интерпретировать его в формате XML : "jsonp text XML" . Следующая строка позволит сделать тоже самое: "jsonp XML" , jQuery будет пытаться конвертировать из JSONP в XML , после неудачной попытки попытается преобразовать JSONP в текст, а затем из текста уже в XML .

• Тип: Function (jqXHR jqXHR , String textStatus , String errorThrown ).
  Функция обратного вызова, которая вызывается если AJAX запрос не был выполнен. Функция получает три аргумента:

  • jqXHR - объект jqXHR (в jQuery 1.4.х, объект XMLHttpRequest ).
  • textStatus - строка, описывающую тип ошибки, которая произошла. Возможные значения (кроме null ) не "timeout" , "error" , "abort" и "parsererror" .
  • errorThrown - дополнительный объект исключения, если произошло. При возникновении ошибки HTTP аргумент получает текстовую часть состояния, например, "Not Found" , или "Internal Server Error" .
  Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь. Обратите внимание, что этот обработчик не вызывается для кроссдоменных скриптов и запросов JSONP .

• global (по умолчанию: true ).

  Тип: Boolean .
  Логический параметр, который определяет допускается ли вызвать глобальные обработчики событий AJAX для этого запроса. Значением по умолчанию является true . Если Вам необходимо предотвратить вызов глобальных обработчиков событий, таких как.ajaxStart() , или.ajaxStop() , то используйте значение false .

  headers (по умолчанию: { } ).

  Тип: PlainObject .
  Объект, который содержит пары ключ/значение дополнительных заголовков запроса, предназначенные для отправки вместе с запросом с использованием объекта XMLHttpRequest . Обращаю Ваше внимание, что заголовок X-Requested-With: XMLHttpRequest добавляется всегда, но значение XMLHttpRequest по умоланию допускается изменить с использованием этого параметра. Значения headers также могут быть переопределены параметром beforeSend . Добавлен в версии jQuery 1.5.

  ifModified (по умолчанию: false ).

  Тип: Boolean .
  По умолчанию значение false , игнорирует поля заголовка HTTP запроса, а при значении true AJAX запрос переводится в статус успешно (success ), только в том случае, если ответ от сервера изменился с момента последнего запроса. Проверка производится путем проверки поля заголовка Last-Modified . Начиная с версии jQuery 1.4 , помимо заголовка Last-Modified производится проверка и "etag" (entity tag ) - это закрытый идентификатор, присвоенный веб-сервером на определенную версию ресурса, найденного на URL. Если содержание ресурса для этого адреса меняется на новое, назначается и новый etag.

  isLocal (по умолчанию: зависит от текущего местоположения).

  Тип: Boolean .
  Используйте значение true для определения текущего окружения как "локального" (например, file:///url), даже если jQuery не распознает его таким по умоланию. Следующие протоколы в настоящее время признаются как локальные: file , *-extension и widget . Если Вам необходимо изменить параметр isLocal , то рекомендуется сделать это один раз при помощи функции $.ajaxSetup() . Добавлен в версии jQuery 1.5.1.

  Тип: Boolean , или String .
  Переопределяет имя функции обратного вызова в JSONP запросе. Это значение будет использоваться вместо "callback " ("http://domain.ru/test.php?callback=?" ) в составе части строки запроса в URL адресе. Например, значение { jsonp : "onLoad "} передастся на сервер в виде следующей строки запроса "http://domain/test.php?onLoad=?" .
  Начиная с версии jQuery 1.5 при установке значения параметра jsonp в значение false предотвращает добавление строки "?callback " к URL адресу, или попытки использовать "=? " для преобразования ответа. В этом случае Вы дополнительно должны указать значение параметра jsonpCallback , например: { jsonp : false , jsonpCallback : "callbackName " } По соображениям безопасности, если Вы не доверяете цели ваших AJAX запросов, то рекомендуется установить значение параметра jsonp в значение false .

  jsonpCallback .

  Тип: String , или Function .
  Задает имя функции обратного вызова для JSONP запроса. Это значение будет использоваться вместо случайного имени, которое автоматически генерируется и присваивается библиотекой jQuery. Рекомендуется, чтобы jQuery самостоятелно генерировало уникальное имя, это позволит легче управлять запросами и обрабатывать возможные ошибки. В некоторых случаях установка собственного имени функции позволит улучшить браузерное кеширование GET запросов.
  Начиная с версии jQuery 1.5, вы можете в качестве значения параметра jsonpCallback указать функцию. В этом случае, в значение параметра jsonpCallback должно быть установлено возвращаемое значение этой функцией.

  method (по умолчанию: "GET" ).

  Тип: String .
  Метод HTTP , используемый для запроса (например, "POST" , "GET" , "PUT" ). Добавлен в версии jQuery 1.9.0.

  mimeType .

  Тип: String .
  MIME тип, который переопределяет MIME тип, указанынй в объекте XHR по умолчанию. Добавлен в версии jQuery 1.5.1.

  password .

  Тип: String .
  Пароль, который будет использован с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

  processData (по умолчанию: true ).

  Тип: Boolean .
  По умолчанию данные, передаваемые в параметр data в качестве объекта будут обработаны и преобразованы в строку запроса, подходящую для типа данных по умолчанию "application/x-www-form-urlencoded" . Если Вам необходимо отправить DOMDocument , или другие не обработанные данные, то установите значение этого параметра в false .

  scriptCharset .

  Тип: String .
  Устанавливает атрибут charset (кодировка символов) на HTML тег , используемый в запросе. Используется, когда кодировка на странице отличается от кодировки удаленного скрипта. Обратите внимание, что параметр scriptCharset применяется только в кроссдоменных запросах с параметром type со значением "GET" (по умолчанию) и параметром dataType со значением "jsonp" , или "script" .

  statusCode (по умолчанию: { } ).

  Тип: PlainObject .
  Объект числовых кодов HTTP и функции, которые будут вызываться, когда код ответа сервера имеет соотвествующее значение (определенный код HTTP ). Например, следующая функция будет вызвана, если от сервера получен код ответа 404 , или "Not found" (стандартный код ответа HTTP о том, что клиент был в состоянии общаться с сервером, но сервер не может найти данные согласно запросу.): $.ajax({ statusCode : { 404: function (){ // выполнить функцию если код ответа HTTP 404 alert("страница не найдена "); } , 403: function (){ // выполнить функцию если код ответа HTTP 403 alert("доступ запрещен "); } } } );

  success .

  Тип: Function (Anything data , String textStatus , jqXHR jqXHR ).
  Функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно. Функции передаются три аргумента:

  • data - данные возвращенные с сервера. Данные форматируюся в соответствии с параметрами dataType , или dataFilter , если они указаны
  • textStatus - строка описывающая статус запроса.
  • jqXHR - объект jqXHR (до версии jQuery 1.4.x объект XMLHttpRequest ).
  Начиная с версии jQuery 1.5 допускается передавать в качестве значения параметра массив функций, при этом каждая функция будет вызвана в свою очедерь.

• timeout .

  Тип: Number .
  Устанавливает в миллисекундах таймаут для запроса. Значение 0 означает, что таймаут не установлен. Обращаю Ваше внимание, что этот параметр переопределяет значение таймаута, установленного с помощью функции $.ajaxSetup() . Таймаут ожидания начинается в момент вызова метода $.ajax() .

  traditional .

  Тип: Boolean .
  Если вы планируете использовать традиционные параметры сериализации (подходит для использования в строке URL запроса или запроса AJAX ), то установите значение этого параметра в true .

  type (по умолчанию: "GET" ).

  Тип: String .
  Псевдоним (алиас) для параметра method . Вы должны использовать type , если вы используете версии jQuery до 1.9.0 .

  url (по умолчанию: текущая страница ).

  Тип: String .
  Строка, содержащая URL адрес, на который отправляется запрос.

  username .

  Тип: String .
  Имя пользователя, которое будет использовано с XMLHttpRequest в ответе на запрос проверки подлинности доступа HTTP .

  xhr (по умолчанию: ActiveXObject , когда доступен (Internet Explorer ), в других случаях XMLHttpRequest .

  Тип: Function() .
  Обратный вызов для создания объекта XMLHttpRequest . С помощью этого параметра Вы можете переопределить объект XMLHttpRequest , чтобы обеспечить свою собственную реализацию.

  xhrFields .

  Тип: PlainObject .
  Объект, содержащий пары имя_поля: значение_поля, которые будут установлены на объект XHR . Например, вы можете определить, должны ли создаваться кроссдоменные запросы с использованием таких идентификационных данных как cookie , авторизационные заголовки или TLS сертификаты: $.ajax({ url : "cross_domain_url ", // адрес, на который будет отправлен запрос xhrFields : { withCredentials: true // поддерживается в jQuery 1.5.1 + } } );

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

Для реализации технологии используется метод $.ajax или jQuery.ajax :

$.ajax(свойства) или $.ajax(url [, свойства])

Второй параметр был добавлен в версии 1.5 jQuery.

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

properties - свойства запроса.

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

В уроке мы используем несколько наиболее часто используемых параметров.

success (функция) - данная функция вызывается после успешного завершения запроса. Функция получает от 1 до 3 параметров (в зависимости от используемой версии библиотеки). Но первый параметр всегда содержит возвращаемые с сервера данные.

data (объект/строка) - пользовательские данные, которые передаются на запрашиваемую страницу.

dataType (строка) - возможные значения: xml, json, script или html. Описание типа данных, которые ожидаются в ответе сервера.

type (строка) - тип запроса. Возможные значения: GET или POST. По умолчанию: GET.

url (строка) - адрес URL для запроса.

Пример 1

Простая передача текста.

$.ajax({ url: "response.php?action=sample1", success: function(data) { $(".results").html(data); } });

Для ответа имеется элемент div .result .

Ждем ответа

Сервер просто возвращает строку:

Echo "Пример 1 - передача завершилась успешно";

Пример 2

Передаем пользовательские данные PHP скрипту.

$.ajax({ type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data){ $(".results").html(data); } });

Сервер возвращает строку со вставленными в нее переданными данными:

Echo "Пример 2 - передача завершилась успешно. Параметры: name = " . $_POST["name"] . ", nickname= " . $_POST["nickname"];

Пример 3

Передача и выполнение кода JavaScript

$.ajax({ dataType: "script", url: "response.php?action=sample3", })

Сервер выполняет код:

Echo "$(".results").html("Пример 3 - Выполнение JavaScript");";

Пример 4

Используем XML. Пример можно использовать для работы с внешними XML, например, RSS фидом.

$.ajax({ dataType: "xml", url: "response.php?action=sample4", success: function(xmldata){ $(".results").html(""); $(xmldata).find("item").each(function(){ $(" ").html($(this).text()).appendTo(".results"); }); } });

Сервер должен возвращать XML код:

Header ("Content-Type: application/xml; charset=UTF-8"); echo