No primeiro artigo da série
estivemos escrevendo sobre as tecnologias necessárias para a construção
de uma aplicação que utiliza AJAX para minimizar os tempos de
carregamento de página e dar mais dinamismo a uma consulta ou mesmo uma
página convencional, caso não tenha ainda tido acesso a este conteúdo
considere acessar, Introdução ao AJAX (Parte I) – Tecnologias envolvidas. Hoje iremos construir uma pequena aplicação para demonstrar o potencial desta fantástica técnica chamada AJAX.
Primeiro exemplo em AJAX
Este exemplo é para aqueles leitores que
são um pouco afoitos e desejam logo ver o que se está pesquisando em
ação. Certamente não utilizaremos as melhores técnicas de programação a
esta altura mas já teremos condições de mostrar o potencial e também
familiarizar com alguns comandos e termios relativos ao AJAX. Iremos
construir um aplicativo que faz, simplesmente, requisições AJAX enquanto
o usuário está digitando um texto em uma caixa.
Enquanto o usuário está digitando, o
script realiza uma chamada ao servido de forma assíncrona, em intervalos
regulares para tentar reconhecer o nome que está sendo digitado. O
servidor é chamado regularmente, em intervalos que se aproximam a um
segundo, por isso não precisamos nem de um botão de ação. Para você,
talvez, não veja nada de extraordinário a acontecer, pois é uma
funcionalidade simples, porém este é o primeiro exemplo e tentaremos
fazer os leitores a entender o funcionamento do AJAX como um todo. O que
de mais “impressionante” é a mensagem que vêm, automaticamente, do
servidor e é exibida automaticamente na tela, sem que precisemos
recarregar a página.
Serão necessários 3 arquivos para realizar nossa primeira “mágica”:
- index.html
- exemplo-1.js é um arquivo contendo código JavaScript que é carregado no cliente junto com o index.html. Este arquivo guardará as requisições que iremos fazer ao servidor em forma de AJAX.
- exemplo-1.php é o script que identificará se o cliente é conhecido ou não e retornará a mensagem para o index.html.
HTML
1
2
3
4
5
6
7
8
9
10
11
| <!DOCTYPE html> <html> <head> <title>Primeiro exemplo de AJAX</title> <script type="text/javascript" src="exemplo-1.js"></script> </head> <body onload='process()'> Insira seu nome para pesquisa: <input type="text" id="nome" /> <div id="resposta"></div> </body> </html> |
JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| var xmlHttp = createXmlHttpRequestObject();function createXmlHttpRequestObject() { var xmlHttp; // se estiver executando em IE if(window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } // se estiver executando no Mozilla ou outros browsers else { try { xmlHttp = new XMLHttpRequest(); } catch (e) { xmlHttp = false; } } if(!xmlHttp) alert("Error creating the XMLHttpRequest object."); else return xmlHttp;}function process() { if(xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { // requisição de fato name = encodeURIComponent(document.getElementById("nome").value); xmlHttp.open("GET", "exemplo-1.php?nome=" + name, true); xmlHttp.onreadystatechange = handleServerResponse; xmlHttp.send(null); } else setTimeout('process()', 1000);}// executed automatically when a message is received from the serverfunction handleServerResponse() { if(xmlHttp.readyState == 4) { // status 200, representa sucesso if(xmlHttp.status == 200) { xmlResponse = xmlHttp.responseXML; xmlDocumentElement = xmlResponse.documentElement; helloMessage = xmlDocumentElement.firstChild.data; // mostrando a resposta do servidor document.getElementById("resposta").innerHTML = '<i>' + helloMessage + '</i>'; setTimeout('process()', 1000); } else { alert("There was a problem accessing the server: " + xmlHttp.statusText); } }} |
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?phpheader('Content-Type: text/xml');echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';echo '<response>';// retrieve the user name$nome = $_GET['nome'];// generate output depending on the user name received from client$nomes_cad = array('JAIR', 'JOÃO');if (in_array(strtoupper($nome), $nomes_cad)) echo 'Olá, ' . htmlentities($nome) . '!';else if (trim($nome) == '') echo 'Por favor, insira seu nome!';else echo htmlentities($nome) . ', você não está cadastrado!';// close the <response> elementecho '</response>';?> |
O que aconteceu realmente?
Apenas visualizando o código e o que
aconteceu na tela do computador talvez não seja suficiente para que você
entenda o que realmente o código representa. Tentarei agora explicar
com mais detalhes o que ocorreu no código. Assim que o arquivo HTML é
carregado ele faz uma requisição AJAX através da função process() que está no arquivo javascript. Está função faz a requisição AJAX do tipo GET para o arquivo exemplo-1.php, o
qual verifica se o nome digitado está vazio, pertence ao grupo de nomes
“cadastrados” ou não, dependendo de cada uma dessas situações a
resposta será diferente. A função process() trata de chamar a função handleServerResponse para que trate a resposta e atualize a div resposta com o conteúdo da resposta, depois disso o método processe() dorme por 1000 milissegundos para que volte a ser executado.
Neste primeiro exemplo podemos ter
uma ideia do que o AJAX é capaz, este é apenas o primeiro exemplo
prático que teremos durante está série, espero que todos acompanhem e
aprendam.
 – Construindo uma aplicação simples com AJAX e PHP){kind=link}
0 comentários:
Postar um comentário