Библиотека jQuery, а точнее функция jQuery.ajax() входящая в ее состав дает разработчикам уникальную возможность создавать динамические веб-сайты. Функция предназначена для обмена данными с сервером, т.е. с ее помощью можно передать данные в файл, обработать их и вернуть обратно, поместив в заранее указанный блок при этом нет необходимости перезагружать веб-страницу.
Параметры функции $.ajax()
$.ajax(options);
Здесь options – это объект, содержащий передаваемые функции параметры, которые представлены ниже.
url – строка, URL-адрес запрашиваемого сценария.
type – метод запроса, POST или GET, по умолчанию используется GET;
cache – логическое значение указывает браузеру кэшировать (true) или не кэшировать (false) полученные данные.
data – объект, свойства которого служат параметрами запроса. При выполнении запроса GET параметры передаются в виде строки запроса, если запрос типа POST то параметры передаются в теле запроса.
data: {data1: "value1", data2: "value2", dataN: "valueN"}
- dataType – ключевое слово идентифицирует данные пришедшие с сервера. Ключевое слово указывает, каким образом будет обработан полученный ответ, прежде чем он будет передан функции обратного вызова. Допустимые значения:
- xml – ответ анализируется и обрабатывается как XML, в функцию обратного вызова передается дерево DOM;
- html – ответ передается функции обратного вызова без обработки, все сценарии находящиеся в блоках <script> выполняются;
- json – ответ обрабатывает как формат json, в функцию обратного вызова передаетcя объект формата json;
- script – ответ обрабатывается как сценарий JavaScript, и после передается функцию обратного вызова;
- text – ответ воспринимается как обычный текст;
dataType:"json"
Ресурс на стороне сервера должен содержать соответствующий заголовок content-type.
header("Content-Type: text/html; charset=utf-8");
Если параметр dataType опущен, то ответ не будет предварительно обработан.
contentType – строка указывающая тип запроса, по умолчанию application/x-www-form-urlencoded; charset=UTF-8
processData логическое значение: true – кодирует(по умолчанию), false - не кодирует передаваемые данные в URL формат
success – функция обратного вызова, исполняется если код статуса в ответе сервера сообщает об успехе. Первый параметр - ответ передаваемый сервером после обработки в соответствии с параметром dataType, второй параметр – код статуса.
Существует аналог параметра success, метод .done():
$.ajax({
//Параметры запроса
}).done(function(data){
//Код выполняющийся после успешного запроса
});
complete – функция обратного вызова, исполняется после успешного запроса, после выполнения success и error. Функция получает два аргумента XHR и строку сообщения о состоянии запроса ("success", "notmodified", "error", "timeout", "abort", or "parsererror").
beforeSend – функция вызываемая перед инициацией запроса.
error – функция обратного вызова выполняющаяся в случае ошибки. Функции передается три параметра: экземпляр XHR, строка сообщения о состояния и необязательный объект исключение, возвращаемый экземпляром XHR
error:function(XHR){
alert(" Ошибка: "+XHR.status+ " " + XHR.statusText);
}
statusCode – статус, который вернет сервер после запроса
statusCode: {
404: function() {
alert("Страница не найдена");
}
}
global – параметр содержит логическое значение: true – разрешает (по умолчанию), false – запрещает глобальные функции, которые могут вызываться на различных этапах выполнение запроса.
Перечень глобальных функций
- $.ajaxStart() – функция срабатывает после запуска Ajax, но перед созданием экземпляра XHR.
- $.ajaxSend() – функция срабатывает после создания экземпляра XHR, но перед тем как запрос будет отправлен на сервер.
- $.ajaxSuccess() – функция сработает после того как с сервера вернется ответ, с кодом об успешном запросе.
- $.ajaxError() – Функция сработает, если ответ от сервера содержит код ошибки.
- $.ajaxComplete() – функция сработает после того как будет получен ответ сервера, и после вызова функций обратного вызова
- $.ajaxSuccess(),$.ajaxError().
- $ajaxStop() – функция сработает после всех этапов обработки, и вызова всех функций обратного вызова.
$("displayStatus").ajaxSuccess(function(info){
$(info.target).append("Запрос выполнен успешно")
});
acync – логическое значение: true – запрос выполняется как асинхронный (по умолчанию), false – запрос выполняется как синхронный;
timeout – Числовой параметр, определяет время ожидания ответа от сервера в миллисекундах, если в течении указанного времени ответа не последовало, то дальнейшее выполнение передается функции обработки ошибок error
timeout:1000
Пример
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Подгрузка контента jQuery.ajax()</title>
<!--JQUERY-->
<script src="js/jquery v1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#buttonUpload").click(function(){
$.ajax({
url: "uploadContent.php",
type: "GET",
cache:true,
data: {data:$("#textUpload").val()},
success: function(data){
$("#dataUpload").html(data);
}
});
});
});
</script>
</head>
<body>
<input type="text" id="textUpload" value="" />
<button id="buttonUpload">Подгрузить</button>
<br />
<hr />
<div id="dataUpload"></div>
</body>
</html>
Содержимое файла:
Внутри парного тега <HEAD> подключена библиотеку JQuery, и тут же располагается функция .ajax();
В теле документа располагаются: текстовое поле, данные из которого будут передаваться функцией .ajax() на обработку, кнопка BUTTON, при нажатии на которую будет вызываться функция .ajax(), и блок DIV, в который будут помещаться данные полученные из файла uploadContent.php;
Серверный файл
Файл "uploadContent.php" находится на серверной стороне, функция $.ajax() через GET запрос посылает текст введенный пользователем, сценарий, находящийся в файле обрабатывает полученные данные, и результат возвращает обратно функции.
<?php
header("Content-Type: text/html; charset=UTF-8");
if($_SERVER["HTTP_X_REQUESTED_WITH"] == "XMLHttpRequest") {
print " DATA: ".$_GET["data"];
}
?>
Файл содержит функцию header, которая оправляет HTML шапку, а также суперглобальный массив $_SERVER["HTTP_X_REQUESTED_WITH"], который проверяет тип пришедшего запроса, если он соответствует Ajax запросу, т.е. XMLHttpRequest, то происходит дальнейшее выполнение сценария.
Важно: при передаче данных на сервер, функция $.ajax() кодирует их в UTF8. Если у вас вместо корректного текста отображаются непонятные символы, нужно поработать над кодировкой документа.
Функция для перекодировки текста из UTF8 в WIN1251. Скачать
utf8_to_cp1251.rar.
В примерах использована библиотека JQuery версии v1.7.2, вы всегда можете скачать более новую зайдя на официальный сайт в
раздел загрузок.