O objeto XMLHttpRequest

Neste primeiro artigo o autor apresenta uma simples aplicação com o uso do objeto XMLHttpRequest para requisição de páginas via script (JavaScript) do lado do cliente.

por Robstown Holanda

Olá pessoal! Neste meu primeiro artigo vou apresentar uma simples aplicação com o uso do objeto XMLHttpRequest para requisição de páginas via script (JavaScript) do lado do cliente. A página irá carregar a outra através do objeto XMLHttpRequest apresentado mais adiante.

O objeto XMLHttpRequest permite que as requisições HTTP sejam feitas via browser, permite a comunicação assííncrona com o servidor, através de script (JavaScript), sem que seja iniciada uma nova janela , não tendo a necessidade de atualização da página, sendo possível criar páginas mais interativas.

O XMLHttpRequest foi criado pela Microsoft para o Internet Explorer 4.0, mas logo o Mozilla, Safari, Opera entre outros browser também implementaram. No Internet Explorer, o objeto XMLHttpRequest é um ActiveX, já no Mozila e no Safari é um objeto nativo.

Então vamos ao que interessa. O código mostrado abaixo é uma página simples que será carregada:

Essa página tem como nome “pagina.html” e será carregada utilizando o objetivo XMLHttpRequest que será comentado mais adiante, a página que possui o JavaScript e que possui o link responsável pelo carregamento é mostrada abaixo:

A página acima chamarei de “principal.html” é a página que fará requisição à página “pagina.html” (já apresentada), através da função alteraURL, passando como parâmetro o caminho da página a ser carregada. A primeira DIV chamada de carregando da página acima é utilizada para colocar uma figura informando que a página está sendo requisitada, já a segunda, mostrará o conteúdo da página carregada.

O script JavaScript abaixo deve ser colocado no local indicado da página "principal.html", o código possui duas funções, a função getXmlHttpRequest que retorna um objeto XMLHttpRequest e a função alteraURL que serve para carregar a página passada como parâmetro.

A variável xmlhttp da linha 3 recebe a função getXmlHttpRequest() que retorna um objeto XMLHttpRequest. O código apresentado nesta função é considerado padrão para a criação da instancia do objeto XMLHttpRequest e pode ser encontrado em outros scripts.

O evento onClick do link chama a função JavaScript alteraURL(), essa função requisita a página, passando como parâmetro o caminho da página que você deseja carregar, no nosso exemplo passamos a página “pagina.html”.

Falando agora do código da função alteraURL(), na linha 14 é colocado na DIV carregando uma figura para informar que a página está sendo carregada, uma figura como a apresentada acima (a figura e o código-fonte estão no arquivo disponível para download no final desse artigo).

Na linha 15 é chamado o método open() do objeto XMLHttpRequest, passando o método HTTP desejado (POST ou GET), além da URL a ser requisitada e uma flag indicando se a chamada é assíncrona ou não.

Como a chamada apresentada nesse exemplo é TRUE, ou seja, assíncrona, é definida um evento na linha 16 para informar quando a resposta do servidor estiver completa. A variável readyState pode ter cinco valores: