Вы здесь: Главная >> Jquery-учебник >> Основы ajax
Основы ajax
В этом разделе учебника мы рассмотрим основы ajax – новой технологии, используемой сегодня повсеместно.
Изучаем обмен данными с помощью тега iframe
AJAX (Asynchronous Javascript And Xml, асинхронный JavaScript и XML) — это технология взаимодействия веб-браузера с сервером без перезагрузки страницы.
Веббраузер в фоновом режиме отправляет запрос серверу. На сервере скрипт обрабатывает переданный запрос и отправляет ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Полученный ответ обрабатывается в веббраузере с помощью языка JavaScript, и на основе ответа обновляется структура текущего HTML-документа. Таким образом не происходит перезагрузка всей веб-страницы, а только лишь изменяется какойлибо ее фрагмент. Классический пример технологии AJAX демонстрирует поисковая система Google, позволяющая при наборе поисковой фразы в строке запроса предлагать различные варианты, начинающиеся с набранных букв.
Но прежде чем изучать основы этой замечательной технологии, рассмотрим альтернативный способ общения веббраузера с сервером без перезагрузки веб-страницы.
После заполнения формы и щелчка на кнопке Submit данные будут отправлены серверу, и ответ сервера полностью заменит текущую веб-страницу. Однако если в параметре target тега form указать название фрейма, данные формы будут загружены в этот фрейм, а текущая веб-страница останется без изменений. На этом и основан альтернативный способ обмена данными без перезагрузки веб-страницы.
Для создания фрейма используется тег iframe с нулевой высотой и шириной. Более того, обычно фрейм полностью скрывают от глаз пользователей, присваивая значение попе атрибуту display. Название этого фрейма указывается в параметре target тега form. После отправки формы скрипт на сервере должен вернуть фрагмент кода на языке JavaScript, который произведет изменения в текущей веб-странице.
Рассмотрим все на примере. Создадим документ с формой, который будет обмениваться данными с файлом ajах. php (листинг 10.2), расположенным на сервере.
Листинг 10.1.
Использование тега iframe
<html>
<head>
<title>Использование тега <iframe></title>
</head>
<body>
<form action="ajax.php" method="GET" target="frame_ajax">
<input type="text" name="text1" id="text1"><br>
<input type="submit" value="Отправить"><br>
</form>
<div id="otvet"></div>
<iframe name="frame_ajax" src="ajax.php" width="0"
height="0" style="display:none">
</body>
</html>
Листинг 10.2.
Исходный код файла ajax.php
<?php
header("ContentType: text/html; charset=utf8");
if (isset($_GET["text1"])) {
$msg = "Данные " . $_GET["text1"];
echo `<script language="JavaScript">`, "
";
echo "<!
";
echo `parent.document.getElementById("text1").value = "";`,
"
";
echo `parent.document.getElementById("otvet").innerHTML =
"`;
echo htmlspecialchars($msg, ENT_COMPAT, `UTF8`), `";`;
echo "
//>
";
echo "</script>
";
}
else {
echo `Данные не получены`;
}
?>
После заполнения формы и щелчка на кнопке «Отправить» во фрейм с названием frame_ajax будет загружен фрагмент кода JavaScript (листинг 10.3), сформированный скриптом ajах.php.
Листинг 10.3.
Исходный код, возвращаемый сервером
<script language="JavaScript">
<!
parent.document.getElementById("text1").value = "";
parent.document.getElementById("otvet").innerHTML = "Данные
Строка";
//>
</script>
Данный скрипт очищает поле в форме и выводит полученные данные внутри тега div с идентификатором otvet. Для получения ссылки на родительское окно используется свойство parent объекта window. Вместо свойства parent можно воспользоваться свойством top, которое возвращает ссылку на самое верхнее родительское окно,
top.document.getElementById("text1").value = "";
top.document.getElementByld("otvet").innerHTML = "Данные Строка";
Получить ссылку на элемент HTML-документа по его идентификатору позволяет метод getElementByld () объекта document. После получения ссылки мы можем изменить значение элемента. Для изменения данных в текстовом поле достаточно изменить значение свойства value. Изменить содержимое тега div можно с помощью свойства innerHTML, которое не только выводит текстовую информацию, но и обновляет объектную модель HTML-документа.
На самом деле использование тега iframe не является единственной альтернативой технологии AJAX. Вместо этого тега можно динамически изменять параметр src тега script, передавая параметры в URLадресе. В ответ скрипт на сервере также должен сформировать фрагмент кода JavaScript, который изменит текущую веб-страницу без перезагрузки.
Все рассмотренные нами способы позволяют возвращать результат только в виде фрагмента кода JavaScript. Возможности технологии AJAX гораздо шире. Мы можем получить ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Передать запрос на сервер можно как методом GET, так и методом POST. Рассмотрим технологию AJAX более подробно.
Объект ХМLHttpRequest
Для реализации обмена данными между веббраузером и сервером используется объект XMLHttpRequest. Этот объект в фоновом режиме может отправить запрос и получить результат, который не отображается в окне веббраузера. Получить доступ к результату запроса можно с помощью языка JavaScript.
Прежде чем использовать объект XMLHttpRequest, необходимо его создать с помощью оператора new. Проблема заключается в том, что в разных веббраузерах объект создается поразному. В одних используется встроенный объект window.XMLHttpRequest, а в других— ActiveXобъект MSXML2 . XMLHTTP или Microsoft .XMLHTTP. Кроссбраузерный код создания объекта приведен в листинге 10.4.
Листинг 10.4.
Создание объекта XMLHttpRequest
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
Объект XMLHttpRequest имеет следующие методы.
- open(Метод передачи данных, адрес, Тип запроса) — подготавливает запрос к отправке на сервер. В первом параметре можно указать метод GET или POST. Параметр адрес предназначен для указания URLадреса скрипта, которому будет отправлен запрос. Можно указать как абсолютный путь, так и относительный. При указании абсолютного пути следует иметь в виду, что запрос может быть отправлен только к домену, с которого был загружен текущий документ. Кроме того, некоторые веббраузеры не позволяют отправить запрос к домену http: //www. site. ru/, если документ был загружен с http: / /site. ru/. По этой причине лучше указывать относительный путь от корня сервера или от местонахождения текущего документа. Если для отправки данных используется метод GET, то после названия скрипта указываются передаваемые параметры. В параметре Тип запроса могут быть заданы следующие значения:
true— асинхронный запрос (выполнение текущего скрипта не приостанавливается до получения ответа);
false— синхронный запрос (выполнение текущего скрипта будет продолжено только после получения ответа сервера).
В большинстве случаев используются именно асинхронные запросы, так как ответ от сервера может занять некоторое время. Метод open () имеет еще два необязательных параметра: имя пользователя и пароль. В практике эти параметры не применяются, и мы их рассматривать не будем.
- setRequestHeader {Заголовок, 3начение) — позволяет добавить заголовок запроса. В большинстве случаев используется для указания типа передаваемых данных методом POST.
link.setRequestHeader(“ ContentType “,
“application/xwwwformurlencoded”);
- send (Данные для отправки методом POST) —отправляет запрос на сервер. В качестве параметра при запросе методом GET указывается значение null.
link.send(null);
Для метода POST указывается строка передаваемых данных. Передаваемые данные должны быть перекодированы с помощью функции encodeURIComponent () .
param = ,,textl = " + encodeURI Component ("Текст") ;
link.send(param);
Рассмотрим свойства объекта XMLHttpRequest.
- onreadystatechange — в этом свойстве указывается ссылка на функциюобработчик при асинхронных запросах.
link.onreadystatechange = f_razborRequest;
Обратите внимание на тот факт, что название функции указывается без круглых скобок и параметров. Если указать круглые скобки, то смысл происходящего будет другим. Функция будет выполнена, и результат ее работы будет присвоен свойству onreadystatechange. Так как в функциюобработчик невозможно передать параметр, то внутри функции мы можем обратиться к объекту XMLHttpRequest, только если он будет объявлен в глобальной области видимости. Это не всегда удобно. Однако передать параметр можно, указав в качестве обработчика анонимную функцию, внутри которой происходит вызов функции с параметром.
link.onreadystatechange = function() {
f_razborRequest(link);
};
Этим способом мы и будем пользоваться в дальнейших примерах. Функция f_razborRequest () будет вызываться несколько раз при каждом изменении статуса обработки запроса.
- readyState — содержит текущий статус обработки запроса. Может принимать следующие значения:
0 — объект запроса создан оператором new; 1 — запрос подготовлен с помощью метода open (); 2 — запрос отправлен методом send (); 3 — ответ доступен, но загружен не полностью; 4 — ответ полностью загружен с сервера и доступен для обработки. В дальнейшем нас будет интересовать именно статус 4.
- status — содержит код возврата при значении свойства readyState, равном 4. Успешными считаются коды в пределах от 200 до 299, а также код 304, указывающий, что документ не был изменен с последнего запроса.
Получить доступ к ответу сервера можно с помощью двух свойств.
- responseText — ответ в виде текста, фрагмента HTML-документа или объекта JSON;
- responseXML — ответ в виде XML-документа. Свойство будет доступно, только если в заголовках ответа сервера указан заголовок.
ContentType: application/xml
или
ContentType: text/xml
Кроме того, XML-документ должен быть иметь правильную структуру и соответствовать спецификации DOM.
Итак, как вы уже знаете, ответ сервера может быть предоставлен в виде:
фрагмента HTML-документа, скрипта JavaScript или просто текста;
XML-документа;
объекта JSON.
Рассмотрим каждый вариант обмена данными более подробно.
Обмен данными в текстовом формате
Обмен данными с помощью фрагментов HTMLстраницы, фрагментов кода JavaScript или текста является самым простым способом получения результата. Ответ сервера будет сохранен в свойстве responseText объекта XMLHttpRequest. Для отображения результата запроса на веб-странице достаточно присвоить значение свойства responseText свойству innerHTML какоголибо существующего HTMLэлемента. На основании вставленного фрагмента веббраузер обновит объектную модель HTML-документа и изменит внешний вид веб-страницы без перегрузки страницы.
Рассмотрим обмен данными в текстовом формате на примере. Создадим документ с формой (листинг 10.5), который будет обмениваться данными с файлом ajax.php (листинг 10.6), расположенным на сервере, методами GET и POST.
Листинг 10.5.
Обмен данными в текстовом формате
<html>
<head>
<title>Обмен данными в текстовом формате</title>
<script language="JavaScript">
<!
function f_GET() {
// Отправка запроса методом GET
var link;
var url;
var txt = document.getElementById("text1").value;
if (txt == "") {
window.alert("Не заполнено поле");
return false;
}
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
if (!link) {
window.alert("Ваш веббраузер не поддерживает технологию
Ajax");
return false;
}
url = "/ajax.php?text1=" + encodeURIComponent(txt);
// Подготовка асинхронного запроса методом GET
link.open(`GET`, url, true);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(null); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_POST() {
// Отправка запроса методом POST
var link;
var param;
var txt = document.getElementById("text1").value;
if (txt == "") {
window.alert("Не заполнено поле");
return false;
}
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
if (!link) {
window.alert("Ваш веббраузер не поддерживает технологию
Ajax");
return false;
}
// Передаваемые параметры
param = "text1=" + encodeURIComponent(txt);
// Подготовка асинхронного запроса методом POST
link.open(`POST`, `/ajax.php`, true);
// Добавляем HTTPзаголовок
link.setRequestHeader(`ContentType`,
`application/xwwwformurlencoded`);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(param); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_razborRequest(link) {
// Обрабатываем асинхронный запрос
if (link.readyState == 4) {
if (link.status == 200) { // Запрос успешно обработан
var otvet = link.responseText;
document.getElementById("text1").value = "";
document.getElementById("otvet").innerHTML = otvet;
}
else {
document.getElementById("otvet").innerHTML =
"Ошибка";
}
}
}
//>
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="button" value="Отправить методом GET"
onclick="f_GET();">
<br>
<input type="button" value="Отправить методом POST"
onclick="f_POST();">
<div id="otvet"></div>
</body>
</html>
Листинг 10.6.
Исходный код файла ajax.php
<?php
header(`ContentType: text/html; charset=utf8`);
if (isset($_GET[`text1`])) {
echo `Метод GET – `, $_GET[`text1`];
}
else {
if (isset($_POST[`text1`])) {
echo `Метод POST – `, $_POST[`text1`];
}
else {
echo `Данные не получены`;
}
}
?>
После загрузки кода из листинга 10.5 на веб-странице будет отображено поле для ввода и две кнопки. При щелчке на кнопке Отправить методом GET будет вызванафункция f GET (), а при щелчке на кнопке Отправить методом POST — функция f POST (). Результат выполнения запроса будет выведен в теге div, имеющем идентификатор otvet (id= "otvet").
После заполнения формы и щелчка на кнопке Отправить методом GET внутри функции f_GET () получаем значение текстового поля и сохраняем его в переменной txt. var txt = document.getElementByld("textl").value;
Далее проверяем, заполнено ли поле ввода, и, если оно не заполнено, выводим сообщение и завершаем выполнение функции.
if (txt == "") {
window.alert("Не заполнено поле");
return false;
}
На следующем этапе пытаемся создать объект XMLHttpRequest. Если объект создать не удалось, выводим сообщение и завершаем выполнение функции,
if (llink) {
window.alert("Ваш веббраузер не поддерживает технологию Ajах");
return false;
}
Затем формируем строку запроса, которую будем передавать методом GET. Все данные, введенные пользователем в поле ввода, перекодируем с помощью метода encodeURI Component (). Сформированную строку сохраняем в переменной url.
url = "/ajax.php?textl=" + encodeURIComponent(txt);
Далее с помощью метода open () подготавливаем объект к отправке асинхронного запроса методом GET.
link.open(“GET”, url, true);
В свойстве onreadystatechange указываем анонимную функцию, в которой вызывается функция f_razborRequest (). Благодаря этому можем передать объект в качестве параметра функции. Функция f_razborRequest () будет вызываться при каждом изменении статуса запроса.
link.onreadystatechange = function() {
f_razborRequest(link);
};
С помощью метода send () отправляем запрос на сервер. Так как мы передаем данные методом POST, в качестве параметра метода send () указываем значение null,
link.send(null);
Поскольку поступление ответа от сервера может произойти через некоторое (иногда продолжительное) время, выводим сообщение, подтверждающее отправку данных,
document.getElementByld("otvet").innerHTML = "Загрузка. . . ";
При каждом изменении статуса запроса будет вызываться функция f _razborRequest (). Внутри этой функции проверяем значение свойства readyState. Если статус запроса равен 4, то ответ полностью получен с сервера и доступен для обработки,
if (link.readyState ==4) {
Наличие статуса завершения еще не гарантирует успешность выполнения запроса. Для этого мы проверяем значение свойства status. Если значение равно 200, то запрос выполнен успешно. В этом случае получаем ответ сервера с помощью свойства responseText, очищаем поле ввода и присваиваем значение элементу с идентификатором otvet с помощью свойства innerHTML.
if (link.status == 200) {
var otvet = link.responseText;
document.getElementByld("textl").value = "";
document.getElementByld("otvet").innerHTML = otvet;
}
В случае заполнения формы и последующего щелчка на кнопке Отправить методом POST внутри функции f _POST () мы получаем значение текстового поля и сохраняем его в переменной txt. Далее проверяем, заполнено ли поле ввода, и, если оно не заполнено, выводим сообщение и завершаем выполнение функции. На следующем этапе пытаемся создать объект XMLHttpRequest. Если объект создать не удалось, выводим сообщение и завершаем выполнение функции. Затем формируем строку запроса, которую будем передавать методом POST. Все данные, введенные пользователем в поле ввода, перекодируем с помощью метода encodeURIComponent (). Сформированную строку сохраняем в переменной param.
param = "textl=" + encodeURIComponent(txt);
Далее с помощью метода open () подготавливаем объект к отправке асинхронного запроса методом POST.
link.open(“POST”, “/ajax.php”, true);
В первом параметре указываем метод POST, а во втором — передаем путь к скрипту относительно корня сервера. Значение третьего параметра (true) указывает, что запрос будет асинхронным.
При передаче данных методом POST необходимо дополнительно указать, что данные переданы из формы. Для этого в методе setRequestHeader указываем значение
арplication/xwwwformurlencoded.
link.setRequestHeader(“ContentType”,
“application/xwwwformurlencoded”);
Далее, как обычно, в свойстве onreadystatechange указываем функциюобработчик. Затем с помощью метода send() отправляем запрос на сервер. В качестве параметра указываем сформированную строку запроса, которую мы сохранили в переменной param.
link.send(param);
Дальнейшая обработка запроса происходит точно так же, как и при отправке запроса методом GET.
Теперь рассмотрим, что происходит при получении запроса сервером. Получив запрос, сервер создаст следующие переменные окружения:
при передаче методом GET:
$_GET[“textl”]
при передаче методом POST:
$_POST[“textl”]
Проверить существование переменных можно с помощью функции isset (). После получения переменных можем делать с ними все, что захотим. В этом примере мы просто возвращаем отправленное значение обратно веббраузеру, дополнительно указывая, каким методом были получены данные.
Для корректного отображения отправленной информации указывается MIMEтип и кодировка с помощью функции header () .
header(“ContentType: text/html; charset=utf8”);
Если кодировка не указана сервером, то веббраузер по умолчанию предполагает, что ответ пришел в кодировке UTF8. Так что если данные посылаются в другой кодировке, то ее необходимо обязательно указывать.
Обмен данными в формате XML
С одной стороны, обмен данными в текстовом формате является простым, но с другой стороны, это влечет за собой жесткую зависимость между клиентским и серверным кодами. Если разработкой проекта занимаются разные люди, а обычно так и бывает, то такой способ обмена данными не является эффективным. При обмене данными в формате XML разработчики могут заранее договориться о формате XML-документа, и в дальнейшем каждый будет выполнять свою часть работы, опираясь на согласованный формат.
Прежде чем рассматривать обработку данных в формате XML с помощью JavaScript, напомним некоторые правила создания простейших XML-документов. XML-документ состоит из двух разделов — пролога и тела документа. В прологе указывается объявление XML.
<?xml version="1.0" encoding="utf8" ?>
В параметре encoding указывается кодировка XML-документа. Если она не указана, то по умолчанию используется кодировка UTF8.
Тело XML-документа должно находиться внутри корневого тега. Обычно имя тега совпадает с именем документа.
<?xml version="l.0" encoding="utf8" ?>
<ajax>
<! Тело XML-документa >
</ajax>
При указании имени тега необходимо помнить, что регистр символов имеет значение. Имена должны начинаться с буквы и содержать буквы, цифры или символ подчеркивания. В отличие от HTMLтегов, в XML пространство имен выбирает сам разработчик.
Следует учитывать, что каждому открывающему тегу должен соответствовать закрывающий тег.
Кроме того, должна соблюдаться вложенность тегов. Если элемент является пустым, то он может быть записан следующим образом.
<item/>
XMLтеги могут иметь параметры. Параметр указывается в формате:
Имя параметра="3начение"
Значение параметра обязательно должно быть указано в кавычках, а сам параметр указывается в открывающем теге.
Все специальные символы внутри тегов и в значениях параметров должны быть заменены на мнемонические имена.
Внутри тегов можно использовать комментарии, которые имеют синтаксис, похожий на сиснтаксис HTMLкомментариев.
<! Это комментарий >
Следование этим несложным правилам избавит от множества проблем при работе с XML-документами.
Теперь рассмотрим обмен данными в формате XML на примере. Создадим документ с формой (листинг 10.7), который будет обмениваться данными с файлом ajax.php (листинг 10.8), расположенным на сервере.
Листинг 10.7.
Обмен данными в формате XML
<html>
<head>
<title>Обмен данными в формате XML</title>
<script language="JavaScript">
<!
function f_GET() {
// Отправка запроса методом GET
var link;
var url;
var txt1 = document.getElementById("text1").value;
var txt2 = document.getElementById("text2").value;
if (txt1 == "" || txt2 == "") {
window.alert("Не заполнено поле");
return false;
}
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0",
"MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
if (!link) {
window.alert("Ваш веббраузер не поддерживает технологию
Ajax");
return false;
}
url = "/ajax.php?text1=" + encodeURIComponent(txt1);
url += "&text2=" + encodeURIComponent(txt2);
// Подготовка асинхронного запроса методом GET
link.open(`GET`, url, true);
link.onreadystatechange = function() {
f_razborRequest(link);
};
link.send(null); // Отправляем запрос
document.getElementById("otvet").innerHTML = "Загрузка...";
}
function f_razborRequest(link) {
// Обрабатываем асинхронный запрос
if (link.readyState == 4) {
if (link.status == 200) { // Запрос успешно обработан
var xml = link.responseXML;
var otvet = xml.getElementsByTagName("otvet");
var text1 =
otvet.item(0).getElementsByTagName("text1").item(0);
var text2 =
otvet.item(0).getElementsByTagName("text2").item(0);
var msg = text1.firstChild.data + "<br>" +
text2.firstChild.data;
document.getElementById("text1").value = "";
document.getElementById("text2").value = "";
document.getElementById("otvet").innerHTML = msg;
}
else {
document.getElementById("otvet").innerHTML =
"Ошибка";
}
}
}
//>
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="text" id="text2"><br>
<input type="button" value="Отправить методом GET"
onclick="f_GET();">
<br><div id="otvet"></div>
</body>
</html>
Листинг 10.8. Исходный код файла ajax.php
<?php
header(`ContentType: text/xml; charset=utf8`);
echo `<?xml version="1.0" encoding="utf8" ?>`, "
";
echo "<ajax>
";
echo " <otvet>
";
if (isset($_GET[`text1`]) && isset($_GET[`text2`])) {
echo " <text1>";
echo `Поле 1 – `;
echo htmlspecialchars($_GET[`text1`], ENT_COMPAT, `UTF8`);
echo "</text1>
";
echo " <text2>";
echo `Поле 2 – `;
echo htmlspecialchars($_GET[`text2`], ENT_COMPAT, `UTF8`);
echo "</text2>
";
}
else {
echo `Данные не получены`;
}
echo " </otvet>
";
echo "</ajax>
";
?>
После заполнения двух полей и щелчка на кнопке Отправить методом GET внутри функции f_GET () получаем значение текстовых полей и сохраняем их в переменных txtl и txt2. Далее проверяем, заполнены ли поля ввода, и, если они не заполнены, выводим сообщение и завершаем выполнение функции. На следующем этапе пытаемся создать объект XMLHttpRequest. Если объект создать не удалось, выводим сообщение и завершаем выполнение функции.
Затем формируем строку запроса, которую будем передавать методом GET. Все данные, введенные пользователем в поля ввода, перекодируем с помощью метода епcodeURIComponent (). Сформированную строку сохраняем в переменной url.
url = "/ajax.php?textl=" + encodeURIComponent(txtl);
url += "&text2=" + encodeURIComponent(txt2);
Далее с помощью метода open () подготавливаем объект к отправке асинхронного запроса методом GET.
link.open(`GET`, url, true);
В свойстве onreadystatechange указываем функциюобработчик и с помощью метода send () отправляем запрос на сервер,
link.send(null);
Теперь рассмотрим, что происходит при получении запроса сервером. Получив запрос, сервер создаст две переменные окружения: $_GET [“ textl” ] и $_GET [“ text2”]. Для корректного отображения отправленной информации указываем MIMEтип и кодировку с помощью функции header () .
header(“ContentType: text/xml; charset=utf8”);
Далее формируем XML-документ, который отправим в ответ на запрос. В результате веббраузер получит XML-документ, приведенный в листинге 10.9.
Листинг 10.9.
XML-документ, формируемый в качестве ответа сервера
<?xml version="1.0" encoding="utf8" ?>
<ajax>
<otvet>
<text1>Поле 1 – Строка 1</text1>
<text2>Поле 2 – Строка 2</text2>
</otvet>
</ajax>
После получения ответа XML-документ в веббраузере будет доступен через свойство responseXML внутри функции f _razborRequest ().
var xml = link.responseXML;
С помощью метода getElementsByTagName () получаем список всех элементов otvet и сохраняем его в переменной otvet.
var otvet = xml.getElementsByTagName("otvet");
Получить доступ к отдельному элементу в списке позволяет метод item (). Нумерация элементов начинается с нуля. Общее количество элементов можно получить с помощью свойства length,
var count = otvet.length;
Доступ к элементам textl и text2 внутри элемента otvet также происходит с помощью метода getElementsByTagName().
var textl = otvet.item(0).getElementsByTagName("textl").item(O);
var text2 = otvet.item(0).getElementsByTagName("text2").item(0);
Получить доступ к элементу можно по индексу, указанному в квадратных скобках.
var textl = otvet[0].getElementsByTagName("textl")[0];
var text2 = otvet[0] .getElementsByTagName("text2") [0] ;
Чтобы получить данные внутри элементов textl и text2, следует воспользоваться свойством f irstChild. Свойство f irstChild содержит информацию о длине строки (свойство length) и текстовых данных элемента (свойство data). Именно свойство data позволяет нам получить переданные данные и сформировать строку для вывода результата.
var msg = textl.firstChild.data + "<br>" + text2.firstChild.data;
document.getElementByld("otvet").innerHTML = msg;
Сергей Владимирцев
27.02.2011