LOGO AJAX учебник
Ajax JQuery Учебник
jQuery имеет ряд функций, позволяющих обмениваться данными с сервером без перезагрузки страницы (технология ajax).

AJAX функции разобраны для JQuery 1.5+

http://jquery.page2page.ru AJAX

$.ajax(url,[settings]):jqXHR

Осуществляет запрос к серверу без перезагрузки страницы.
Это низкоуровневый метод, обладающий большим количеством настроек.
Он лежит в основе работы всех остальных методов ajax.

url - адрес запроса.

settings - в этом параметре можно задать настройки для данного запроса.

Задается с помощью объекта в формате
{имя:значение, имя:значение...}
Ни одна из настроек не является обязательной.

Установить настройки по умолчанию можно с помощью метода $.ajaxSetup()

$.ajax основные параметры

url:string

Определяет адрес, на который будет отправлен запрос.

type:string

Определяет тип выполняемого запроса GET или POST.

success(data, textStatus, jqXHR):function

Функция, которая будет вызвана в случае удачного завершения запроса к серверу.

Ей будут переданы три параметра: данные, присланные сервером и уже прошедшие предварительную обработку (которая отлична для разных dataType).

timeout:integer

Время ожидания ответа от сервера. Задается в в миллисекундах.

Если это время будет превышено, запрос будет завершен с ошибкой и произойдет событие error , которое будет иметь статус timeout.

async:boolean(true)

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

Если вам понадобиться синхронное выполнение запроса, то установите параметр в false.

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

Сделаем синхронный запрос к серверу. Пока запрос будет выполняться, страница не будет реагировать на действия пользователя:
// присланные от сервера данные, запишем в переменную html
var html = $.ajax({
  url: "some.php",
  async: false
 }).responseText;

beforeSend(jqXHR, settings):function

Функция, которая будет вызвана непосредственно перед отправкой ajax-запроса на сервер.
Такая функция может быть полезна для модификации jqXHR-объекта.

Вторым аргументом передаются настройки запроса.

beforeSend относится к ajax-событиям. Поэтому если указанная в нем функция вернет false, ajax-запрос будет отменен.
$.ajax({
	url: "some.php",
	beforeSend: function(jqXHR, settings) {
		// что-то делаем ...
	}
	success: function(data){
		alert( "Прибыли данные: " + data );
  	}
});

complete(jqXHR, textStatus):function

Функция, которая будет вызвана после завершения ajax-запроса

Происходит в случае любого завершения запроса.

Вызывается позднее функций-обработчиков успешного success или аварийного error завершения запроса.

textStatus - статус выполнения запроса:
строковое значение: success, notmodified, error, timeout, abort, parsererror
$.ajax({
	url: 'ajax/test.html',
	complete: function(jqXHR, textStatus) {
		if (textStatus == 'success') {
			alert('Успешно.');
		}
		if (textStatus == 'error') {
			alert('Ошибка.');
		}
	}
});

context:object

Позволяет указать объект который будет передаваться в переменную $(this), для всех обработчиков, связанных с выполнением текущего запроса.

По умолчанию, в context храниться объект с настройками текущего ajax-запроса.

В качестве контекста можно задать DOM-элемент, который должен каким-либо образом сигнализировать о завершении запроса:
$.ajax({ url: "test.html", context: document.body, success: function(){
  // в данном случае this будет равен document.body
  $(this).addClass("done");
}});

data:object,string

Данные, которые будут отправлены на сервер.

Если они заданы не строчным значением, то будут предварительно преобразованы в urlencoded строку.

В случае запроса методом GET, строка с данными добавляется в конец url.

Если данные задаются с помощью объекта, то он должен соответствовать формату:
{fName1:value1, fName2:value2, ...}
$.ajax({
	type: "POST",
	url: "some.php",
	// передача в качестве объекта
	// поля будут закодированые через encodeURIComponent автоматически
	data: { 
		name: "Вася", 
		lastname: "Пупкин" 
	},
	success: function(msg){
		alert( "Прибыли данные: " + msg );
	}
});
Пример 2
$.ajax({
	type: "POST",
	url: "jq_post1.php",
	// передача в качестве строки
	// кодирование выполняется "вручную"
	data: 'name=' + encodeURIComponent("Вася") + '&lastname='+ encodeURIComponent("Пупкин"),
	success: function(data){
		$('div').html(data);
	}
});
Откройте пример в новом окне и посмотрите исходный код

 Скачать ПРИМЕР

