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

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

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

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

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

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

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

Низкоуровневые AJAX запросы

Низкоуровневые AJAX запросы

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

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

Синтаксис запроса:

jQuery.ajax( url [, settings ] ) и jQuery.ajax( [settings ] )

Где:

  1. url - cтрока, содержащая адрес URL, к которому направляется запрос.
  2. settings - ассоциативный массив для конфигурации Ajax запроса. Все настройки не обязательные к заполнению (опциональны). Значения по умолчанию могут быть установлены при помощи метод $.ajaxSetup().

Пример:


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

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

success:function(data){
$("#main").html(data);
alert("Данные с сервера получены "+data)
}
})

Ниже приведен полный список всех настроек:

  1. url: адрес ресурса, к которому идет запрос. Тип данных: строка;
  2. В нашем случае это url:$("#form").attr("action"), где $("#form") - идентификатор формы, attr("action")- метод извлекающи атрибут формы action, содержащий url серверного сценария, например login1.php.

  3. async: указывает, является ли запрос асинхронным. Тип данных: булевое значение. По умолчанию имеет значение true. Если же значение равно false, то запрос передается как синхронный;
  4. cache: указывает, будет ли ответ кэшироваться веб-браузером. Тип данных: булевое значение. По умолчанию true. И false по умолчанию для запросов, у которых параметр dataType имеет значение 'script' или 'jsonp';
  5. context: элемент, представляющий контекст данных для функций обратного вызова. Например, context:document.body;
  6. type: указывает тип запроса. Как правило, 'GET' или 'POST'. Тип данных: строка. По умолчанию 'GET';
  7. dataType (значение по умолчанию: Общеиспользуемые типы (xml, json, script, или html)): Тип данных которые Вы ожидаете от сервера. Если не указан, то jQuery будет пытаться определить его на базе типа MIME ответа (тип xml MIME даст XML, в 1.4 json даст JavaScript объект, в 1.4 script будет выполнен как скрипт и все прочее будет возвращено как строка). Возможные типы (и результат передается в качестве первого аргумента в обработчик запроса success):
    • "xml": Возвращает XML документ, который может быть обработан при помощи jQuery.
    • "html": Возвращает HTML как простой текст; включенные тэги скриптов будет выполнены когда этот HTML будет вставлен в DOM.
    • "script": Вычисляет ответ как JavaScript и возвращает его как простой текст. Отключает кэширование запроса (путем добавление параметра _=[TIMESTAMP] к URL адресу) даже если значение параметра cache равно true. Важно: Это превратит POST в GET для for запросов к удаленным доменам.
    • "json": Вычисляет ответ как JSON и возвращает JavaScript объект. Кросс-доменный "json" запрос конвертируются в "jsonp" если в параметрах запроса не указано jsonp: false. Данные в формате JSON обрабатываются в строгом порядке; любой нарушения формата будет отклонено и будет выброшена ошибка синтаксического анализа. Начиная с jQuery 1.9, пустой запрос также будет отклонен; сервер должен вернуть ответ null или {}.
    • "jsonp": Загружает данные в JSON используя при помощи формата загрузки JSONP. Добавляет дополнительный параметр "?callback=?" в конец URL адреса для указания функция обработчика. Выключает кэширование путем добавления параметра "_=[TIMESTAMP]" к URL адресу, даже если значение параметра cache равно true.
    • "text": Строка с текстом.

    несколько, разделенных пробелом значений: начиная с jQuery 1.5, jQuery может преобразовать dataType от того что получен в поле заголовка Content-Type в то что Вам нужно. Например, если Вы хотите использовать текст ответа как XML, используйте значение "text xml" для параметра dataType. Вы также можете сделать JSONP запрос, если он получен в виде текста и интерпретируется jQuery как XML: "jsonp text xml". Точно так же, сокращенная строка, такая как "jsonp xml" сначала попытается преобразовать из JSONP в XML и если это невозможно, то преобразует из JSONP в текст и затем из текст в xml.

  8. data: данные, отправляемые вместе с запросом на сервер. Тип данных: строка или объект javascript. В нашем случае это переменная var formData = $("#form").serialize();
  9. timeout: время в миллисекундах ожидания ответа на запрос. Этот параметр переопределяет глобальный таймаут, устанавливаемый при помощи метода $.ajaxSetup(). Этот таймаут запускается в момент запуска метода $.ajax; если несколько других запросов в процессе работы и браузер не имеет сетевого подключения, то возможен запрос на таймаут, прежде чем он будет отправлен. В версии jQuery 1.4.x и ниже, объект XMLHttpRequest будет находиться в недопустимом состоянии если время ожидния будет превышено; обращение к любым методам объекта сгенерирует исключение. В Firefox 3.0+, script и JSONP запросы не могут быть отменены по таймауту; скрипт будет работать, даже если он прийдет после таймаута;
  10. global: указывает, можно ли вызывать глобальные события ajax. Тип данных: булевое значение. По умолчанию true, то есть вызов глобальных событий разрешен;
  11. isModified: позволяет проверять заголовок ответа Last-Modified. Тип данных: булевое значение. По умолчанию false, то есть данный заголовок не проверяется. Если же имеет значение true, заголовок проверяется. А данные запрашиваются, если с момента последнего запроса данных они были изменены. Если же данные не были изменены, то в обработчике функции success параметр data будет иметь значение undefined;
  12. password: пароль, необходимый, если при запросе требуется аутентификация. Тип данных: строка;
  13. username: имя пользователя или логин, необходимый, если при запросе требуется аутентификация. Тип данных: строка;
  14. dataFilter: функция фильтрации "сырых" данных. Она принимает два параметра: function(data, type). Параметр data представляет пришедшие от сервера данные, а type - тип данных. На выходе функция должна возвратить отфильтрованные данные;
  15. success: функция, вызываемая, если запрос завершится успехом. Она может принимать три параметра: function(data, textStatus, jqXHR). Параметр data представляет пришедшие от сервера данные. Параметр textStatus передает код статуса. Третий параметр представляет связанный с запросом объект jqXHR. Пример:
  16. success:function(data){
    		$("#main").html(data);
    		alert("Данные с сервера получены "+data)  
     }
    
  17. error: функция, которая вызывается, если код статуса сообщит об ошибке. Она может принимать три параметра: function(jqXHR, textStatus, errorThrown);
  18. complete: функция, которая вызывается после завершения запроса. Она может принимать два параметра: function(jqXHR, textStatus). Параметр textStatus сигнализирует нам о том, был ли успешным запрос или завершился с ошибкой. Пример:
  19.  complete: function(){
       $("#img").css("display","none")			   
      },
    
  20. beforeSend: функция, срабатывающая перед отправкой запроса. Она принимает два параметра: function(jqXHR, settings). Параметр settings содержит объект, хранящий некоторые дополнительные настройки запроса. Если эта функция возвращает false, то запрос отменяется. Пример:
  21.  beforeSend: function(){
       $("#img").css("display","block")
      },
    
  22. xhr: функция для создания объекта XMLHttpRequest.
  23. statusCode (значение по умолчанию: {}): объект с числовыми кодами HTTP кодов статусов и функции которые будут вызваны когда статус ответа имеет соотвествующее значение. Например, следующий alert будет вызван когда статус ответа будет 404:
  24. statusCode:{
      404:function(){
      $("#main").html("Страница не найдена");
      alert("Страница не найдена") 
     }
    
  25. method (значение по умолчанию: 'GET'): HTTP метод используемый в запросе (например "POST", "GET", "PUT" и т.д.).

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


$(document).ready(function(){

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

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

});
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом get()</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",
dataType:"html",
context:document.body,
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

},
error: function(){
$("#main").text("Ошибка в передаче данных")
},
statusCode:{
404:function(){
$("#main").html("Страница не найдена");
alert("Страница не найдена")
}
},
success: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>

