Вы здесь: Главная >> Jquery-учебник >> Методы и функции AJAX
Методы и функции AJAX
В этом материале мы немного разберем тему поддержки AJAX в jQuery, покажем разные методы и функции, которые при этом могут использоваться.
Метод load()
В библиотеке jQuery технология AJAX также не оставлена без внимания — здесь предоставляется, пожалуй, самый удобный интерфейс доступа к ней. Реализована поддержка всех подвидов технологии AJAX, а также альтернативный вариант общения браузера с сервером через динамически создаваемый тег < script >. Этот вариант позволяет получать данные не только с того же домена, но и с любого другого при соблюдении некоторых условий. Получить с другого домена можно код JavaScript, а также объект в формате JSONP.
При отправке запроса на сервер добавляется заголовок хrequestedwith со значением XMLHttpRequest. xrequestedwith: XMLHttpRequest
Благодаря этому заголовку на сервере можно определить, откуда поступил запрос.
Узнать, что запрос сделан с помощью AJAX, можно так.
if (isset($_SERVER[“HTTP_X_REQUESTED_WITH”])
ScSc $_SERVER [“ HTTP_X_REQUESTED_WITH “ ] == “ XMLHttpRequest” ) {
// Запрос выполнен с помощью AJAX
}
Метод load () позволяет загрузить данные с сервера в определенный элемент коллекции jQuery. После вставки данных объектная модель документа будет обновлена.
Формат метода:
load(URL [Селектор] [, Данные] [, Функция обратного вызова] )
Загрузить данные можно только с того же домена. Если указан только первый параметр, то запрос будет сделан методом GET.
$("#divl").load("/ajax.php?id=l");
Получить отправленные данные на сервере можно с помощью глобального массива $_GET.
if (isset($_GET[“id”])) $id = $_GET[“id”];
В необязательном параметре Селектор можно указать селектор, который ограничит набор вставляемых данных. Например, при таком содержимом файла ajax.php:
<?php
header(“ContentType: text/html; charset=utf-8”);
?>
<span id="spanl">Данные l</span>
<span id="span2">Данные 2</span>
выражение
$ ( #divl ) . load ("/ajax. php") ;
загрузит в элемент с идентификатором divl следующие данные:
<span id="spanl">Данные l</span>
<span id="span2">Данные 2</span>
Если указать выражение $("#divl")
.load("/ajax.php #span2") ;
то вставляемые данные будут ограничены элементом с идентификатором span2, и мы получим следующие данные:
<span id="span2">Данные 2</span>
Параметр Данные позволяет передать несколько параметров. Для этого параметры и значения должны быть указаны следующим образом.
{
Параметр1: "Значение1",
Параметр2: "Значение2",
Параметры: "Значение"
}
Если параметр Данные указан, то данные передаются методом POST. В случае если параметры или значения содержат запрещенные символы, то они будут автоматически перекодированы с помощью метода encodeURI Component ().
$(M#divl").load("/ajax.php", { txt: "Текст" });
Получить отправленные данные на сервере можно с помощью глобального массива $_POST.
if (isset($_POST[“txt”])) $txt = $_POST[“txt”];
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции(Загруженные данные[, Статус[,
Объект XMLHttpRequest]]) { // ...
}
Функция будет вызвана после окончания загрузки, независимо от ее результата. Внутри функции доступна ссылка (this) на текущий DOMэлемент. Если в первом параметре указать переменную, то через нее будут доступны данные, которые загружены с сервера. Через параметр Статус доступен статус запроса. Возвращаются следующие значения:
error — при ошибке;
succcss — при успешном выполнении запроса.
Обработать ошибку загрузки можно, например, так.
$("#divl").load("/ajax.php", { txt: "Текст"
}, function(data, status) {
if (status == “error”) {
$(this).html("Ошибка при загрузке");
Через параметр Объект XMLHttpRequest доступна ссылка на объект XMLHttpRequest. Обработать ошибку загрузки с помощью этого параметра можно, например, так.
$("#divl").load("/ajax2.php", { txt: "Текст"
}, function(data, status, XMLHttpRequest) {
if (XMLHttpRequest.status != 200) {
$(this).html("Ошибка при загрузке");
}
});
Функция $.getJSON()
Функция $. get JSON () позволяет получить данные в форматах JSON и JSONP методом GET. Формат функции:
$.getJSON{URL[, Данные] [, Функция обратного вызова])
Следует учитывать, что при использовании формата JSON данные можно загрузить только с того же домена. Необязательный параметр Данные позволяет передать несколько параметров. Для этого параметры и значения должны быть указаны следующим образом.
{
Параметр1: “ Значение1",
Параметр2: "Значение2",
Параметры: "Значение"
}
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции DOMобъект [, Статус]) { // ...
}
Внутри функции обратного вызова доступна ссылка (this) на объект с параметрами запроса. После получения данных они автоматически выполняются с помощью функции eval (), и JSONобъект становится доступным через первый параметр. С помощью параметра Статус можно получить статус запроса (значение succcss — при успешном выполнении).
В качестве примера рассмотрим получение данных в формате. JSON. Создадим файл index.php (листинг 11.4), который будет обмениваться данными с файлом ajax.php (листинг 11.5), расположенным на том же домене.
Листинг 11.4. Содержимое файла index.php
<html>
<head>
<title>Функция $.getJSON() и JSON</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
$(document).ready(function() {
$(":button").click(function() {
$.getJSON("/ajax.php", { txt: "test" },
function(jsonObject) {
$("#div1").html("param1 = " + jsonObject.param1 +
"
" + "param2 = " + jsonObject.param2);
}
);
});
});
//>
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>
Листинг 11.5. Содержимое файла ajax.php
<?php
header(`Expires: Sun, 27 May 2007 01:00:00 GMT`);
header(`LastModified: ` . gmdate(`D, d M Y H:i:s`) . ` GMT`);
header(`CacheControl: nostore, nocache, mustrevalidate`);
header(`Pragma: nocache`);
header(`ContentType: text/javascript; charset=utf-8`);
if (!isset($_SERVER[`HTTP_X_REQUESTED_WITH`])) {
exit(`Данные отправлены не через AJAX`);
}
if (!isset($_GET[`txt`])) {
exit(`Некорректные параметры запроса`);
}
?>
{
param1: "Значение 1",
param2: ""
}
Функция $ . getJSON () позволяет также получать данные в формате JSONP с другого домена методом GET. Чтобы отправить данные этим методом, необходимо после параметров в URL-адресе указать конструкцию: Параметр=?
Название параметра может быть произвольным,
http://sitel/ajax.php?txt=test&callback=?
Если в конце запроса указан вопросительный знак, то данные будут отправлены не с помощью технологии AJAX, а путем создания тега script с указанием URLадреса в параметре src. Вместо вопросительного знака будет вставлено произвольное значение. Запрос на сервер будет выглядеть примерно следующим образом.
GET /ajax.php?txt=test&callback=jsonpl24 751862 2 796&_=124 751862415 6
HTTP/1.1 Host: sitel
Как видно из примера, вместо знака вопроса мы получили следующую строку.
jsonpl24 7518622 796&_=124 7 518624156
Значение параметра callback необходимо указать перед данными в формате JSON в скрипте на сервере. Сами данные указываются внутри круглых скобок.
jsonpl247518622796({
paraml: "Значение 1",
param2: "Значение 2"
});
В качестве примера рассмотрим получение данных в формате JSONP с другого домена. Создадим файл index.php (листинг 11.6) и разместим его на домене http:// localhost/. С помощью этого файла будем обмениваться данными со скриптом ajax.php (листинг 11.7), расположенным на домене http: / /sitel/.
Листинг 11.6. Содержимое файла http://localhost/index.php
<html>
<head>
<title>Функция $.getJSON() и JSONP</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
$(document).ready(function() {
$(":button").click(function() {
$.getJSON("http://site1/ajax.php?txt=test&callback=?",
function(jsonObject) {
$("#div1").html("param1 = " + jsonObject.param1 +
"
" + "param2 = " + jsonObject.param2);
}
);
});
});
//>
</script>
</head>
<body>
<div id="div1"></div>
<input type="button" value="Получить данные">
</body>
</html>
Листинг 11.7. Содержимое файла http://sit.e1/ajax.php
<?php
header(`ContentType: text/javascript; charset=utf-8`);
if (!isset($_GET[`callback`])) {
exit(`Некорректные параметры запроса`);
}
echo $_GET[`callback`]; ?>({
param1: "Данные с другого домена",
param2: ""
});
Функция $.getScript()
Функция $ . getScript () позволяет загрузить сценарий JavaScript с любого домена. После загрузки сценарий выполняется в глобальном контексте. Формат функции:
$.getScript(URL[, Функция обратного вызова])
Если во втором параметре указана функция, то она будет выполнена после получения скрипта с сервера. В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции([Данные [, Статус]]) {}
Внутри функции обратного вызова доступна ссылка (this) на объект с параметрами запроса. Если данные были получены с того же домена, то через первый параметр будут доступны данные, полученные с сервера, а через второй параметр— статус запроса (значение succcss — при успешном выполнении). В случае получения данных с другого домена переменные, указанные в параметрах, будут иметь значение undefined. Кроме того, следует учитывать, что при загрузке данных с другого домена функция обратного вызова будет вызвана независимо от результата.
В качестве примера рассмотрим получение и выполнение скрипта с другого домена. Создадим файл index.php (листинг 11.8) и разместим его на домене http://localhost/. С помощью этого файла будем загружать файл script. j s (листинг 11.9), расположенный на домене http://sitel/.
<html>
<head>
<title>Функция $.getScript()</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
$(document).ready(function() {
$(":button").click(function() {
$.getScript("http://site1/script.js",
function() {
if (typeof myStatus != "undefined")
alert("Данные успешно получены");
else alert("Проблемы");
}
);
});
});
//>
</script>
</head>
<body>
<input type="button" value="Получить данные">
</body>
</html>
Листинг 11.9. Содержимое файла http://site1/script.js
var myStatus = "OK";
alert("Это данные с другого домена");
Функция $.get()
Функция $. get () позволяет сделать запрос методом GET. Имеет следующий формат:
$.get(URL[, Данные] [, Функция обратного вызова[, Тип данных]])
Необязательный параметр Данные позволяет передать несколько параметров. Для этого параметры и значения должны быть указаны следующим образом.
{
Параметр1: “ Значение1”,
Параметр2 : “ Значение”,
Параметры: "Значение"
}
Кроме того, можно указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим.
txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&id=5
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата:
function Название функции{Данные[, Статус]) {}
Внутри функции обратного вызова доступна ссылка (this) на объект с параметрами запроса. Следует учитывать, что функция вызывается только в случае успешного завершения запроса. Если необходимо контролировать процесс запроса и обрабатывать ошибки, то следует воспользоваться функцией $ . a j ах ().
Необязательный параметр Тип данных позволяет указать тип возвращаемых данных. Могут быть указаны значения “j son", "xml" и некоторые другие.
В качестве примера использования функции $.get() рассмотрим заполнение взаимосвязанных списков. Изначально из базы данных заполняется первый список. При выборе пункта списка значение параметра value будет отправлено на сервер с помощью функции $ .get (). На сервере делаем запрос и выводим связанные разделы. После получения данных в основном файле заполняем второй список. SQLзапрос для создания таблицы представлен в листинге 11.10. Содержимое файла index.php (основной файл) представлено в листинге 11.11, а текст файла ajax.php (для вывода связанных разделов) содержится в листинге 11.12.
Листинг 11.10. SQLзапрос для создания таблицы
CREATE TABLE `categories` (
`id` int(11) auto_increment,
`name` varchar(255),
`parentID` int(11),
PRIMARY KEY (`id`)
) engine=MYISAM character set `utf-8` collate
`utf-8_general_ci`;
INSERT INTO `categories` VALUES (1, `Раздел 1`, 0);
INSERT INTO `categories` VALUES (2, `Раздел 2`, 0);
INSERT INTO `categories` VALUES (3, `Раздел 3`, 0);
INSERT INTO `categories` VALUES (4, `Подраздел 1.1`, 1);
INSERT INTO `categories` VALUES (5, `Подраздел 1.2`, 1);
INSERT INTO `categories` VALUES (6, `Подраздел 2.1`, 2);
INSERT INTO `categories` VALUES (7, `Подраздел 2.2`, 2);
INSERT INTO `categories` VALUES (8, `Подраздел 3.1`, 3);
INSERT INTO `categories` VALUES (9, `Подраздел 3.2`, 3);
INSERT INTO `categories` VALUES (10, `Подраздел 3.3`, 3);
Листинг 11.11. Содержимое файла index.php
<?php
// Запрещаем кеширование
header(`Expires: Sun, 27 May 2007 01:00:00 GMT`);
header(`LastModified: ` . gmdate(`D, d M Y H:i:s`) . ` GMT`);
header(`CacheControl: nostore, nocache, mustrevalidate`);
header(`Pragma: nocache`);
// Указываем кодировку
header(`ContentType: text/html; charset=utf-8`);
// Подключаемся к базе
$db = mysql_connect(`localhost`, `root`, `123456`)
or die(`Не удалось установить подключение`);
mysql_select_db(`test`) or die(`Такой базы данных нет`);
mysql_query(`SET NAMES `utf-8``); // Кодировка соединения
?>
<html>
<head>
<title>Функция $.get()</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
function f_result(data) {
if (data.indexOf("ERROR") == 1) {
var el;
el = ``;
$("#sel2").replaceWith(el);
}
else {
if (data == "") alert("Ошибка запроса");
else alert(data);
}
$("#div1").stop().hide(300);
}
$(document).ready(function() {
$("#sel1").change(function() {$("#div1").stop().show(300);
$("#sel2").attr("disabled", true);
$.get("/ajax.php", { id: $("#sel1").val() }, f_result);
});
});
//>
</script>
<style>
#sel1, #sel2 { width:150px; }
</style>
</head>
<body>
<select size="4" id="sel1">
<?php
$query = `SELECT `id`, `name` FROM `categories` `;
$query .= `WHERE `parentID`=0 ORDER BY `name``;
if ($res = mysql_query($query)) {
while ($row = mysql_fetch_row($res)) {
echo `
echo htmlspecialchars($row[1], ENT_COMPAT, `UTF-8`);
echo "
";
}
}
mysql_close($db);
?>
<select size="4" id="sel2" style="display:none;">
</select>
<div id="div1" style="display:none;">Загрузка...</div>
</body>
</html>
Листинг 11.12
<?php
// Запрещаем кеширование
header(`Expires: Sun, 27 May 2007 01:00:00 GMT`);
header(`LastModified: ` . gmdate(`D, d M Y H:i:s`) . ` GMT`);
header(`CacheControl: nostore, nocache, mustrevalidate`);
header(`Pragma: nocache`);
// Указываем кодировку
header(`ContentType: text/html; charset=utf-8`);
if (!isset($_SERVER[`HTTP_X_REQUESTED_WITH`])) {
exit(`ERROR: Данные отправлены не через AJAX`);
}
if (isset($_GET[`id`])) $id = (int)$_GET[`id`];
else $id = 0;
if ($id === 0) exit(`ERROR: Параметр id содержит ошибку`);
// Подключаемся к базе
$db = mysql_connect(`localhost`, `root`, `123456`)
or die(`ERROR: Не удалось установить подключение`);
mysql_select_db(`test`) or die(`ERROR: Такой базы данных
нет`);
mysql_query(`SET NAMES `utf-8``); // Кодировка соединения
$query = `SELECT `id`, `name` FROM `categories` `;
$query .= `WHERE `parentID`=` . $id . ` ORDER BY `name``;
if ($res = mysql_query($query)) {
if (mysql_num_rows($res) != 0) {
while ($row = mysql_fetch_row($res)) {
echo `
echo htmlspecialchars($row[1], ENT_COMPAT, `UTF-8`);
echo "
";
}
}
else {
echo ``;
}
}
else {
echo `ERROR: Ошибка выполнения`;
}
mysql_close($db);
?>
Функция $.post()
Функция $.post() позволяет сделать запрос методом POST. Имеет следующий формат:
$.post{URL[, Данные] [, Функция обратного вызова[, Тип Данных] ] )
Следует учитывать, что данные можно загрузить только с того же домена. Необязательный параметр Данные позволяет передать несколько параметров.
Кроме того, можно указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим. txtl=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&id=5
В качестве параметра Функция обратного вызова указывается ссылка на функцию следующего формата.
function Название функции {Данные [, Статус]) { }
Внутри функции обратного вызова доступна ссылка (this) на объект с параметрами запроса. Следует учитывать, что функция вызывается только в случае успешного завершения запроса. Если необходимо контролировать процесс запроса и обрабатывать ошибки, то следует воспользоваться функцией $ . ajах ().
Необязательный параметр Тип данных позволяет указать тип возвращаемых данных. Могут быть указаны значения "json", "xml" и некоторые другие. Если указано значение "json", то данные будут выполнены с помощью функции eval (), и JSONобъект будет доступен через параметр Данные в функции обратного вызова.
$.post("/ajax.php", { id:l }, function(data) {
alert(data.paraml + "\n" + data.param2); },
"json");
Скрипт на сервере:
<?php
header(“ContentType: text/javascript; charset=utf-8”);
?>
{
paraml: "Текст", param2: 12
}
Результат выполнения:
Текст 12
Если указано значение "xml", то через параметр Данные в функции обратного вызова будет доступен документ в формате XML.
$ .post("/ajax.php", { id:l }, function(xml) { var textl = $("textl", xml); var text2 = $("text2", xml);
alert(textl.eq(0).text() + " " + text2.eq(0).text() + " " + textl.eq(l).text() + " " + text2.eq(1).text()); }, "xml");
Скрипт на сервере: <?php
header(“ContentType: text/xml; charset=utf-8”); echo ``, "
"; ?>
<ajax>
<otvet>
<textl>Поле l</textl>
<text2>Поле 2</text2> </otvet> <otvet>
<textl>Пoлe 3</textl>
<text2>Пoлe 4</text2> </otvet> </ajax>
Результат выполнения:
Поле 1 Поле 2 Поле 3 Поле 4
На самом деле указывать значение "xml" необязательно. Если сервер возвращает XMLдокумент и соответствующие заголовки, то через параметр Данные в функции обратного вызова будет доступен документ в формате XML и без указания значения " xml”.
Обратите внимание на следующую строку,
var textl = $("textl", xml);
Библиотека jQuery позволяет работать с XMLдокументом так же, как и с HTMLдокументом. Для этого необходимо во втором параметре функции $ () указать XMLдокумент в качестве контекста.
Для примера рассмотрим форму отправки сообщения. Отправлять сообщение на почтовый адрес электронной почты мы не будем, так как очень часто письма не доходят до адресата. Вместо этого будем сохранять сообщение в базе данных MySQL. В этом случае администрация сайта точно получит сообщение. SQLзапрос для создания таблицы представлен в листинге 11.13. Содержимое файла index.php (файл с формой) представлено в листинге 11.14, а текст файла ajax.php (для сохранения сообщения) содержится в листинге 11.15.
Листинг 11.13. SQL-запрос для создания таблицы
CREATE TABLE `mail` (
`id` int(11) auto_increment,
`name` varchar(255) default ``,
`email` varchar(255) default ``,
`tema` varchar(255) default ``,
`msg` text,
`date_msg` datetime,
`status` enum(`new`, `old`),
PRIMARY KEY (`id`)
) engine=MYISAM character set `utf-8` collate `utf-8_general_ci`
Листинг 11.14. Содержимое файла index.php
<?php
// Запрещаем кеширование
header(`Expires: Sun, 27 May 2007 01:00:00 GMT`);
header(`LastModified: ` . gmdate(`D, d M Y H:i:s`) . ` GMT`);
header(`CacheControl: nostore, nocache, mustrevalidate`);
header(`Pragma: nocache`);
// Указываем кодировку
header(`ContentType: text/html; charset=utf-8`);
?>
<html>
<head>
<title>Функция $.post()</title>
<meta httpequiv="ContentType" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!
function f_result(xml) {
var status = $("status", xml).eq(0).text();
var msg = $("msg", xml).eq(0).text();
if (status == "ok") {
$("#author").val("");
$("#emails").val("");
$("#tema").val("");
$("#msg").val("");
}
$("#div1").html(msg);
$("#btn").removeAttr("disabled");
}
$(document).ready(function() {
$("#frm").submit(function() {
$("#btn").attr("disabled", true);
$("#div1").html("Загрузка...");
$.post("/ajax.php", $("#frm").serialize(), f_result,
"xml");
return false;
});
$("#author").keypress(function(e) {
if (e.keyCode==13) {
$("#emails").focus();
return false;
}
});
$("#emails").keypress(function(e) {
if (e.keyCode==13) {
$("#tema").focus();
return false;
}
});
$("#tema").keypress(function(e) {
if (e.keyCode==13) {
$("#msg").focus();
return false;
}
});
});
//>
</script>
</head>
<body>
<div id="div1"></div>
<form method="POST" action="ajax.php" id="frm">
<b>Имя:</b><br>
<input type="text" name="author" id="author" size="40"><br>
<b>Email:</b><br>
<input type="text" name="emails" id="emails" size="40"><br>
<b>Тема:</b><br>
<input type="text" name="tema" id="tema" size="40"><br>
<b>Сообщение:</b><br>
<textarea name="msg" id="msg" style="width:300px;
height:150px">
</textarea><br><br>
<input type="submit" id="btn" value="Отправить">
</form>
</body>
</html>
Листинг 11.15. Содержимое файла ajax.php
<?php
// Запрещаем кеширование
header(`Expires: Sun, 27 May 2007 01:00:00 GMT`);
header(`LastModified: ` . gmdate(`D, d M Y H:i:s`) . ` GMT`);
header(`CacheControl: nostore, nocache, mustrevalidate`);
header(`Pragma: nocache`);
if (!isset($_SERVER[`HTTP_X_REQUESTED_WITH`])) {
header(`ContentType: text/html; charset=utf-8`);
// Здесь обрабатываем данные, если отключен JavaScript
exit(`Данные отправлены не через AJAX`);
}
else { // Если отправлено через AJAX
// Указываем тип документа и кодировку
header(`ContentType: text/xml; charset=utf-8`);
// Получаем данные
if (isset($_POST[`emails`])) $emails = $_POST[`emails`];
else $emails = ``;
if (isset($_POST[`author`])) $author = $_POST[`author`];
else $author = ``;
if (isset($_POST[`tema`])) $tema = $_POST[`tema`];
else $tema = ``;
if (isset($_POST[`msg`])) $msg = $_POST[`msg`];
else $msg = ``;
$err_msg = ``;
// Удаляем пробельные символы
$author = trim($author);
$tema = trim($tema);
$msg = trim($msg);
// Если директива magic_quotes_gpc включена,
// то удаляем защитные слеши перед спецсимволами
if (get_magic_quotes_gpc()) {
$author = stripslashes($author);
$tema = stripslashes($tema);
$msg = stripslashes($msg);
}
$pattern = `/^[az09_.]+@([az09]+.)+[az]{2,6}$/isu`;
if (!preg_match($pattern, $emails)) {
$err_msg .= `Недопустимый адрес Email !
`;
}
if (mb_strlen($emails, `UTF-8`) > 60) {
$err_msg .= `Длина Email больше 60 символов!
`;
}
if (mb_strlen($author, `UTF-8`) == 0) {
$err_msg .= `Поле Имя не заполнено!
`;
}
if (mb_strlen($author, `UTF-8`) > 30) {
$err_msg .= `Длина поля Имя более 30 символов!
`;
}
if (mb_strlen($tema, `UTF-8`) == 0) {
$err_msg .= `Поле Тема не заполнено!
`;
}
if (mb_strlen($tema, `UTF-8`) > 50) {
$err_msg .= `Длина поля Тема более 50 символов!
`;
}
if (mb_strlen($msg, `UTF-8`) == 0) {
$err_msg .= `Поле Сообщение не заполнено!
`;
}
if (mb_strlen($msg, `UTF-8`) > 65000) {
$err_msg .= `Длина поля Сообщение более 65000
символов!<br>`;
}
if ($err_msg == ``) {
// Подключаемся к базе
if (!@$db = mysql_connect(`localhost`, `root`,
`123456`)) {
$err_msg .= `Не удалось установить подключение!
`;
}
else {
if (mysql_select_db(`test`)) {
mysql_query(`SET NAMES `utf-8``);
}
else {
$err_msg .= `Такой базы данных нет!
`;
}
}
}
if ($err_msg == ``) {
// Если ошибок нет, то сохраняем сообщение
// При желании можно отправить на Email с помощью
функции mail()
$author = mysql_real_escape_string($author);
$tema = mysql_real_escape_string($tema);
$msg = mysql_real_escape_string($msg);
$q = "INSERT INTO `mail` VALUES (NULL, `$author`,
`$emails`, ";
$q .= "`$tema`, `$msg`, NOW(), `new`)";
if (!mysql_query($q)) {
$err_msg .= `Не удалось сохранить сообщение
`;
}
mysql_close($db);
}
if ($err_msg != ``) {
$status = `error`;
$otvet = `` . $err_msg .
`</span>`;
}
else {
$status = `ok`;
$otvet = `
weight:bold;">`;
$otvet .= `Сообщение успешно сохранено`;
}
$otvet = htmlspecialchars($otvet, ENT_COMPAT, `UTF-8`);echo "
";
echo `` . $status . "
";
echo `` . $otvet . "
";
echo "
";
}
?>
Функция $.ajax()
Практически все функции, которые мы рассматривали в предыдущих разделах, вызывают функцию $ .ajax(). Она является универсальной и позволяет полностью контролировать весь процесс обмена данными с сервером. Формат функции:
$.ajах( Объект с опциями)
Функция возвращает ссылку на объект XMLHttpRequest. Единственный параметр представляет собой объект, состоящий из пар "опция/значение". Могут быть указаны следующие опции.
url — URLадрес обработчика на сервере.
type — метод передачи данных (GET (значение по умолчанию) или POST).
data— данные, которые будут переданы на сервер.
В случае если параметры или значения содержат запрещенные символы, то они будут автоматически перекодированы с помощью метода encodeURI Component (). В качестве значения опции data можно также указать сформированную строку запроса. В этом случае заботиться о допустимости символов необходимо самим.
txt=%D0%A2%D0%B5%D0%BA%Dl%81%Dl%82&id=80
dataType — ожидаемый тип данных в ответе сервера. Если опция не указана, то тип будет определяться автоматически по MIMEтипу в заголовках ответа сервера. Можно указать следующие типы данных.
text — простой текст; ответ будет получен через свойство responseText.
html — HTMLдокумент; ответ будет получен через свойство responseText.
xml — XMLдокумент; ответ будет получен через свойство responseXML объекта XMLHttpRequest. Свойство будет доступно, только если в заголовках ответа сервера указан MIMEтип application/xml или text/xml. Кроме того, XMLдокумент должен иметь правильную структуру и соответствовать спецификации DOM.
script — JavaScriptкод; после получения код выполняется в глобальном контексте. Если данные были получены с того же домена, то внутри функции, указанной в опции succcss, будут доступны данные в виде обычного текста. Данные также могут быть получены с другого домена. В случае получения данных с другого домена, внутри функции, указанной в опции succcss, данные будут иметь значение undefined. Кроме того, следует учитывать, что, при загрузке данных с другого домена, функция, указанная в опции succcss, будет вызвана независимо от результата.
json — ответ в формате JSON; после получения данные автоматически выполняются с помощью функции eval (), и JSONобъект становится доступным внутри функции, указанной в опции succcss.
jsonp — ответ в формате JSONP; данные могут быть получены с другого домена. Чтобы отправить данные в этом формате, необходимо после параметров в URLадресе указать конструкцию; Параметр=?. Название параметра может быть произвольным. Если в конце запроса указан вопросительный знак, то данные будут отправлены не с помощью технологии AJAX, а путем создания тега script с указанием URLадреса в параметре src. Вместо вопросительного знака будет вставлено произвольное значение. Значение из конструкции Параметр необходимо указать перед данными в формате JSON в скрипте на сервере. Сами данные указываются внутри круглых скобок.
async — тип запроса. Могут быть заданы следующие значения.
true — асинхронный запрос (выполнение текущего скрипта не приостанавливается до получения ответа); значение по умолчанию.
false— синхронный запрос (выполнение текущего скрипта будет продолжено только после получения ответа сервера).
cache — управление кешированием. Опция имеет смысл только при запросах методом GET. Могут быть заданы следующие значения.
true — ответ может быть помещен в кеш веббраузера. Если в заголовках ответа сервера указано запрещение кеширования, то данные не будут помещены в кеш.
false— запрещение кеширования. Если указано это значение, то к строке запроса будет добавлен параметр _=Случайное число.
GET /ajax.php?_=1247862154453&txt=5 HTTP/l.l
timeout — максимальное время выполнения запроса в миллисекундах.
content Туре— позволяет указать значение заголовка ContentТуре. По умолчанию при запросах методом POST имеет значение application/xwwwformurlencoded.
proccssData— если указано значение false, то данные, указанные в опции data, не будут преобразовываться в строку запроса. Например, можно передать массив.
$.ajax({
url: "/ajax.php", data: [1,2,3],
dataType: "text", proccssData: false, succcss: function(data) { alert(data);
}
});
В результате строка запроса будет выглядеть так.
GET /ajax.php?l,2,3 HTTP/1.1
Если опция имеет значение true или не указана, то результат будет другим.
GET /аj ах.php?undefined=undefined&undefined=undefined
&undefined=undefined HTTP/1.1
if Modified— если указать значение true, то запрос будет успешным только в том случае, если данные изменились. Для этого в первом запросе будет добавлен заголовок.
IfModifiedSince: Thu, 01 Jan 1970 00:00:00 GMT
Во втором запросе в этом заголовке будет уже указана дата последнего изменения данных, полученная с сервера в первом запросе.
IfModifiedSince: Sun, 25 Jan 2009 23:48:56 GMT
Если сервер вернет код статуса 304 (документ без изменений), то функция, указанная в опции succcss, вызвана не будет.
jsonp — позволяет указать название параметра для JSONPзапроса. При указании этой опции нет необходимости в конструкции Параметр=?.
$.ajax({
url: "http://sitel/ajax.php", data: Mtxt=test", dataType: "jsonp", jsonp: "callback", succcss: function(data) { alert(data.paraml);
}
});
Строка запроса будет выглядеть следующим образом.
GET /ajax.php?callback=jsonpl2478695427505c_=12478695440315ctxt= test HTTP/1.1
scriptCharset — позволяет указать кодировку данных при значениях опции dataType, равных "jsonp" или "script".
username — логин для НТТРавторизации.
password — пароль для НТТРавторизации.
beforeSend— ссылка на функцию, которая будет вызвана до передачи запроса на сервер. С помощью этой функции можно, например, добавить или изменить заголовки запроса. Формат функции:
.function Название функции(<Объект XMLHttpRequest>) { }
В качестве примера изменим значение заголовка UserAgent.
beforeSend: function(obj) {
obj.setRequestHeader("UserAgent", "MyRobot");
}
dataFilter — ссылка на функцию, которая будет вызвана сразу после получения ответа с сервера, но до обработки данных с помощью jQuery. Формат функции:
function Название функции {Данные [, Тип данных] ) { //Обрабатываем данные
return Данные; // Возвращаем обработанные данные
}
Внутри функции необходимо возвращать обработанные данные.
complete — ссылка на функцию, которая будет вызвана по окончании запроса, независимо от успешности его выполнения. Формат функции:
function Название функции(Объект XMLHttpRequest[, Статус] {// ...
succcss — ссылка на функцию, которая будет вызвана в случае успешного выполнения запроса. Формат функции:
function Название функции {Данные [, Статус]) {}
Через параметр Данные доступны данные, обработанные с учетом значения опции dataType.
error — ссылка на функцию, которая будет вызвана при ошибке. Формат функции:
function Название функции{[Объект XMLHttpRequest [, Текст ошибки [, Исключение] ]]) {}
Параметр Текст ошибки может возвращать следующие значения: null, timeout, error, notmodif ied или parsererror. Параметр Исключение позволяет получить информацию об ошибке при значении null в параметре Текст ошибки. Например, в веббраузере Opera при обращении к другому домену в параметре Исключение будет следующее значение:
[Error:
name: Error
mcssage: Security violation ]
Все указанные параметры можно указать в функции $ . ajaxSetup (). В этом случае это будут значения по умолчанию для всех запросов. Формат функции: $. ajaxSetup (Объект с параметрами)
Рассмотрим пример.
$.ajaxSetup({ // Запрос методом GET url: "/ajax.php", // URLадрес
dataType: "html", // Тип возвращаемых данных cache:
false, // Запрет кеширования succcss: function(data)
{ // При удачном запросе alert(data);
error: function(obj, err) { // При ошибке
alert("Ошибка: " + err);
}
});
$.ajax({ // Все опции запроса указаны в $.ajaxSetup() data: {
id:l, txt:"Данные" } // Передаваемые данные
});
Сергей Владимирцев
07.03.2011