AJAX (Asynchronous Javascript And XML) André Tavares da Silva andre.silva@udesc.br
AJAX O nome AJAX foi idealizado por Jesse James Garrett, que definiu o objeto XMLHttpRequest. O AJAX não é uma linguagem de programação, mas um método de se programar em ambiente WEB. O objetivo do AJAX é a troca de dados com um servidor, atualizando partes de uma página web sem a necessidade de atualizar tudo novamente.
Vantagens Redução de banda; Rapidez; Interatividade; Validação de dados; Interfaces mais sofisticadas.
Histórico O uso de AJAX tornou-se popular em 2005 com a Google, através das sugestões apresentadas no campo de busca do site da Google. Essa sugestão oferece uma opção de busca antes do usuário digitar todo o texto a ser procurado. Atualmente muitos sistemas utilizam AJAX: Google Maps, Gmail, Youtube, Facebook,...
Exemplo
Funcionamento
Comunicação Método Padrão Envio de formulário pelo cliente via GET ou POST; Servidor processa a informação e envia uma página HTML completa. Método AJAX Página continua ativa; É feita uma requisição ao servidor; Somente a informação necessária é enviada; A página é atualizada dinamicamente.
Modelo Assíncrono
Objeto XMLHttpRequest A chave para o funcionamento do AJAX é o objeto XMLHttpRequest; XMLHttpRequest é usado para troca de informações (dados) com o servidor nos bastidores, ou seja, é possível atualizar parte de uma página sem necessariamente carregar todo o conteúdo novamente.
Criando um objeto XMLHttpRequest Todos os navegadores modernos suportam XMLHttpRequest (IE6 usa ActiveXObject); Sintaxe para criar um objeto XMLHttpRequest: <variável> = new XMLHttpRequest(); Exemplo: xmlhttp = new XMLHttpRequest();
XMLHttpRequest Métodos open(método,url,a sync, [usuário], [ senha]) send(string) setrequestheader Descrição Especifica o método de requisição (GET ou POST), o endereço url e se a requisição async deve ser assíncrona (true) ou síncrona (false), o nome de usuário e a senha de acesso. Os dois últimos parâmetros são opcionais, conforme indicado pelo uso de colchetes. Envia a requisição do cliente para o servidor, onde o parâmetro string,que só é usado no método POST, representa os dados a serem enviados. Configura o cabeçalho http especificado com o valor fornecido.
XMLHttpRequest Métodos getresponseheader getallresponseheaders Descrição Retorna o valor da string do cabeçalho especificado. Retorna uma string com todos os cabeçalhos http especificados. Abort Interrompe o processamento atual do objeto XMLHttpRequest.
XMLHttpRequest Atributos responsetext responsexml onreadystatechange Descrição Resposta do servidor é um dado tipo string. Resposta do servidor é um dado tipo XML. Armazena o nome da função que será chamada automaticamente cada vez que a propriedade readystate mudar.
XMLHttpRequest Atributos readystate status statustext Descrição 0: requisição não inicializada 1: conexão estabelecida com o servidor 2: requisição recebida 3: processando requisição 4: requisição finalizada e resposta pronta 200: "OK" 404: Page not found (página não encontrada) Versão texto do atributo status
Exemplo <html> <head> <script> function loadxmldoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; } xmlhttp.open("get","ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="mydiv"><h2>let AJAX change this text</h2></div> <button type="button" onclick="loadxmldoc()">change Content</button> </body> </html>
Limitações Necessita de JavaScript ativado; O navegador deve permitir o uso de XMLHttpRequest; Mais difíceis de desenvolver; Conexões instáveis podem ter problemas.
Conclusão Traz aos usuários uma maior proximidade das experiências do mundo real; Produz uma maneira mais confortável de interagir com os websites; Pode ser interessante balancear seu uso com a web clássica, que também oferece possibilidades interessantes e maior facilidade de desenvolvimento.