Мы рассматривали этот пример ранее, при использовании методов $.get() и $.post(). Теперь тоже самое мы сделали с помощью низкоуровневого запроса $.ajax().

Код серверного файла login1.php:


<?php
// Устанавливаем соединение с базой данных
$db = new mysqli("localhost","root","root","test");
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
sleep(3);
if(!empty($_REQUEST['login'])&&!empty($_REQUEST['password'])){
$login=test_input($_REQUEST['login']);
$password=test_input(md5($_REQUEST['password']));
$result = $db->query("SELECT * FROM user_test WHERE login='$login'");
$myrow =$result->fetch_array();
if($_REQUEST['login']!= $myrow['login']){
echo "Авторизация прошла успешно, ваш логин: <strong>" .$_REQUEST['login']. "</strong>, ваш пароль: <strong>" .$_REQUEST['password']."</strong>";
$result = $db->query("INSERT INTO user_test(id, login, password, date) VALUES(NULL,'$login','$password', NOW())") or die("Ошибка регистрации");
//Удаляем записи находящиеся в БД более 41 минуты.
$db->query("DELETE FROM user_test WHERE UNIX_TIMESTAMP() - UNIX_TIMESTAMP(date) > 2500");
}else{

echo "Это имя <strong>".$_REQUEST['login']. "</strong> уже существует - вернитесь на форму регистрации и выберите другое имя";
}
}else{
exit( "Ошибка в передаче данных");
}
?>