ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Объект jqXHR

Объект jqXHR

В функции обратного вызова в методах get() и post() может использоваться объект jqXHR. По сути с ним так или иначе связаны все методы jQuery, которые предназначены для отправки ajax-запросов.

Данный объект представляет собой обертку над стандартным объектом javascript XMLHttpRequest. Для совместимости с XMLHttpRequest jqXHR предлагает нам следующие свойства и методы:

  1. readyState: возвращает состояние запроса. Имеет значения от 0 (запрос не отправлен) до 4 (запрос завершен);
  2. status: возвращает код статуса HTTP, который получает от сервера;
  3. statusText: возвращает статус запроса в виде текст;
  4. responseXML: возвращает ответ в виде XML;
  5. responseText: возвращает ответ в виде простого текста;
  6. setRequestHeader(name, value): устанавливает заголовок запроса name со значением value. Если подобный заголовок уже имеется, то его значение заменяется на value;
  7. getAllResponseHeaders(): возвращает все заголовки ответа;
  8. getResponseHeader(name): возвращает заголовок ответа name;
  9. abort(): прерывает запрос;

Но если для обработки ответа объект XMLHttpRequest предлагает нам обработать событие onreadystatechange, то для jqXHR определено сразу несколько методов, которые помогают обработать ответ:

  1. done(function(data, textStatus, jqXHR)): обрабатывает успешный ответ с сервера;
  2. fail(function(jqXHR, textStatus, errorThrown)): обрабатывает ответ от сервера, запрос к которому закончился ошибкой;
  3. always(function(data|jqXHR, textStatus, jqXHR|errorThrown)): обрабатывает как успешные ответы с сервера, так и сообщения с ошибкой;
  4. then(function(data, textStatus, jqXHR), function(jqXHR, textStatus, errorThrown)): включает функциональность методов done и fail, принимая соответственно две функции обработки ответа.

Вернемся к нашим тестовым файлам. Код с использованием объекта jqXHR будет таким:

$.post('test72.php', 
	       'x=8&y=12',		   
		   alert("Данные на сервер загружены")).done(function(data) {
                       $('#par1').html(data);
		               alert("Данные с сервера получены "+data)
    });

Здесь мы применили метод done(), который обрабатывает ответ сервера.

Подобным образом можно применить и другие методы. Метод fail(), обработает ответ сервера, запрос к которому закончился ошибкой.

Пример с применением метода fail() будет иметь следующий код:


$(document).ready(function(){
$("#but1").click(function(){
var jqxhr = $.post('test72.php',
'x=8&y=12',
alert("Данные на сервер загружены"));

jqxhr.done(function(data) {
$('#par1').html(data);
alert("Данные с сервера получены "+data)
});
jqxhr.fail(function(data) {
$('#par1').html("Ошибка в получении данных");
alert("Ошибка в получении данных ")
});
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Объект jqXHR</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
var jqxhr = $.post('test72.php',
'x=8&y=12',
alert("Данные на сервер загружены"));

jqxhr.done(function(data) {
$('#par1').html(data);
alert("Данные с сервера получены "+data)
});
jqxhr.fail(function(data) {
$('#par1').html("Ошибка в получении данных");
alert("Ошибка в получении данных ")
});
});
});
</script>
</head>
<body>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

Вернемся к форме регистрации пользователей. Для получения ответа сервера обратимся к одному из методов объекта jqXHR. Для нашегоь примера воспользуемся методом then(), который включает функциональность методов done и fail, принимая соответственно две функции обработки ответа.

Код скрипта будет следующим:

   var jqxhr = $.post("login1.php",
	                   formData,
                       alert("Данные на сервер загружены"));
  jqxhr.then(function(data){
			$('#main').html(data);
			alert("Данные с сервера получены "+data)						
			},
	        function(data) {
             $('#main').html("Ошибка в получении данных");
		      alert("Ошибка в получении данных ")
                          }
	    )

Как видите для обработки данных сервера и обработки ошибок используется одна и таже функция.

Протестируем скрипт.


$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = $(this).serialize();
var jqxhr = $.post("login1.php",
formData,alert("Данные на сервер загружены"));
jqxhr.then(function(data){
$('#main').html(data);
alert("Данные с сервера получены "+data)
},
function(data) {
$('#main').html("Ошибка в получении данных");
alert("Ошибка в получении данных ")
}
)
})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом post()</title>
<style type="text/css">
#img
{
display:none;
position:absolute;
top:140px;
left: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = $(this).serialize();
var jqxhr = $.post("login1.php",
formData,alert("Данные на сервер загружены"));
jqxhr.then(function(data){
$('#main').html(data);
alert("Данные с сервера получены "+data)
},
function(data) {
$('#main').html("Ошибка в получении данных");
alert("Ошибка в получении данных ")
}
)
})

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" action="login1.php" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>