DOM - objeto XMLHttpRequest

O objeto XMLHttpRequest estabelece um meio entre o lado do cliente e o lado do servidor de uma página da Web que pode ser usado por muitas linguagens de script como JavaScript, JScript, VBScript e outro navegador da Web para transferir e manipular os dados XML.

Com o objeto XMLHttpRequest é possível atualizar parte de uma página web sem recarregar toda a página, solicitar e receber os dados de um servidor após o carregamento da página e enviar os dados para o servidor.

Sintaxe

Um objeto XMLHttpRequest pode ser instanciado da seguinte maneira -

xmlhttp = new XMLHttpRequest();

Para lidar com todos os navegadores, incluindo IE5 e IE6, verifique se o navegador oferece suporte ao objeto XMLHttpRequest conforme abaixo -

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

Exemplos para carregar um arquivo XML usando o objeto XMLHttpRequest podem ser consultados aqui

Métodos

A tabela a seguir lista os métodos do objeto XMLHttpRequest -

S.No.	Método e Descrição
1	abort() Encerra a solicitação atual feita.
2	getAllResponseHeaders() Retorna todos os cabeçalhos de resposta como uma string ou nulo se nenhuma resposta foi recebida.
3	getResponseHeader() Retorna a string que contém o texto do cabeçalho especificado ou nulo se a resposta ainda não foi recebida ou o cabeçalho não existe na resposta.
4	open(method,url,async,uname,pswd) É usado em conjugação com o método Send para enviar o pedido ao servidor. O método aberto especifica os seguintes parâmetros - method - especifica o tipo de solicitação, ou seja, Get ou Post. url - é a localização do arquivo. async- indica como a solicitação deve ser tratada. É um valor booleano. Onde, 'true' significa que a solicitação é processada de forma assíncrona, sem esperar por uma resposta Http. 'false' significa que a solicitação é processada de forma síncrona após receber a resposta Http. uname - é o nome de usuário. pswd - é a senha.
5	send(string) É utilizado para enviar a solicitação trabalhando em conjugação com o método Open.
6	setRequestHeader() O cabeçalho contém o par rótulo / valor para o qual a solicitação é enviada.

Atributos

A tabela a seguir lista os atributos do objeto XMLHttpRequest -

S.No.	Atributo e descrição
1	onreadystatechange É uma propriedade baseada em evento que é ativada a cada mudança de estado.
2	readyState Isso descreve o estado atual do objeto XMLHttpRequest. Existem cinco estados possíveis da propriedade readyState - readyState = 0 - significa que a solicitação ainda não foi inicializada. readyState = 1 - o pedido está definido. readyState = 2 - o pedido é enviado. readyState = 3 - a solicitação está em processamento. readyState = 4 - o pedido é concluído.
3	responseText Esta propriedade é usada quando a resposta do servidor é um arquivo de texto.
4	responseXML Esta propriedade é usada quando a resposta do servidor é um arquivo XML.
5	status Fornece o status do objeto de solicitação Http como um número. Por exemplo, "404" ou "200".
6	statusText Fornece o status do objeto de solicitação Http como uma string. Por exemplo, "Não encontrado" ou "OK".

Exemplos

O conteúdo do node.xml é o seguinte -

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

Recupere informações específicas de um arquivo de recurso

O exemplo a seguir demonstra como recuperar informações específicas de um arquivo de recurso usando o método getResponseHeader () e a propriedade 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>

Execução

Salve este arquivo como elementattribute_removeAttributeNS.htm no caminho do servidor (este arquivo e node_ns.xml devem estar no mesmo caminho em seu servidor). Obteremos a saída conforme mostrado abaixo -

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

Recuperar informações de cabeçalho de um arquivo de recurso

O exemplo a seguir demonstra como recuperar as informações do cabeçalho de um arquivo de recurso, usando o método getAllResponseHeaders() usando a propriedade 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>

Execução

Salve este arquivo como http_allheader.html no caminho do servidor (este arquivo e node.xml devem estar no mesmo caminho em seu servidor). Obteremos a saída conforme mostrado abaixo (depende do navegador) -

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