iwtraining

O termo Ajax vem de  Assíncrono JavaScript + XML, desde  quando sequer era uma tecnologia em si, mas um termo empregado em 2005 por Jesse James Garrett que descreve uma “nova” aproximação no uso de algumas tecnologias recentes juntas, incluindo: HTML ou XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, e o mais importante: objeto XMLHttpRequest.

Quando essas tecnologias são combinadas no modelo AJAX, aplicações web são capazes de fazer rapidamente atualizações na interface do usuário sem recarregar a página inteira do navegador. Isso torna a aplicação mais rápida e sensível às ações do usuário.

Embora o X em AJAX corresponda ao XML, JSON é mais utilizado que o XML atualmente devido às suas vantagens, como ser mais leve, e claro, ser parte do JavaScript.

Propriedades

 

Propriedade

Descrição

onreadystatechange

Um evento disparado a cada vez que o estado da requisição sofre alterações. Tal evento deve ser delegado a uma função própria da aplicação sendo desenvolvida.

readyState

Um valor inteiro que permite monitorar o estado atual do objeto de requisição. Possíveis valores são:

0 – Objeto ainda não inicializado, o método open() ainda não foi chamado;

1 – Carregando dados, o método send() ainda não foi chamado;

2 – Dados carregados, o método send() ainda não foi chamado mas os cabeçalhos da resposta HTTP já estão disponíveis;

3 – Modo interativo, a propriedade responseText já contém dados parciais;

4 – Operação concluída.

responseText

Resposta à requisição em formato de texto puro

responseXML

Resposta à requisição em formato XML. Pode ser tratado como um objeto DOM Document.

status

Código do status da resposta, tal como 200 (OK), 505 (erro interno do servidor) ou 404 (documento não encontrado).

statusText

O texto associado ao status da resposta HTTP.

 

Métodos

 

Método

Descrição

abort()

Cancela a requisição HTTP. Não retorna nada

getAllResponseHeaders()

Retorna todos os cabeçalhos da resposta HTTP em formato de texto pré-formatado.

getResponseHeader(string header)

Retorna o valor do cabeçalho especificado.

open(string method, string url, string asynch)

Prepara a requisição HTTP, especifica o método usado (GET, POST, etc) e se esta será ou não assíncrona. Não retorna nada (void).

send(string)

Envia a requisição HTTP. Não retorna nada (void).

setHeader(string header, string value)

Permite definir um cabeçalho de requisição. Deve ser chamado depois do método open(). Não retorna nada (void).

 

Exemplificando

Para fins de demonstração das propriedades e métodos do objeto XMLHttpRequest, um arquivo XML ou JSON se torna necessário.

XML

<?xml version="1.0" encoding="utf-8"?>
<alunos>
<aluno>
    <nome>Jaime Palilo</nome>
    <email>jp@carrossel.com.br</email>
    <idade>10</idade>
    <telefone>3333.2211</telefone>
</aluno>
<aluno>
    <nome>Marcelina Guerra</nome>
    <email>mguerra@carrossel.com.br</email>
    <idade>9</idade>
    <telefone>3333.1122</telefone>
</aluno>
<aluno>
    <nome>Jorge Del Salto</nome>
    <email>jorgeds@carrossel.com.br</email>
    <idade>11</idade>
    <telefone>3333.1234</telefone>
</aluno>
<aluno>
    <nome>Maria Joaquina</nome>
    <email>mariaj@carrossel.com.br</email>
    <idade>9</idade>
    <telefone>3333.2244</telefone>
</aluno>
</alunos>

JSON

[
    {
        "nome":"Jaime Palilo",
        "email":"jp@carrossel.com.br",
        "idade":10,
        "telefone":"3333.2211"
    },
    {
        "nome":"Marcelina Guerra",
        "email":"mguerra@carrossel.com.br",
        "idade":9,
        "telefone":"3333.1122"
    },
    {
        "nome":"Jorge Del Salto",
        "email":"jorgeds@carrossel.com.br",
        "idade":10,
        "telefone":"3333.1234"
    },
    {
        "nome":"Maria Joaquina",
        "email":"mariaj@carrossel.com.br",
        "idade":9,
        "telefone":"3333.2244"
    }
]

Efetuando uma requisição usando XMLHttpRequest

Uma vez entendidas as propriedades e métodos do objeto de requisição, os códigos que efetuam a requisição ao servidor web e obtém os resultados a serem analisados podem ser escritos sem maiores dificuldades. A listagem seguinte mostra como ler o conteúdo do arquivo XML e apresentá-lo:

var requisicao = new XMLHttpRequest();
if(requisicao){
    var url = "alunos.json";
    requisicao.onreadystatechange = processar;
    requisicao.open("GET", url, true);
    requisicao.send(null);
}
function processar(e) {
    if(requisicao.readyState == 4){
        if(requisicao.status == 200){
            document.querySelector("#resultado").innerText = requisicao.responseText;
        }
    }
}

Dúvidas?

Aluno iwtraining tem acesso a um fórum exclusivo para discutir com os instrutores e outros alunos. Acesse agora mesmo!

Share this article

Em seus 12 anos de experiência, tanto em design como em desenvolvimento, trabalhou em diversos projetos, muitos de grande porte, para clientes como Banco do Nordeste, Sebrae, Anna Pegova, Grupo Deib Otoch, dentre outros. Como designer, trabalha com o Adobe Photoshop desde a versão 3.0, além do Illustrator, sendo certificado pela Adobe (ACE e ACI) nestes softwares. Como desenvolvedor, foca seus esforços atualmente no ActionScript 3.0 (Plataforma Flash) e Objective-C (iOS). Ministra, desde 2005, treinamentos na @iwtraining para estudantes e profissionais, além de grandes empresas como Cagece, TRE, TRT, Esmaltec, Grupo Edson Queiroz, Sebrae, Senac, Correios.

Posts Relacionados

Deixe um comentário