DOM - obiekt XMLHttpRequest

Obiekt XMLHttpRequest ustanawia medium między stroną klienta a serwerem strony internetowej, które może być używane przez wiele języków skryptowych, takich jak JavaScript, JScript, VBScript i inne przeglądarki internetowe, do przesyłania i manipulowania danymi XML.

Za pomocą obiektu XMLHttpRequest można aktualizować część strony internetowej bez przeładowywania całej strony, żądać i odbierać dane z serwera po załadowaniu strony i wysyłać dane na serwer.

Składnia

Obiekt XMLHttpRequest można utworzyć w następujący sposób -

xmlhttp = new XMLHttpRequest();

Aby obsłużyć wszystkie przeglądarki, w tym IE5 i IE6, sprawdź, czy przeglądarka obsługuje obiekt XMLHttpRequest, jak poniżej -

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");
}

Przykłady ładowania pliku XML za pomocą obiektu XMLHttpRequest można znaleźć tutaj

Metody

Poniższa tabela zawiera listę metod obiektu XMLHttpRequest -

S.No.	Metoda i opis
1	abort() Kończy bieżące żądanie.
2	getAllResponseHeaders() Zwraca wszystkie nagłówki odpowiedzi jako ciąg lub wartość null, jeśli nie otrzymano żadnej odpowiedzi.
3	getResponseHeader() Zwraca ciąg zawierający tekst określonego nagłówka lub wartość null, jeśli odpowiedź nie została jeszcze odebrana lub nagłówek nie istnieje w odpowiedzi.
4	open(method,url,async,uname,pswd) Jest używany w połączeniu z metodą Send w celu wysłania żądania do serwera. Metoda open określa następujące parametry - method - określa rodzaj żądania, np. Get lub Post. url - jest to lokalizacja pliku. async- wskazuje, jak należy obsłużyć żądanie. Jest to wartość logiczna. gdzie, „prawda” oznacza, że żądanie jest przetwarzane asynchronicznie, bez oczekiwania na odpowiedź HTTP. „fałsz” oznacza, że żądanie jest przetwarzane synchronicznie po otrzymaniu odpowiedzi HTTP. uname - to nazwa użytkownika. pswd - to hasło.
5	send(string) Służy do wysyłania żądania działającego w koniugacji z metodą Open.
6	setRequestHeader() Nagłówek zawiera parę etykieta / wartość, do której wysyłane jest żądanie.

Atrybuty

Poniższa tabela zawiera listę atrybutów obiektu XMLHttpRequest -

S.No.	Atrybut i opis
1	onreadystatechange Jest to właściwość oparta na zdarzeniach, która jest włączana przy każdej zmianie stanu.
2	readyState Opisuje aktualny stan obiektu XMLHttpRequest. Istnieje pięć możliwych stanów właściwości readyState - readyState = 0 - oznacza, że żądanie nie zostało jeszcze zainicjowane. readyState = 1 - żądanie jest ustawione. readyState = 2 - żądanie zostało wysłane. readyState = 3 - żądanie jest przetwarzane. readyState = 4 - wniosek jest zakończony.
3	responseText Ta właściwość jest używana, gdy odpowiedź z serwera jest plikiem tekstowym.
4	responseXML Ta właściwość jest używana, gdy odpowiedź z serwera jest plikiem XML.
5	status Podaje stan obiektu żądania HTTP jako liczbę. Na przykład „404” lub „200”.
6	statusText Podaje stan obiektu żądania HTTP jako ciąg. Na przykład „Nie znaleziono” lub „OK”.

Przykłady

Zawartość node.xml jest jak poniżej -

<?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>

Pobierz określone informacje o pliku zasobów

Poniższy przykład pokazuje, jak pobrać określone informacje z pliku zasobów za pomocą metody getResponseHeader () i właściwości 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>

Wykonanie

Zapisz ten plik jako elementattribute_removeAttributeNS.htm w ścieżce serwera (ten plik i node_ns.xml powinny znajdować się w tej samej ścieżce na serwerze). Otrzymamy dane wyjściowe, jak pokazano poniżej -

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

Pobierz informacje nagłówka pliku zasobów

Poniższy przykład ilustruje sposób pobierania informacji nagłówka pliku zasobów przy użyciu metody getAllResponseHeaders() korzystanie z nieruchomości 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>

Wykonanie

Zapisz ten plik jako http_allheader.html na ścieżce serwera (ten plik i node.xml powinny znajdować się w tej samej ścieżce na serwerze). Otrzymamy dane wyjściowe, jak pokazano poniżej (w zależności od przeglądarki) -

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