В библиотеке jQuery есть несколько методов для работы с ajax: jQuery.post, $.get, $.getJSON, $.ajax. В конечном счете, все они - более удобная надстройка над $.ajax. Объясню на простом ajax примере: 

Отправим на страницу index.php данные с формы. После того, как данные отправлены, выведем сообщение. В случае ошибки также сообщим об этом пользователю.

Сначала методом $.post

var data = $('#form').serialize(); 
$.post('index.php',data,function(data,status){
	if( status=='success' ){
		alert('Данные успешно отправлены!')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

Как мы видим, это очень простой пример ajax запроса. Сначала сериализуем данные из формы в строку. Метод serialize() вернет строчку вида &name1=value1&name2=value2. Но метод post, помимо такой нотации, может принимать на вход данные в виде объекта. К примеру, отправим логин и пароль на проверку

$.post('index.php',{login:'leroy',password:'password'},function(data,status){
	if( status=='success' ){
		alert('Данные успешно отправлены!')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

Все предельно просто. Отмечу лишь следующее: так как http протокол текстовый, то данные все равно приводятся к виду &login=leroy&password=password. Если ваша форма отправляет данные get методом, то и нам нужно воспользоваться get методом jQuery.

var data = $('#form').serialize(); 
$.get('index.php?'+data,function(recdata,status){
	if( status=='succes' ){
		alert('Данные успешно отправлены!')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

Сюда разумеется объект подавать нельзя, так как мы просто конкатенируем две строки. Странный параметр recdata - это данные, которые вернул сервер. Это может быть что угодно. Как json и xml, так и обычный текст или HTML. К примеру, ответ мы получили в виде json. Чтобы им воспользоваться, надо написать нехитрую конструкцию с использованием функции eval. Дополним пример авторизации по ajax:

$.post ('index.php',{login:'leroy',password:'password'},function(data,status){
	if( status=='success' ){
		eval('var obj='+data);
		if(obj.auth==true)
			alert('Вы успешно прошли авторизацию!')
		else
			alert('Логин либо пароль не верны')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

На сервере для данного примера должен быть примерно такой php код

<?php
	if($_POST['login']=='leroy' and $_POST['password']=='password'){
		$auth = true;
		setcookie('auth',md5($password.$login),time()+3600,'/');
	}else $auth = false;
	die( json_encode(array('auth'=>$auth)) );
?>

Нас тут выручает функция json_encode, которая конвертирует array в json. Еще вы можете заметить, что я записал в куки информацию, а именно хеш суммы логина и пароля. И эти Куки благополучно придут на браузер клиента после окончания ajax запроса, то есть точно так же как и при обычном post запросе, через форму. Дальше, если мы перезагрузим страницу после такой ajax авторизации, то где-то в php коде мы можем проверить пользователя на авторизованность

if( isset($_COOKIE['auth']) and $_COOKIE['auth']==md5('leroypassword') )
echo 'Сайт приветствует тебя';
else{
	echo ''; // выводим форму авторизации
	exit();
}

Чтобы не заморачиваться с eval, в jQuery есть метод getJSON. Он фактически идентичен $.post, за исключением того, что сервер должен ответить валидным json. Предыдущий пример будет выглядеть так

$.getJSON('index.php',{login:'leroy',password:'password'},function(data,status){
	if( status=='success' ){
		if(data.auth==true)
			alert('Вы успешно прошли авторизацию!')
		else
			alert('Логин либо пароль не верны')
	}else{
		alert('В процессе отправки произошла ошибка :(')
	}
})

Как я уже сказал выше, все эти методы являются надстройками над $.ajax. Метод ajax более настраиваемый, чем остальные. Пройдемся по трем методам($.get,$.post,$.getJSON) и реализуем их через $.ajax. Запрос методом get

$.ajax({
   type: "GET",
   url: "test.php",
   dataType: "html"
 })

Метод post

$.ajax({
   type: "POST",
   url: "some.php",
   data: "login=leroy&password=password",
   success: function(msg){
     alert( "Данные успешно сохранены: " + msg );
   }
 });

Запрос json объекта

$.ajax({
      url: "script.php",
      type: "POST",
      dataType: "json",
      success: function(msg){
         alert(msg.auth);
      },
      error: function(msg){
         alert(‘Ошибка’);
      }

   }
)

У этого метода есть множество других настроек. Одна из самых интересных это async. По умолчанию он равен true. Интересен он прежде всего тем, кто еще не научился мыслить асинхронно. Если его выставить в false, то данные будут отправляться в том же потоке, что и вызов метода. Что это значит на деле, поможет понять пример

var dataHtml = $.ajax({
      url: "script.php",
      type: "POST",
      data: ({id :1}),
      dataType: "html",
      async:false
   }
).responseText;
alert(dataHtml)

Если вы проделаете то же самое с async: true, то ничего хорошего в dataHtml не получите. Дело в том, что вызов функции alert произойдет сразу же после отправки запроса, не дождавшись его завершения. Но при async:false метод ajax задержит выполнение js до тех пор, пока запрос полностью не завершится. Это удобно тем, что не приходится возиться с callback’ми. Также может быть интересен параметр dataType. По умолчанию, метод ajax сам пытается разобраться, что же такое отправил нам сервер. Если вы укажите один из вариантов xml, json, script, или htm, то jQuery автоматически конвертирует полученные данные в объект верного типа. Как было в примере с json.

Помимо этих методов в jQuery есть $.load, $.getScript, $.getJSON. Как правило, их тоже относят к ajax, хотя это и не так. Они используют фреймы или тег <scripts> $.getJSON тут не просто так, дело в том, что когда мы запрашиваем внутреннюю страницу нашего домена, то он работает по технологии ajax. Однако стоит нам запросить json данные с чужого сервера, то jQuery выполняет его уже при помощи тега <scripts>. Именно поэтому, когда вы делаете кросс доменный запрос, надо в url указать, какую callback функцию должен вызвать скрипт по завершении. Подробнее об этом я описал в этой статье.

Вот и все, что я хотел написать про ajax на jquery 

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить

Комментарии   

+1
minor
# minor 19.05.2011 20:30
Хорошая статья спасибо автору.
+2
Денис
# Денис 02.08.2011 00:52
Хорошая статья, очень понравилось. За хтмл 5 (это ведь он в сайдбарах?) отдельное спасибо..)
+2
cdoe4food
# cdoe4food 10.10.2011 15:19
Спасибо за статью. Все отлично написано. Получил удовольствие от прочтения. Пишите еще.
0
alex
# alex 25.11.2011 16:37
спасибо
+1
konst
# konst 09.04.2012 12:24
Класные примеры. Только не рабочие.

Автор их пишет, наверное, в блокноте и там же проверяет. Для начала - success пишется с двумя s в конце. И с точки зрения грамматики английского языка, и с точки зрения синтаксиса jQuery правильно - success

Вопрос автору - зачем выкладывать заведомо нерабочие примеры? Чисто постебаться?
-1
Leroy
# Leroy 10.06.2012 18:26
спасибо, поправил!
+2
johnny
# johnny 21.06.2012 17:35
с jquery и ajax недавно познакомился, а потому потратил 2 дня долбясь головой об стену при написании скрипта. А всё потому, что не изучая азы сразу писал по примерам. Так вот - спасибо автору за async:false! Теперь всё как полагается работает.
+1
Leroy
# Leroy 21.06.2012 18:04
Пожалуйста!)
+2
Юрий
# Юрий 27.09.2012 17:44
getJSON передает параметры с помощью GET а не POST, т.е в PHP должно быть $_GET['login']
-1
Leroy
# Leroy 27.09.2012 17:49
Вы не правы,
$.post('index.php',{a:1},function(data){
alert(data);// json объект
},'json');
+1
Юрий
# Юрий 27.09.2012 19:16
http://api.jquery.com/jQuery.getJSON/

Description: Load JSON-encoded data from the server using a GET HTTP request.
-1
Leroy
# Leroy 27.09.2012 19:31
вы таки правы =) jQuery.getJSON!=jQuery.post(,,,'json')
+1
Антон
# Антон 30.11.2012 16:44
Хорошая статья!
+1
Leroy
# Leroy 30.11.2012 18:35
спасибо
0
Елена76
# Елена76 24.07.2014 05:10
да прикольно
0
sibroy
# sibroy 07.12.2014 17:18
Любопытно будет поробовать
0
Гвоздь
# Гвоздь 01.09.2015 10:09
Цитата:
var data = $('#form').serialize();
$.get('index.php?'+data,function(recdata,status){
if( status=='succes' ){
alert('Данные успешно отправлены!')
}else{
alert('В процессе отправки произошла ошибка :(')
}
})
Тут ошибка. Вместо "succes" надо "success".