dataType:string

Тип данных, в котором ожидается получить ответ от сервера.
Если он не задан, jQuery попытается определить его автоматически с помощью полученного от сервера MIME.

Возможные значения этого параметра:
xml — полученный xml-документ будет доступен в текстовом виде. С ним можно работать стандартными средствами jQuery (также как и с документом html).
html — полученный html будет доступен в текстовом виде. Если он содержит скрипты в тегах <script>, то они будут автоматически выполнены, только когда html-текст будет помещен в DOM.
script — полученные данные будут исполнены как javascript. Переменные, которые обычно содержат ответ от сервера будут содержать объект jqXHR.
json — полученные данные являются JSON строкой. Jquery декодирует JSON-строку в объект.
text — полученные данные окажутся доступными в виде обычного текста, без предварительной обработки.

Пример с получением JSON
// http://javascript.ru/forum/jquery/16938-foreach-json-obekta.html
function forEach(data, callback){
  for(var key in data){
	if(data.hasOwnProperty(key)){
	  callback(key, data[key]);
	}
  }
}

$.ajax({
	url: "jq_json.php",
	dataType: 'json',
	success: function(data){
		var str = [];
		forEach(data,function(key,value) {
			str.push('<b>' + key + '</b> = ' + value);
		});
		$('div').html( str.join('<br>') );
	}
});
jq_json.php
<?php

$z['object_or_array'] = "string value";
$z['empty'] = false;
$z['parse_time_nanoseconds'] = 19608;
$z['validate'] = true;
$z['size'] = 1;

echo json_encode($z);
Откройте пример в новом окне и посмотрите исходный код

 Скачать ПРИМЕР

Вспомогательные функции

$.param(obj):string

Преобразует объект, массив или массив объектов в строку urlencoded, которая соответствует формату передачи данных через url.

Продемонстрируем преобразование на простом примере:
var myObject = {
  one: 1, 
  two: 2, 
  three: 3,
  vasia: 'Вася пупкин'
};
var recursiveEncoded = $.param(myObject);
 
alert(recursiveEncoded);

// one=1&two=2&three=3&vasia=%D0%92%D0%B0%D1%81%D1%8F+%D0%BF%D1%83%D0%BF%D0%BA%D0%B8%D0%BD

