Ei, pessoal!

Vamos entender como é a criação do objeto XMLHttpRequest dentro de aplicações AJAX. Simbora comigo!

Teoria

A maioria de exemplos do uso de AJAX da W3 Schools (http://www.w3schools.com/ajax/ajax_examples.asp) é utilizada em questão de concursos públicos na nossa área. Então podem acessar o link informado e depois voltem a este post para entendermos o que vou falar.

Depois de ver os exemplos, podemos resumir as aplicações AJAX:

  • O usuário aciona um evento (onclick, onblur, onchange, etc);
  • A aplicação AJAX é chamada pelo acionamento do evento;
    • Ela inicializa um objeto XMLHttpRequest;
    • O objeto é configurado com um parâmetro de solicitação que inclui:
      • O ID do componente que acionou o evento; e
      • Qualquer valor que o usuário digitou;
  • O objeto XMLHttpRequest faz uma solicitação assíncrona ao servidor Web;
  • No servidor Web, um objeto (servlet ou script PHP, por exemplo) trata a solicitação;
    • Os dados podem ser recuperados de um banco de dados; e
    • É preparada uma resposta;
  • O objeto XMLHttpRequest recebe os dados utilizando uma função de chamada de retorno;
  • A aplicação AJAX atualiza o componente HTML mapeado pelo DOM da página com os dados recebidos do objeto XMLHttpRequest.
Modelo AJAX de aplicações Web

Modelo AJAX de aplicações Web

Há três formas de criação do objeto XMLHttpRequest em aplicações AJAX , uma pelo próprio XMLHttpRequest e duas pelo ActiveXObject:

  • xmlhttp = new XMLHttpRequest();
    • Para navegadores como IE7 (ou superior), Firefox, Chrome, Safari e Opera;
  • xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
    • Para navegadores como IE5 e IE6; e
  • xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”);
    • Para navegadores como IE com versões inferiores à versão 5.

É recomendável tentarmos criar o objeto XMLHttpRequest com cada uma das três formas, ou seja, se não for por uma, será por outra, até chegar ao ponto que o navegador não tenha suporte de criar esse objeto. Quanto mais formas de criação desse objeto, maior será o número de navegadores abrangidos que tenham esse suporte.

Formas de criação do objeto para trabalhar com requisições assíncronas

Formas de criação do objeto para trabalhar com requisições assíncronas

Vejam um exemplo da criação do objeto com as três tentativas:

var xmlhttp;
//-- Verificação se o browser suporta aplicações AJAX *********
try {
    //-- IE7+, Firefox, Chrome, Safari e Opera ****************
    xmlhttp = new XMLHttpRequest();
} catch(e) {
    try {
        //-- IE5 e IE6 ****************************************
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(ex) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(exc) {
            alert("Esse browser não suporta o uso do AJAX.");
            xmlhttp = null;
        }
    }
}

Entretanto, não há a obrigação de tentarmos usar as três formas. Veja o exemplo abaixo:

var xmlhttp;
try {
    xmlhttp = new XMLHttpRequest();
} catch(e) {
    alert("Esse browser não suporta o uso do AJAX.");
    xmlhttp = null;
}

No exemplo, usamos apenas uma forma. Se eu abrir a página em um navegador IE com versão inferior ao 7, minha aplicação AJAX não irá funcionar. Por isso é recomendável tentar usar todas as possibilidades.

Voltando ao código, se o navegador em que abrirmos a página não conseguir criar um objeto por nenhuma das formas, então ele não suporta aplicações AJAX e chega-se ao seguinte ponto da aplicação:

alert("Esse browser não suporta o uso do AJAX.");
xmlhttp = null;

Para testar o suporte dos navegadores ao AJAX, podemos usar o objeto window do JavaScript:

IE7+, Firefox, Chrome, Safari e Opera:

if (window.XMLHttpRequest) {
    …
}

IE versões anteriores ao 7:

if (window.ActiveXObject) {
    …
}

É importante saber identificar quais os navegadores suportam que forma de criação de um objeto XMLHttpRequest. Principalmente, os navegadores IE (Internet Explorer), pois já isso já foi motivo de questões.

Questões de concursos

[FCC 2012 TRF 2ª Região – Técnico Judiciário – Informática – Questão 58] Analise o fragmento de código a seguir presente em uma página HTML que utiliza AJAX:

var req=null;
function objeto(){
    if (window.ActiveXObject) {
    }
}

A comparação retornará true se o navegador for o

[A] Internet Explorer.

[B] Firefox.

[C] Google Chrome.

[D] Opera.

[E] Safari.

Comentários

É importante saber identificar quais os navegadores suportam que forma de criação de um objeto XMLHttpRequest. Principalmente, os navegadores IE (Internet Explorer), pois já foram motivo de questões como esta.

A questão cita um teste para saber se o navegador é um IE (Internet Explorer) em uma versão anterior ao 7. O examinador não foi tão criterioso no quesito versão. Apenas quis saber do candidato qual navegador, dentre as letras, possui suporte ao ActiveXObject. Por exclusão, ficamos com a letra A.

Gabarito: letra A.

[CONSULPLAN 2012 TSE – Analista Judiciário – Análise de Sistemas – Questão 51] AJAX, que tem por significado Asynchronous Javascript And XML, é apenas um conceito utilizado para descrever a interação de um objeto específico no lado do cliente com os scripts baseados no servidor. Conceitualmente, utiliza um objeto baseado em JavaScript, para enviar solicitações ao servidor da Web de forma assíncrona, sem ter que atualizar a página. Ao empregar esse objeto, os aplicativos Web podem receber/enviar informações ao servidor e fazer com que o servidor execute qualquer processamento que necessite ser feito, e depois alterar aspectos da página da Web dinamicamente sem que o usuário tenha que mudar de página ou alterar o local de seu foco.

Esse objeto é conhecido por

[A] XMLHttpReset.

[B] XMLHttpRequest.

[C] XMLHttpRewrite.

[D] XMLHttpResponse.

Comentários

Uma questão ótima para revisão, pois seu enunciado resume bem o AJAX e o objeto XMLHttpRequest.

Gabarito: letra B.

Cursos relacionados

Bolacha ou biscoito?

É bolacha! Não! É biscoito!

É bolacha! Não! É biscoito!

[]s e até a próxima!

_________________________
Sou eu!!!Rogério Araújo

Blog: https://rogerioaraujo.wordpress.com/
Gmail: rgildoaraujo@gmail.com
Twitter: http://twitter.com/rgildoaraujo
LinkedIn: http://br.linkedin.com/in/rgildoaraujo
Grupo de estudo no TIMasters 2.0: http://timasters.ning.com/group/dev