Низкоуровневые запросы. Метод ajax

Рассмотренные ранее методы get, post, load очень просты в использовании и с лихвой покрывают большинство потребностей разработчиков. Однако иногда возникает необходимость иметь больший контроль над выполнением. И поэтому обращаются к методу ajax, который позволяет осуществлять запросы на более низком уровне. Другие же методы по сути используют метод ajax.

Например, используем метод ajax для загрузки разметки html в элемент на странице:

<button>Загрузить</button>
<div id="result"></div>
<script type="text/javascript">
$(function(){
	$('button').click(function(){
		$.ajax('ajax.php', {success: function(data){
				$('#result').html(data);
			}
		});
	});
});
</script>

Ресурс ajax.php на стороне сервера пусть возвращает некоторую разметку html в ответ.

В данном случае мы указываем два параметра: адрес запроса и параметр success, который принимает функцию, обрабатывающую ответ от сервера.

По сути то же самое мы могли бы сделать и с помощью метода load, и с помощью метода get. Но многообразие параметров метода ajax позволяет более детально настроить запрос.

На выходе метод ajax, как и другие методы возвращает объект jqXHR, связанный с текущем запросом.

Метод ajax может принимать следующие формы: ajax(url, options) и ajax(options). Параметр options представляет объект javascript, в котором мы указываем необходимые нам опции запроса в виде пар ключ-значение. Так, в вышеприведенном примере мы использовали опцию success. Далее приведены некоторые из опций, которые мы можем использовать в методе ajax:

• url: адрес ресурса, к которому идет запрос. Тип данных: строка

• async: указывает, является ли запрос асинхронным. Тип данных: булевое значение. По умолчанию имеет значение true. Если же значение равно false, то запрос передается как синхронный

• dataType: тип получаемых от сервера данных. Тип данных: строка.

  Может принимать следующие значения: html, xml, json, jsonp, text, script

• cache: указывает, будет ли ответ кэшироваться веб-браузером. Тип данных: булевое значение. По умолчанию true.

  И false по умолчанию для запросов, у которых параметр dataType имеет значение 'script' или 'jsonp'

• context: элемент, представляющий контекст данных для функций обратного вызова. Например:

  $.ajax({
  url: "ajax.php",
  context: document.body
  });

• type: указывает тип запроса. Как правило, 'GET' или 'POST'. Тип данных: строка. По умолчанию 'GET'

• data: данные, отправляемые вместе с запросом на сервер. Тип данных: строка или объект javascript

• timeout: время в миллисекундах ожидания ответа на запрос

• global: указывает, можно ли вызывать глобальные события ajax. Тип данных: булевое значение. По умолчанию true, то есть вызов глобальных событий разрешен

• isModified: позволяет проверять заголовок ответа Last-Modified. Тип данных: булевое значение. По умолчанию false, то есть данный заголовок не проверяется. Если же имеет значение true, заголовок проверяется. А данные запрашиваются, если с момента последнего запроса данных они были изменены. Если же данные не были изменены, то в обработчике функции success параметр data будет иметь значение undefined

• password: пароль, необходимый, если при запросе требуется аутентификация. Тип данных: строка

• username: имя пользователя или логин, необходимый, если при запросе требуется аутентификация. Тип данных: строка

• dataFilter: функция фильтрации "сырых" данных. Она принимает два параметра: function(data, type). Параметр data представляет пришедшие от сервера данные, а type - тип данных. На выходе функция должна возвратить отфильтрованные данные

• success: функция, вызываемая, если запрос завершится успехом. Она может принимать три параметра: function(data, textStatus, jqXHR). Параметр data представляет пришедшие от сервера данные. Параметр textStatus передает код статуса. Третий параметр представляет связанный с запросом объект jqXHR

• error: функция, которая вызывается, если код статуса сообщит об ошибке. Она может принимать три параметра: function(jqXHR, textStatus, errorThrown)

• complete: функция, которая вызывается после завершения запроса. Она может принимать два параметра: function(jqXHR, textStatus). Параметр textStatus сигнализирует нам о том, был ли успешным запрос или завершился с ошибкой.

• beforeSend: функция, срабатывающая перед отправкой запроса. Она принимает два параметра: function(jqXHR, settings). Параметр settings содержит объект, хранящий некоторые дополнительные настройки запроса. Если эта функция возвращает false, то запрос отменяется

• xhr: функция для создания объекта XMLHttpRequest

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

Сериализация данных формы и запросы POST

Выше мы уже посмотрели на отправку запросов GET, теперь посмотрим, как с помощью метода ajax мы можем отправлять POST-запросы.

На строне сервера пусть у нас будет простейшая обработка авторизационных данных:

<?php
	$login=$_POST['login'];
	$pass=$_POST['password'];
	if($login=="1111" && $pass=="2222"){
		echo "Авторизация прошла успешно";
	}
	else{
		echo "Неверно введен логин или пароль";
	}
?>

На веб-странице создадим форму и установим параметры для метода ajax:

<form action="ajax.php" id="loginForm">
	<input type="text" name="login" placeholder="Логин" /><br><br>
	<input type="text" name="password" placeholder="Пароль" /><br><br>
	<input type="submit" value="Войти" />
</form>
<div id="result"></div>
<script type="text/javascript">
$(function(){
	$("#loginForm").submit(function(event) {
		event.preventDefault();
		$.ajax({	
			url: $("#loginForm").attr('action'),
			data: $("#loginForm").serialize(),
			type: 'POST',
			success: function(data){
					$('#result').html(data);
			}
		});
	});
});
</script>