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

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

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

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

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

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

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

Примеры использования низкоуровневых запросов Ajax в разработке элементов веб-страниц. Метод $.ajaxSetup()

Примеры использования низкоуровневых запросов Ajax

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

Альтернатива обработчика success в получении данных с сервера. Метод done()

В предыдущем примере мы использовали для получения данных с сервера опцию success, которая вызывала функцию обратного вызова, а теперь рассмотрим пример, когда в качестве функции обратного вызова, будет использоваться метод done(), обрабатывающий ответ сервера.

Код скрипта будет такой:


$.ajax({
url:$("#form").attr("action"),
data:formData,
type:"POST",
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

},
error: function(){
$("#main").text("Ошибка в передаче данных")
},
statusCode:{
404:function(){
$("#main").html("Страница не найдена");
alert("Страница не найдена")
}
}
}).done(function(data){
$("#main").html(data);
alert("Данные с сервера получены "+data)
});

Как видите Ajax запрос у нас представлен в несколько усеченном виде, чем в предыдущем примере, в котором показывалось максимально возможное колличество параметров $.ajax(). Обработчик ответа сервера done() выведен за рамки метода $.ajax().

Код серверного файла login1.php остается тем же.


$(document).ready(function(){

$("#but1").click(function(event){
event.preventDefault();
var formData = $("#form").serialize();
$.ajax({
url:$("#form").attr("action"),
data:formData,
type:"POST",
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

},
error: function(){
$("#main").text("Ошибка в передаче данных")
},
statusCode:{
404:function(){
$("#main").html("Страница не найдена");
alert("Страница не найдена")
}
}
}).done(function(data){
$("#main").html(data);
alert("Данные с сервера получены "+data)
});
alert("Данные загружены")
})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример использования низкоуровневого запроса Ajax. Альтернатива обработчика success</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(){

$("#but1").click(function(event){
event.preventDefault();
var formData = $("#form").serialize();
$.ajax({
url:$("#form").attr("action"),
data:formData,
type:"POST",
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

},
error: function(){
$("#main").text("Ошибка в передаче данных")
},
statusCode:{
404:function(){
$("#main").html("Страница не найдена");
alert("Страница не найдена")
}
}
}).done(function(data){
$("#main").html(data);
alert("Данные с сервера получены "+data)
});
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>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="but1" type="button" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>

Метод $.ajaxSetup(). Получение данных в формате JSON

С помощью метода $.ajaxSetup мы можем установить настройки по умолчанию для будущих AJAX запросов.

Синтаксис метода:

jQuery.ajaxSetup (опции)

Где:

  1. опции - набор пар ключ/значение, которые настраивают запрос Ajax по умолчанию. Все варианты не являются обязательными.

Опции могут в себя включать следующие параметры:

  1. async - по умолчанию все запросы отсылаются асинхронно (т.е. значение данного параметра по умолчанию равно true). Если Вы хотите, чтобы Ваш запрос был отослан синхронно установите значение данного параметра равным false.
  2. beforeSend(jqXHR,настройки) - функция обратного вызова, код которой будет выполнен перед тем, как запрос будет отправлен на сервер. Если данная функция вернет false запрос не будет отправлен.
  3. complete(jqXHR,статус) - функция, код которой будет выполнен после того, как запрос будет выполнен (вызывается после выполнения функций success и error).
  4. contentType - указывает тип содержимого, которое будет передано на сервер. Значение по умолчанию "application/x-www-form-urlencoded" (подходит в большинстве случаев).
  5. context - позволяет явно установить значение "this" для всех функций обратного вызова.
  6. data - данные, которые будут переданы на сервер.
  7. dataType - ожидаемый для принятия от сервера тип данных.
  8. error(jqXHR,статус,ошибка) - функция, код которой будет выполнен если во время исполнения запроса произойдет ошибка.
  9. jsonp - строка переопределяющая имя функции обратного вызова в jsonp запросе.
  10. jsonpCallback - устанавливает имя функции обратного вызова для jsonp запроса.
  11. password - устанавливает пароль, который будет использоваться для HTTP аутентификации.
  12. processData - логическое значение устанавливающее должны ли данные передающиеся с запросом преобразовываться в строку или нет. Значение по умолчанию true.
  13. scriptCharset - устанавливает кодировку запроса.
  14. success(результат,статус,jqXHR) - функция, код которой будет выполнен если запрос будет завершен успешно. Параметр результат содержит результат полученный от сервера.
  15. type - устанавливает тип запроса (GET или POST). Значение по умолчанию GET.
  16. url - строка указывающая URL, на который будет отправлен запрос.
  17. xhr - функция обратного вызова для создания объекта XMLHttpRequest.

Фактически мы получили теже опции, которые используются при Ajax-запросе $.ajax().

Если мы настроем $ajax.Setup() так как показано ниже:

$.ajaxSetup({
       url:$("#form").attr("action"),
      data: formData,
beforeSend: function(){
	  $("#img").css("display","block")
		  },
  complete: function(){
	  $("#img").css("display","none")			   
  }		    
});

Ajax запрос к серверной странице будет выглядеть следующим образом:


$.ajax({
dataType:"json",
success: function(data){
var items = [];
$.each(data,function(key,val){
items.push( "<li>"+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );

}

});

Здесь мы получим с сервера ответ в виде json строки, которую преобразуем в массив и перебираем все находящиеся там элементы с помощью метода each(). Метод push() предоставляет нам возможность вставить новые элементы в конец массива. С помощью метода join() мы опять объединяем все элементы массива в одну строку и выводим это в виде ответа сервера на страницу с формой.

Протестируем наш скрипт:


$(document).ready(function(){

$("#form").submit(function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajaxSetup({
url:$("#form").attr("action"),
data: formData,
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")
}
});
$.ajax({
dataType:"json",
success: function(data){
var items = [];
$.each(data,function(key,val){
items.push( "<li>"+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );

}

});
alert("Данные загружены");

})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример использования низкоуровневого запроса Ajax. Метод $.ajaxSetup(). Передача данных в формате JSON</title>
<style type="text/css">
ul{list-style-type:none}
#img
{
display:none;
position:absolute;
top:200px;
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(){

$("#form").submit(function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajaxSetup({
url:$("#form").attr("action"),
data: formData,
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
});
$.ajax({
dataType:"json",
success: function(data){
var items = [];
$.each(data,function(key,val){
items.push( "<li>"+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );

}

});
alert("Данные загружены");

})

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

Код серверного файла json3.php можно посмотреть здесь