Алгоритм запроса к серверу выглядит так:
- Проверка существования XMLHttpRequest.
- Инициализация соединения с сервером.
- Посылка запрса серверу.
- Обработка полученных данных.
Для создания запроса к серверу создадим небольшую функцию, которая будет по функциональности объединять в себе функции для GET и POST запросов.
/*
Функция посылки запроса к файлу на сервере
r_method — тип запроса: GET или POST
r_path — путь к файлу
r_args — аргументы вида a=1&b=2&c=3…
r_handler — функция-обработчик ответа от сервера
*/
function SendRequest(r_method, r_path, r_args, r_handler)
{
//Создаём запрос
var Request = CreateRequest();
//Проверяем существование запроса еще раз
if (!Request)
{
return;
}
//Назначаем пользовательский обработчик
Request.onreadystatechange = function()
{
//Если обмен данными завершен
if (Request.readyState == 4)
{
//Передаем управление обработчику пользователя
r_handler(Request);
}
}
//Проверяем, если требуется сделать GET-запрос
if (r_method.toLowerCase() == «get» && r_args.length > 0)
r_path += «?» + r_args;
//Инициализируем соединение
Request.open(r_method, r_path, true);
if (r_method.toLowerCase() == «post»)
{
//Если это POST-запрос
//Устанавливаем заголовок
Request.setRequestHeader(«Content-Type»,»application/x-www-form-urlencoded; charset=utf-8″);
//Посылаем запрос
Request.send(r_args);
}
else
{
//Если это GET-запрос
//Посылаем нуль-запрос
Request.send(null);
}
}
Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.
function ReadFile(filename, container)
{
//Создаем функцию обработчик
var Handler = function(Request)
{
document.getElementById(container).innerHTML = Request.responseText;
}
//Отправляем запрос
SendRequest(«GET»,filename,»»,Handler);
}
Именно таким образом происходит взаимодействие с сервером.
Обработка ответа
В предыдущем примере мы сделали функцию запроса к серверу. Но она, по сути, небезопасна, так как мы не обрабатываем состояния объекта и состояния ответа от сервера.
Дополним наш код, чтобы он смог выводить визуальное оповещение о процессе загрузки.
…
Request.onreadystatechange = function()
{
//Если обмен данными завершен
if (Request.readyState == 4)
{
//Передаем управление обработчику пользователя
r_handler(Request);
}
else
{
//Оповещаем пользователя о загрузке
}
}
…
Как вы уже знаете, объект XMLHttpRequest позволяет узнать статус ответа от сервера. Воспользуемся этой возможностью.
…
Request.onreadystatechange = function()
{
//Если обмен данными завершен
if (Request.readyState == 4)
{
if (Request.status == 200)
{
//Передаем управление обработчику пользователя
r_handler(Request);
}
else
{
//Оповещаем пользователя о произошедшей ошибке
}
}
else
{
//Оповещаем пользователя о загрузке
}
}
…
Варианты ответа от сервера
От сервера можно получить данные нескольких
видов:
- Обычный текст
- XML
- JSON
Если вы получаете обычный текст, то вы можете сразу же направить его в контейнер, то есть на вывод. При получении данных в виде XML вы должны обработать данные с помощью DOM-функций, и представить результат с помощью HTML.
JSON — это объектная нотация Javascript. С ее помощью можно представить объект в виде строки (здесь можно привести аналогию с функцией сериализации). При получении JSON-данных вы должны выполнить их, чтобы получить полноценный объект Javascript и произвести с ним необходимые операции. Помните, что такая передача данных и выполнение их не являются безопасными. Вы должны следить за тем, что поступает на исполнение.
Пример кода JSON:
{
«data»:
{
«misc»:
[
{
«name» : «JSON-элемент один»,
«type» : «Подзаголовок 1»
},
{
«name» : «JSON-элемент два»,
«type» : «Подзаголовок 2»
}
]
}
}
При получении такого кода, производим следующее действие:
var responsedata = eval(«(» +
Request.responseText + «)»)
После выполнения данного кода вам будет доступен
объект responsedata.
Работа с серверными языками программирования
Такая работа ничем не отличается от обычной. Для примеров я возьму PHP в качестве серверного языка. В клиентской части ничего не изменилось, но серверная часть теперь представлена PHP-файлом.
По традиции, начнем с приветствия нашему замечательному миру:
echo «Hello, World!»;
При обращении к этому файлу клиенту вернется строка Hello, World. Как вы понимаете, это представляет широчайшие возможности для построения приложений. На основе передачи аргументов при вызове сервера с помощью XMLHttpRequest можно сделать параметризацию вывода, тем самым обеспечив обширную функциональность Web-приложения.
Помимо PHP, можно использовать любой другой серверный язык программирования.
Оставить комментарий