Agora nós devemos decidir-se quando a função de AJAX deve ser executada. Nós
deixaremos a função funcionar “atrás das cenas” quando o usuário datilografa algo no
campo do texto do username:
Nossa lima AJAX-ready updated de “testAjax.htm” olha agora como está:
O capítulo seguinte faz nossa aplicação de AJAX completa com o script de “time.asp”.
AJAX – O Script Server-Side
palavras: Cada vez que o usuário move seu dedo longe de uma chave de teclado dentro
do campo da entrada, o showHint da função está chamado.
Exemplo explicado - a função do showHint()
A função do showHint() é uma função muito simples do Javascript colocada na seção
do da página HTML.
A função contem o seguinte código:
function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="gethint.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }
A função executa cada vez que um caráter é incorporado ao campo da entrada.
Se houver alguma entrada no campo do texto (str.length > 0) a função executa o
seguinte:
Define o URL (nome do arquivo) para emitir ao usuário
Adiciona um parâmetro (q) ao URL com o índice do campo da entrada
Adiciona um número aleatório para impedir que o usuário use um
arquivo cached
Cría um objeto de XMLHTTP , e diz o objeto para executar uma função
chamada stateChanged quando uma mudança é provocada
abre o objeto de XMLHTTP com o URL dado.
Emite um pedido do HTTP ao usuário
Se o campo da entrada estiver vazio, a função cancela simplesmente o índice
do placeholder do txtHint.
Exemplo explicado - a função de GetXmlHttpObject()
O exemplo acima chama uma função chamada GetXmlHttpObject().
A finalidade da função é resolver o problema de criar objetos diferentes de xmlHttp
para browsers diferentes.
A função é a listada abaixo:
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
Exemplo explicado - A função stateChanged()
A função stateChanged() contem o seguinte código:
function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }
A função stateChanged() executa cada vez que o estado do objeto de XMLHTTP
muda.
Quando o estado mudar a 4 (“completo”), o índice do placeholder do txtHint está
enchido com o texto da resposta.
AJAX sugere o código fonte
Código fonte de AJAX para sugerir o exemplo
O código fonte abaixo pertence ao exemplo de AJAX na página precedente.
Você pode cópia e colá-lo, e tenta-o você mesmo.
O HTML da página de AJAX
Este é o HTML page. Contem um formulário simples do HTML e uma ligação a um
Javascript.
**O cliente info será listado aqui** .
Como você pode ver é justo um formulário simples do HTML com uma gota
encaixota para baixo “Customer”.
O parágrafo abaixo do formulário contem um “txtHint chamado div”. O div é
usado como um placeholder para o info recuperado do web server.
Quando o usuário seleciona dados, uma função chamada “ showCustomer () ”
está executada. A execução da função é provocada pelo evento do
“ onchange ”. Em outras palavras: Cada vez que a mudança que do usuário o
valor na gota encaixota para baixo, o showCustomer da função é chamado.
O código do Javascript é alistado abaixo.
O AJAX JavaScript
Este é o código do Javascript armazenado no arquivo “selectcustomer.js”:
var xmlHttp
function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); }
function stateChanged() {
if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; } }
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
A página do usuário de AJAX
A página do usuário chamada pelo Javascript, é um arquivo simples do ASP chamada
“getcustomer.asp”.
A página é escrita em VBScript para um usuário de informação do Internet (IIS).
Poderia fàcilmente ser reescrita em PHP, ou em alguma outra língua do usuário.
O código funciona um SQL de encontro a uma base de dados e retorna o resultado
como uma tabela do HTML:
response.expires=- sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID=" sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection") conn.Provider="Microsoft.Jet.OLEDB.4.0" conn.Open(Server.Mappath("/db/northwind.mdb")) set rs = Server.CreateObject("ADODB.recordset") rs.Open sql, conn
response.write("
") do until rs.EOF for each x in rs.Fields response.write("
" & x.name & "
") response.write("
" & x.value & "
")
User info will be listed here.
Exemplo explicado - o formulário do HTML
Como você pode ver é justo um formulário simples do HTML com uma gota encaixota
para baixo “usuários chamados” com nomes e a “identificação” da base de dados como
valores da opção.
O parágrafo abaixo do formulário contem um “txtHint chamado div”. O div é usado
como um placeholder para o info recuperado do web server.
Quando o usuário seleciona dados, uma função chamada “ showUser() ” está executada.
A execução da função é provocada pelo evento do “ onchange ”.
Em outras palavras: Cada vez que o usuário muda o valor do campo select, o
showUser() da função está chamado.
O JavaScript
Este é o código do Javascript armazenado no arquivo “selectuser.js”:
var xmlHttp function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="getuser.php" url=url+"?q="+str url=url+"&sid="+Math.random() xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) } function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("txtHint").innerHTML=xmlHttp.responseText } } function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer