jquery ajax
Web 2.0 неожиданно возродил технологию под названием XMLHttpRequest, появившуюся еще в 2000 году. Эта технология позволяет обращаться к серверу без перезагрузки текущей страницы. На данный момент можно считать, что все современные браузеры реализуют эту технологию в объеме, достаточном для безболезненного ее использования. В новой реинкарнации триумвират XMLHttpRequest, JavaScript и DOM называется AJAX.
Пуристы Web-технологий различают следующие подвиды этой технологии:
* AJAX – Asynchronous JavaScript and XML, асинхронный Javascript и XML. В ответ на запрос с клиента сервер отвечает правильно сфоримированным XML-документом.
* AJAH – Asynchronous JavaScript and HTML, асинхронный Javascript и HTML. В ответ на запрос с клиента сервер отвечает уже сгенерированным HTML-документом или его частью.
* AHAH – Asynchronous HTML and HTTP, асинхронный HTML и HTTP. То же самое, что и AJAH.
* AJAJ – JavaScript and JSON, асинхронный Javascript и JSON. В ответ на запрос с клиента сервер отвечает правильной записью объекта Javascript в формате JSON (http://json.org).
jQuery предлагает реализацию всех трех подвидов технологии AJAX и еще один, AJAJs – все те же и Javascript. Теперь обо всем этом подробнее.
Базовыми функциями для работы с AJAX являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):
$.post(url[, params[, callback]])
$.get(url[, params[, callback]])
Здесь:
* url – адрес страницы, на которую будет отправлен запрос;
* params – параметры, передаваемые в запросе в виде пар «ключ : значение»;
* callback – функция, которая будет вызвана в случае успешного завершения вызова.
Пример:
$.post(
‘/ajaxtest.php’,
{
type: "test-request",
param1: "param1″,
param2: 2
},
onAjaxSuccess
);
function onAjaxSuccess(data)
{
// Здесь мы получаем данные, отправленные сервером
alert(data);
}
А что же на сервере? Вызов страницы при помощи технологии AJAX ничем не отличается от простого вызова страницы, например, путем открытия ее в браузере. То есть передаваемые параметры будут доступны на этой странице так же, как если бы они были переданы стандартными методами get или post. На сервере у нас может существовать, например, вот такой ajaxtest.php:
<?php
// Если страница вызвана с помощью .post(), переданные значения будут,
// как всегда, доступны в глобальной переменной $_POST
// Если страница вызвана с помощью .get, переданные значения будут,
// как всегда, доступны в глобальной переменной $_GET
echo ‘text’;
?>
После того как ajaxtest.php отработает, в функцию onAjaxSuccess на клиенте будет передан текст «text». Обратите внимание на HTTP_X_REQUESTED_WITH. Этот HTTP-заголовок устанавливается jQuery во время запросов с помощью AJAX. Это помогает узнать, тип поступившего запроса и соответственно обрабатывать данные. Во всем остальном запрос через Аякс ничем не отличается от обычного запроса страницы у сервера.
ПРИМЕЧАНИЕ
В различных библиотеках, особенно использующих шаблон MVC, часто необходимо знать, как была вызвана страница – открыли ее в браузере или запросили через AJAX? При запросе с помощью технологии AJAX устанавливается HTTP-заголовок HTTP_X_REQUESTED_WITH со значением “XmlHTTPRequest”. Таким образом, в РНР, например, можно узнать, вызвана ли страница с помощью AJAX так:
if($_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’)
{
// выполняем соответствующий код
}
Теперь рассмотрим, как работать с четырьмя подвидами AJAX.
AJAX
Если сервер на запрос возвращает заголовок Content-Type: text/xml и правильно сформированный XML-документ, то в функцию onAjaxSuccess будет передан уже готовый к употреблению DOM этого документа, с которым можно будет работать, используя методы jQuery. Пример:
ajaxtest2.php:
<?php
header("Content-Type: text/xml; charset=utf-8″);
?>
<list>
<item id="1″>
Item 1
</item>
<item id="2″>
Item 2
</item>
</list>
Наш JavaScript:
// Функцию post опускаем, написать ее не составляет труда
function onAjaxSuccess(xml)
{
// Получаем коллекцию всех элементов item из пришедшего xml
items = $("item", xml);
// Находим item с id="1″
item = $("#1″, xml);
// или при помощи XPath
item2 = $("item[@id='2']", xml);
// Извлекаем текст из элемента
alert(item2.html());
}
Как видите, работа с полученным с сервера ответов в виде XML ничем не отличается от работы с уже загруженным в браузер документом.
AHAH
Как уже было видно в первом примере с методом post(), если значение заголовка Content-Type – не «text/xml», ответ с сервера передается как есть, в текстовом виде. Поскольку обычно такой ответ сразу показывается на странице без дополнительной обработки, то нет смысла заводить отдельные функции вроде onAjaxSuccess. Для получения и отображения полученного с сервера HTML jQuery предоставляет метод load:
load(url[, params[, callback]]);
Этот метод прикрепляется к любому элементу на странице, в котором планируется показать ответ с сервера. После выполнения запроса ответ с сервера автоматически запишется в соответствующий элемент:
$("#mydiv").load("/ajaxtest.php");
Мы выполняем запрос к файлу из первого примера про AJAX. После выполнения запроса в элемент с id="mydiv" будет записано слово «text».
AJAJ
Многие разработчики, столкнувшиеся с технологией AJAX, не любят передавать на клиент XML. Объясняется это тем, что XML может быть довольно большим по размеру, и существуют дополнительные трудности при разборе его структуры на клиенте. Благодаря jQuery, разбор XML на клиенте не представляет никакой сложности. А если разработчики активно используют AHAH, то и размеры передаваемого документа перестают быть решающим аргументом.
И все же многие предпочтут использовать JSON. JSON – это способ записи данных, который позволяет прогнать эту запись через функцию eval() и получить полноценный Javascript-объект. Для работы с данными в таком формате jQuery предлагает метод $.getJSON:
getJSON(url, params, callback)
После выполнения запроса ответ с сервера прогоняется через функцию eval(), а полученный объект передается в функцию callback:
ajaxtest3.php
<?php
header(‘Content-Type: text/javascript; charset=utf-8′);
?>
{
params: <?php echo $_REQUEST['params']; ?>,
response: ‘Наш ответ Чемберлену’
}
Javascript:
$.getJSON(
‘/ajaxtest3.php’,
{params: "text"},
onAjaxSuccess
);
function onAjaxSuccess(obj)
{
alert(obj.params);
alert(obj.response);
}
AJAJs
Помимо трех вышеперечисленных способов получения данных с сервера jQuery предлагает еще один. С его помощью можно загрузить и выполнить любой сценарий Javascript с сервера. Для этого используется метод getScript:
getScript(url[, callback])
Пример:
script.js
$("a").css("color", "#0F0″);
Наш Javascript:
$.getScript(‘/script.js’);
После выполнения этого метода будет загружен и выполнен сценарий script.js, который окрасит все ссылки на странице в зеленый цвет.