DOM - объект XMLHttpRequest

Объект XMLHttpRequest устанавливает среду между клиентской и серверной веб-страницей, которая может использоваться многими языками сценариев, такими как JavaScript, JScript, VBScript и другими веб-браузерами, для передачи данных XML и управления ими.

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

Синтаксис

Объект XMLHttpRequest может быть создан следующим образом:

xmlhttp = new XMLHttpRequest();

Чтобы обрабатывать все браузеры, включая IE5 и IE6, проверьте, поддерживает ли браузер объект XMLHttpRequest, как показано ниже:

if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
   xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}

Примеры загрузки XML-файла с помощью объекта XMLHttpRequest можно найти здесь.

Методы

В следующей таблице перечислены методы объекта XMLHttpRequest:

S.No. Метод и описание
1

abort()

Завершает текущий сделанный запрос.

2

getAllResponseHeaders()

Возвращает все заголовки ответа в виде строки или null, если ответа не было.

3

getResponseHeader()

Возвращает строку, содержащую текст указанного заголовка, или null, если ответ еще не получен или заголовок в ответе не существует.

4

open(method,url,async,uname,pswd)

Он используется вместе с методом Send для отправки запроса на сервер. Открытый метод определяет следующие параметры -

  • method - указывает тип запроса, например Get или Post.

  • url - это расположение файла.

  • async- указывает, как следует обрабатывать запрос. Это логическое значение. где,

    • «истина» означает, что запрос обрабатывается асинхронно без ожидания ответа Http.

    • «false» означает, что запрос обрабатывается синхронно после получения ответа Http.

  • uname - это имя пользователя.

  • pswd - это пароль.

5

send(string)

Он используется для отправки запроса, работая вместе с методом Open.

6

setRequestHeader()

Заголовок содержит пару метка / значение, на которую отправляется запрос.

Атрибуты

В следующей таблице перечислены атрибуты объекта XMLHttpRequest -

S.No. Атрибут и описание
1

onreadystatechange

Это свойство, основанное на событиях, которое устанавливается при каждом изменении состояния.

2

readyState

Это описывает текущее состояние объекта XMLHttpRequest. Есть пять возможных состояний свойства readyState:

  • readyState = 0 - означает, что запрос еще не инициализирован.

  • readyState = 1 - запрос установлен.

  • readyState = 2 - запрос отправлен.

  • readyState = 3 - запрос обрабатывается.

  • readyState = 4 - запрос выполнен.

3

responseText

Это свойство используется, когда ответ сервера представляет собой текстовый файл.

4

responseXML

Это свойство используется, когда ответ от сервера является файлом XML.

5

status

Предоставляет статус объекта запроса Http в виде числа. Например, «404» или «200».
6

statusText

Предоставляет статус объекта запроса Http в виде строки. Например, «Не найдено» или «ОК».

Примеры

Содержимое node.xml показано ниже -

<?xml version = "1.0"?>
<Company>
   <Employee category = "Technical">
      <FirstName>Tanmay</FirstName>
      <LastName>Patil</LastName>
      <ContactNo>1234567890</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Non-Technical">
      <FirstName>Taniya</FirstName>
      <LastName>Mishra</LastName>
      <ContactNo>1234667898</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
   
   <Employee category = "Management">
      <FirstName>Tanisha</FirstName>
      <LastName>Sharma</LastName>
      <ContactNo>1234562350</ContactNo>
      <Email>[email protected]</Email>
   </Employee>
</Company>

Получить конкретную информацию о файле ресурсов

В следующем примере показано, как получить конкретную информацию из файла ресурсов с помощью метода getResponseHeader () и свойства readState .

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
         <script>
            function loadXMLDoc() {
               var xmlHttp = null;
               if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
                  xmlHttp = new XMLHttpRequest();
               }
               else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
                  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               }

               return xmlHttp;
            }

            function makerequest(serverPage, myDiv) {
               var request =  loadXMLDoc();
               request.open("GET", serverPage);
               request.send(null);

               request.onreadystatechange = function() {
                  if (request.readyState == 4) {
                     document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
                  }
               }
            }
      </script>
   </head>
   <body>
      <button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
      <div id = "ID">Specific header information is returned.</div>
   </body>
</html>

Исполнение

Сохраните этот файл как elementattribute_removeAttributeNS.htm на пути к серверу (этот файл и node_ns.xml должны находиться на одном пути на вашем сервере). Мы получим результат, как показано ниже -

Before removing the attributeNS: en
After removing the attributeNS: null

Получить информацию заголовка файла ресурсов

В следующем примере показано, как получить информацию заголовка файла ресурсов с помощью метода getAllResponseHeaders() используя свойство readyState.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
      <script>
         function loadXMLDoc() {
            var xmlHttp = null;

            if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
               xmlHttp = new XMLHttpRequest();
            } else if(window.ActiveXObject) //  for Internet Explorer 5 or 6 {
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

            return xmlHttp;
         }

         function makerequest(serverPage, myDiv) {
            var request =  loadXMLDoc();
            request.open("GET", serverPage);
            request.send(null);
            request.onreadystatechange = function() {
               if (request.readyState == 4) {
                  document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
               }
            }
         }
      </script>
   </head>
   <body>
      <button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
         Click me to load the AllResponseHeaders</button>
      <div id = "ID"></div>
   </body>
</html>

Исполнение

Сохраните этот файл как http_allheader.html на пути к серверу (этот файл и node.xml должны находиться на одном пути на вашем сервере). Мы получим результат, как показано ниже (зависит от браузера) -

Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified: 
      Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent 
      Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml