Как уже говорилось, создание данного объекта для каждого типа браузера — уникальный процесс.
Например, для создания объекта в Gecko-совместимых браузерах, Konqueror и Safari, нужно использовать следующее выражение:
var Request = new XMLHttpRequest(); |
А для Internet Explorer используется следующее:
var Request = new ActiveXObject(«Microsoft.XMLHTTP»); |
Либо:
var Request = new ActiveXObject(«Msxml2.XMLHTTP»); |
Теперь, чтобы добиться кроссбраузерности, необходимо сложить все функции в одну:
function CreateRequest()
{
var Request = false;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (CatchException)
{
Request = new ActiveXObject("Msxml2.XMLHTTP");
}
}
if (!Request)
{
alert("Невозможно создать XMLHttpRequest");
}
return Request;
}
|
После всего этого можно создавать данный объект и не беспокоится за работоспособность на популярных браузерах. Но создать объект можно в разных местах. Если создать его глобально, то в определенный момент времени возможен будет только один запрос к серверу. Можно создавать объект всякий раз, как происходит запрос к серверу (это почти полностью решит проблему).
Запрос к серверу
Алгоритм запроса к серверу выглядит так:
- Проверка существования 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);
}
|
Именно таким образом происходит взаимодействие с сервером.