Técnica de programação utilizada para carregar conteúdo via XML, TXT, páginas dinâmicas como PHP, JSP, JSON, (formato conhecido em javaScript), ASP, utilizando javaScript. Através do javaScript pode-se acessar qualquer conteúdo dinâmico e recuperar esse conteúdo, colocando dentro da página Html. A essa técnica dá-se o nome de Ajax.
Várias páginas Web exibem conteúdo através do Ajax. Ao acessar um email por exemplo, toda vez que aparece uma mensagem na caixa de entrada, sem a necessidade do carregamento da página, é porque foi usado o Ajax. No Google ao digitar uma palavra chave, ele automaticamente traz várias opções para aquela palavra, nesse caso também foi feito o uso de Ajax. Os mapas do Google Maps ao serem arrastados e automaticamente serem carregados, sem atualização da página, mais uma vez é através do ajax.
O Ajax foi criado pela Microsoft pelos desenvolvedores do ....2000, com a finalidade de permitir a troca de informações entre o cliente de email web e o servidor. Ainda hoje é utilizada, nos email, essa mesma funcionalidade de Ajax. Tudo acontece através do objeto XMLHttpRequest. Esse objeto não faz parte do Dom, tendo sido criado pela Microsoft; mais tarde foi implementado por outros navegadores e em 2006 a W3C publicou o primeiro rascunho com a proposta de especificação para o objeto XMLHttpRequest. Passando então a ser recomendação oficial. O X de Ajax representa XML, mas como já foi visto, pode-se carregar muito mais do que XML usando Ajax. Ajax Exemplos
Como já foi dito, através do objeto XMLHttpRequest, são feitas todas as requisições. O exemplo abaixo, aciona o usuário e mostra quando uma requisição ao servidor tiver chegado. Obs: Ajax vem de assíncrono, ou seja alguma operação vai acontecer em segundo plano. Ação síncrona é quando o evento é disparado sendo necessário o seu retorno para proceder com uma outra ação. Ex. o clique em um link e a espera do processo de submissão dessa requisição ao servidor até a página ser retornada.
No processo assícrono dispara-se um link e navega-se na página sem ser preciso parar o que se estiver fazendo. Essa é a grande vantagem do Ajax. Pode-se navegar pela página e quando o processo terminar, obtém-se a informação. Dessa forma, o tempo é bastante aproveitado. Através do evento onreadystatechange fica-se sabendo se houve uma resposta do servidor a uma requisição do cliente, se aconteceu alguma modificação no status da atualização, alguma coisa aconteceu. O status pode ter 5 valores em números: 0 indica uma comunicação não iniciada com o servidor. O status 1 indica um início de comunicação. O status 2 indica um início de requisição ao servidor. Que foi encaminhada alguma coisa para o servidor. O status 3 indica que o servidor está em processo de envio de resposta. Que já recebeu a requisição e está processando esta requisição. O status 4 indica que o servidor acabou de enviar a resposta da requisição.
No javaScript:ajax.open("POST", "ajax/arquivo.txt"); //essa função requer dois parâmetros obrigatórios. O primeiro parâmetro é o método utilizado para fazer a requisição. Existem dois métodos principais: POST para manipular grande quantidade de informações, tanto submetendo quanto recebendo e GET, para pequena quantidade de informação. O segundo parâmetro é a Url. O arquivo a ser acessado, o servidor que será acessado. Na Url pode ser utilizado um valor relativo ou absoluto para o endereço. Pode ser também o caminho completo. Ex. "http://www.adalgisa-souza.appspot.com" ou o endereço relativo.
ajax.send(null);Para receber uma resposta do servidor existe 4 propriedades:
Esta propriedade é em forma de número, que representa o status da requisição feita. Quando uma página acessada não é encontrada, aparece uma página informando o erro 404, esse número representa o status, ou seja que o documento não foi encontrado. O status 200, representa uma requisição bem sucedida.
Traz um texto representando o status. No número 200 vem com OK.
A informação é em forma de texto.
A informação é em formato de XML.
No javaScript:
window.onload = function() {
document.getElementById("botao").onclick = function(){
//status=200, statusText=OK, responseText, responseXML
//alert("Como Vai?");
var ajax = new XMLHttpRequest(); //faz todas as requisições
var r = document.getElementById("resposta");
ajax.onreadystatechange = function() {
if(ajax.readyState == 4) {
//alert(ajax.responseText);
r.appendChild(document.createTextNode(ajax.responseText));
//método createTextNode, cria um nó de texto
//pode ser feito com a propriedade r.innerHTML = ajax.responseText;
mas a forma correta é usando Dom Core Api
}
}
ajax.open("POST", "ajax/arquivo.txt");
ajax.send(null);
return false;
}
}