//
Выведем на экран результат довольно сложного преобразования:
var myObject = {
  a: {
    one: 1, 
    two: 2, 
    three: 3
  }, 
  b: [1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
 
alert(recursiveEncoded);
alert(recursiveDecoded);
В результате, на экране появятся два сообщения:
a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

.serialize():string

Возвращает строку, с именами и значениями выбранных элементов формы.
Эта строка будет иметь формат параметров url-запроса.

Продемонстрируем работу функции на простом примере:
<form>
  <input type="text" name="a" value="1" id="a" />
  <textarea name="b" rows="8" cols="40">2</textarea>
</form>
 
<script>
  var s = $('form').serialize();
  alert(s);
  // В результате, переменной s будет присвоено значение
  // a=1&b=2
</script>
Элементы формы, отвечающие за загрузку файлов, а так же кнопки отправки, не будут присутствовать в результате, возвращенном функцией.

.serializeArray():array

Возвращает массив объектов, содержащий данные элементов формы.

Возвращенный массив будет иметь следующий формат:
[{name:"name1", value:"val1"}, {name:"name2", value:"val2"},...] 
Это соответствуют формату JSON.

Продемонстрируем работу функции на простом примере:
<form>
  <input type="text" name="a" value="1" id="a" />
  <textarea name="b" rows="8" cols="40">2</textarea>
</form>
 
<script>
  var s = $('form').serializeArray();
  alert(s);
</script>
В результате, переменной s будет присвоено значение
[{name:"a", value:"1"}, {name:"b", value:"2"}]
Элементы формы, отвечающие за загрузку файлов, а так же кнопки отправки, не будут присутствовать в результате, возвращенном функцией.

Основные функции

$.get(url,[data],[callback],[dataType])

url - url-адрес, по которому будет отправлен запрос.
data - данные, которые будут отправлены на сервер.
Они должны быть представлены в объектом, в формате:
{fName1:value1, fName2:value2, ...}
callback(data, textStatus, jqXHR) - пользовательская функция, которая будет вызвана после ответа сервера.
dataType - ожидаемый тип данных, которые пришлет сервер в ответ на запрос.

Пример
<button>SEND</button><hr>
param1 <input type="text" name="param1" value="param1" /><br>
param2 <input type="text" name="param2" value="2"/>
<div style="border:1px solid red; padding: 5px;"></div>
<script type="text/javascript">
$('button').click(function() {
	$.get(
		"jq_post1.php",
		{
			param1: $('input[name=param1]').val(),
			param2: $('input[name=param2]').val()
		},
		function(data) {
			$('div').html(data);
		}
	);
	return false;
});
</script>
Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_jq_get2.zip

$.post(url,[data],[callback],[dataType])

Осуществляет запрос к серверу методом POST, без перезагрузки страницы.

Пример
<button>SEND</button><hr>
param1 <input type="text" name="param1" value="param1" /><br>
param2 <input type="text" name="param2" value="2"/>
<div style="border:1px solid red; padding: 5px;"></div>
<script type="text/javascript">
$('button').click(function() {
	$.post(
		"jq_post1.php",
		{
			param1: $('input[name=param1]').val(),
			param2: $('input[name=param2]').val()
		},
		function(data) {
			$('div').html(data);
		}
	);
	return false;
});
</script>
Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_jq_post2.zip

Пример с одновременной передачей GET и POST данных
<button>SEND</button><hr>
g_param1 <input type="text" name="g_param1" value="param1" /><br>
g_param1 <input type="text" name="g_param2" value="2"/><br>
p_param1 <input type="text" name="p_param1" value="param1" /><br>
p_param1 <input type="text" name="p_param2" value="2"/>
<div style="border:1px solid red; padding: 5px;"></div>
<script type="text/javascript">
$('button').click(function() {
	var getp = {};
	// через цикл each записываем поля объекта getp
	$('input[name=g_param1],input[name=g_param2]').each(function(){
		getp[$(this).attr('name')] = $(this).val();
	});
	
	$.post(
		// c помощью функции $.param формируем GET строку
		"jq_post1.php?" + $.param(getp),
		{
			p_param1: $('input[name=p_param1]').val(),
			p_param2: $('input[name=p_param2]').val()
		},
		function(data) {
			$('div').html(data);
		}
	);
	return false;
});
</script>
Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_jq_getpost.zip

.load(url,[data],[callback],[dataType])

Осуществляет запрос к серверу без перезагрузки страницы.
Полученные от сервера данные будут автоматически помещены внутрь выбранных элементов.

.load() является наиболее простым средством для подгрузки и вставки недостающего содержимого с сервера.

Он делает ajax-запрос к серверу и вставляет полученные данные в элементы страницы, к которым применялся метод:
// поместим содержимое страницы <tt>http://hostname.ru/ajax/test.html</tt>
// внутрь элемента с id = result
$("#result").load("ajax/test.html");
Организуем ajax-запрос с передачей параметров
$("#result").load(
	"jq_post1.php",
	{
		param1: $('input[name=param1]').val(),
		param2: $('input[name=param2]').val()
	}
);
Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_jq_load.zip

$.getJSON(url,[data],[callback])

Производит запрос JSON-данных у сервера, методом GET, без перезагрузки страницы.

$.getJSON() является сокращенным вариантом функции $.ajax(), вызванной со следующими параметрами:
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});
Пример
function forEach(data, callback){
  for(var key in data){
	if(data.hasOwnProperty(key)){
	  callback(key, data[key]);
	}
  }
}

$.getJSON(
	"jq_json.php",
	function(data){
		var str = [];
		forEach(data,function(key,value) {
			str.push('<b>' + key + '</b> = ' + value);
		});
		$('div').html( str.join('<br>') );
	}
);
Откройте пример в новом окне и посмотрите исходный код

 Скачать ajax_jq_json2.zip

$.getScript(url, [success(data, textStatus)])

Делает запрос к серверу без перезагрузки страницы, с запросом javascript файла.

При получении запрошенного файла, код внутри него будет автоматически выполнен.

Загрузим файл и выведем сообщение, после его удачного выполнения:
$.getScript("test.js", function(){
   alert("Скрипт выполнен.");
});