JQuery Ajax с примерами

Как и обещал, продолжаю цикл статей по JQuery — прекрасному JavaScript фреймворку, с помощью которго можно делать всё!

В данной статье мы затронем такую тему, как AJAX с помощью JQuery (с примерами).

xmlHttpRequest

Вы знаете что такое xmlHttpRequest? XmlHttpRequest — это объект, позволяющий браузеру делать запросы к серверу без перезагрузки страницы. Да и это, собственно, понятно из названия: http request — запрос по http протоколу. А вот с xml интересней: несмотря на указание этого языка в названии, объект XHR (это сокращение от xmlHttpRequest) работает с данными произвольного формата, не только с XML. Собственно, технология Ajax и основана на этом компоненте. Более углублённо о нём можно почитать на сайте xmlhttprequest.ru, посмотреть примеры использования можно в статье о CURLe, но это нас сейчас мало интересует. Сейчас разберем Ajax с помощью JQuery.

JQuery AJAX

Как всегда — от простого к сложному:

$.ajax({
 url: '/ajax.php?act=jquery_test', //УРЛ, к которому мы обращаемся
 type: 'GET', //тип: может быть GET или POST (о нём чуть ниже)
 success: function(response){ //success - функция, которая вызывается, когда запрос прошёл успешно и данные (data) получены
 alert('Сервер вернул ответ: ' + response);
 }
});
 

Это самый простейший пример использования ajax в JQuery. Теперь посмотрим, как можно отдать сереверу данные методом POST:

$.ajax({
 url: '/ajax.php?act=ajax_jquery_post',
 type: 'POST',
 contentType: 'application/x-www-form-urlencoded', //Тип передаваемых данных
 data: 'text='+$('#text').val()+'&id=282&c=w',
 //а это, собственно, данные (произвольные)
 success: function(response){
 alert('Данные отправлены! Сервер вернул ответ: ' + response);
 }
});
 

Это был пример отправки данных на сервер с помощью JQuery AJAX. Теперь немного о других форматах:

$.ajax({
 url: 'ajax.php?act=ajax_jquery',
 type: 'POST',
 dataType: 'JSON', //форматы могут быть: JSON, XML, HTML, text и некоторые другие
 data: someData,
 success: function(response){
 //какие-нибудь действия
 }
});
 

Кроме того, что мы можем повесить обработчик события "успех" (success), мы также можем повесить обработку других событий:

• success вызывается, когда запрос завершился успешно. Ему передаются параметры: возвращаемые сервером данные, строка, содержащая код ответа сервера, и объект xmlHttpRequest.
• error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки
• complete вызывается, когда запрос завершился. Просто завершился, независимо от того, удачей или нет. Передаются: xmlHttpRequest и строка, указывающая код успеха или ошибки.
• dataFilter вызывается перед вызовом success. Ему передаются полученные от сервера данные. В ней мы можем произвести какую-либо работу с данными и должны вернуть их (return ...). Если есть эта функция, то в success попадает то, что мы возвращаем из dataFilter
• beforeSend вызывается, как это понятно из названия, до отправки запроса на сервер

Лично я, чаще всего пользуюсь success и error, и иногда complete, а остальные юзаю о-очень редко.
Теперь пример:

$.ajax({
 url: 'ajax.php?act=something',
 type: 'GET', //что-нибудь получим
 success: function(response, code){ //да, мы пропустили последний параметр — он нам не нужен
 if (code==200){
 alert('Сервер вернул: ' + response);
 }else{
 alert('Сервер вернул какой-то непонятный код ответа: ' + code);
 }
 },
 error: function(xhr, str){
 alert('Возникла ошибка: ' + xhr.responseCode);
 }
 complete: function(){ //а тут ничего из предложенных параметров не берем :)
 $('#something').hide(); //например, спрятали какую-то кнопочку, которая вызывала запрос
 }
});

Это уже пример посерьёзней, по профессиональней, так сказать — с обработкой ошибок.

jQuery.ajaxSetup()

Есть в JQuery такой замечательный метод - ajaxSetup. С его помощью можно глобально во всём скрипте задать все необходимые опции. Пример:

$(document).ready(function(){

 $.ajaxSetup({
 url: 'ajax.php',
 type: 'POST',
 success: function(data){
 $('#somefield').val(data);
 }
 error: function(){
 $('#somebutton').addClass('error');
 }
 });

 $('#somebutton1').click(function(){
 $.ajax({data: 'act=1'});
 });

 $('#some2').click(function(){
 $.ajax({data: 'act=2'});
 });
});
 

Опции $.ajax

А теперь, попрактиковавшись немного, расскажу теор.часть - про опции JQuery Ajax

• async (true или false). По умолчанию true. Включает или выключает асинхронные запросы (см. компонент xmlHttpRequest). Помните, что включив синхронные запросы, можете подвесить браузер!
• cache (true или false). Включает или выключает кеширование браузером
• contentType (строка). Тип содержания, передаваемого на сервер. При сабмите форм используйте application/x-www-form-urlencoded
• data (строка). Данные, отправляемые на сервер.
• dataType (строка). Тип ожидаемых от сервера данных. Если ничего не указано, JQuery попытается определить результат, основанный на MIME-типе ответа. Может принимать значения: xml, json, script, html.
• ifModified (true или false (по умолчанию)). Если установлено в true, то запрос будет успешным только тогда, когда ответ изменился с момента прошлого запроса (достигается путём проверки заголовка Last-Modified)
• timeout (в милисекундах). Значение, по прошествии которого, соединение с сервером будет обрываться (таймаут)
• type (строка: GET или POST). Тип запроса к серверу: GET или POST
• url (строка). Страница сервера, к которой будет сделан запрос.

Вот мы и разобрались с Ajax на JQuery. Ождайте следующую статью — в ней будет рассмотрено что-то вкусненькое на JQuery ;)