Учебники

DOM — объект XMLHttpRequest

Декабрь 12, 2018

Объект 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

прервать ()

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

2

getAllResponseHeaders ()

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

3

getResponseHeader ()

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

4

открытый (метод, URL, асинхронный, uname, PSWD)

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

  • Метод — указывает тип запроса, т. е. Get или Post.

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

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

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

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

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

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

5

отправить (строка)

Используется для отправки запроса, работающего в сопряжении с методом Open.

6

setRequestHeader ()

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

прервать ()

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

getAllResponseHeaders ()

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

getResponseHeader ()

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

открытый (метод, URL, асинхронный, uname, PSWD)

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

Метод — указывает тип запроса, т. е. Get или Post.

url — это местоположение файла.

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

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

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

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

pswd — это пароль.

отправить (строка)

Используется для отправки запроса, работающего в сопряжении с методом Open.

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

статус

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

6

его статус

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

onreadystatechange

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

readyState

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

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

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

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

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

readyState = 4 — запрос завершен.

responseText

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

responseXML

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

статус

его статус

Предоставляет статус объекта запроса 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 должны находиться на одном и том же пути на вашем сервере). Мы получим вывод, как показано ниже (зависит от браузера) —

54
Share: