Создание объекта XMLHttpRequest

Как уже говорилось, создание данного объекта для каждого типа браузера — уникальный процесс.

Например, для создания объекта в 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);
 }
}

Создавать запрос стало намного проще. Для примера напишем функцию, которая будет получать содержимое файла на сервере и выводить его в контейнер.

Читайте также: AJAX oсновные понятия

function ReadFile(filename, container)
{
 //Создаем функцию обработчик
 var Handler = function(Request)
 {
 document.getElementById(container).innerHTML =
                             Request.responseText;
 }
 //Отправляем запрос
 SendRequest("GET",filename,"",Handler);
}

Именно таким образом происходит взаимодействие с сервером.

1 2 3