Это архивная статья. Блог закрыт.

← на главную

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

Статья написана очень давно — 03.08.2010

Как и обещал, продолжаю цикл статей по 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 и 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

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

Комментарии удалены

© koz1024 2010, 2019