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

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

В прошлой статье мы поговорили о JQuery в общем — рассмотрели принцип его работы, были приведены простейшие примеры. В этой статье мы затронем такую тему, как 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 ;)

Предыдущая статья: JQuery для начинающих Следующая статья: Писать или не писать?