AJAX é usado para criar aplicativos mais dinâmicos.
O exemplo a seguir mostrará como a página da web se comunica com o servidor da web quando o usuário digita caracteres na caixa de entrada: Digite letras (A - Z) na caixa de entrada abaixo:
Tente inserir a letra a na caixa de entrada:
Informações imediatas:
Quando o usuário digitar caracteres na caixa de entrada acima, a função "showHint()" será executada. Esta função é acionada pelo evento "onkeyup":
função showHint ( str ) { var xmlhttp ; se ( str . comprimento == 0 ) { documento.getElementById ( " txtHint " ) . innerHTML = " " ; se ( janela.XMLHttpRequest ) { // Código de execução do navegador IE7+, Firefox, Chrome, Opera, Safari xmlhttp = novo XMLHttpRequest ( ) ; outro { // Código de execução do navegador IE6, IE5 xmlhttp = novo ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = função ( ) { se ( xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { documento.getElementById ( " txtHint " ) . } xmlhttp.open ( " GET " , " /try/ajax/gethint.php?q="+str , true ) ;Análise do código-fonte:
Se a caixa de entrada estiver vazia str.length==0 , a função limpa o conteúdo do espaço reservado txtHint e sai da função.
Se a caixa de entrada não estiver vazia, showHint() executa as seguintes tarefas:
Criar objeto XMLHttpRequest
Executar função quando a resposta do servidor estiver pronta
Envie a solicitação para um arquivo no servidor
Observe que adicionamos um parâmetro q (com o conteúdo da caixa de entrada) ao URL
A página do servidor chamada pelo JavaScript acima é um arquivo ASP denominado "gethint.asp".
Abaixo, criamos duas versões do arquivo do servidor, uma escrita em ASP e outra em PHP.
O código-fonte em "gethint.asp" verifica um array de nomes e retorna os nomes correspondentes ao navegador:
<%response.expires=-1dim a(30)'Preencha o array com nomesa(1)="Anna"a(2)="Brittany"a(3)="Cinderela"a(4)="Diana"a(5)="Eva"a(6)="Fiona"a( 7)="Gunda"a(8)=" Hege"a(9)="Inga"a(10)="Johanna"a(11)="Kitty"a(12)="Linda"a(13)="Nina"a(14)="Ophelia" a(15)="Petúnia"a( 16)="Amanda"a(17)="Raquel"a(18)="Cindy"a(19)="Doris"a(20)="Eve"a(21)="Evita"a(22) ="Sunniva"a(23)="Tov e"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="Wenche" a(30)="Vicky"'obter o parâmetro q de URLq=ucase(request.querystring("q"))'procura todas as dicas do array se comprimento de q>0if len(q)>0 then hint="" para i=1 a 30 se q=ucase (mid(a(i),1,len(q))) then if dica="" then dica=a(i) else dica=dica & " , " & a(i) end if end if nextend if'Saída "sem sugestão" se nenhuma dica for encontrada'ou produza os valores corretos se dica = "" então resposta.write("sem sugestão")else resposta.write(dica)end if%>O código abaixo está escrito em PHP e tem o mesmo efeito que o código ASP acima.
<?php// Preenche o array com nomes$a[]="Anna";$a[]="Brittany";$a[]="Cinderela";$a[]="Diana";$a[]="Eva";$a[] ="Fiona";$a[]="Gunda";$a []="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]="Nina ";$a[]="Ofélia";$a[]="Petúnia ";$a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eve";$a[ ]="Evita";$a[]="Sunniva";$a[]="Para ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//obter o parâmetro q de URL$q=$_GET["q"];//pesquisa todas as dicas do array se comprimento de q>0if (strlen($q) > 0){ $hint=""; 0; ($hint=="") { $hint=$a[$i] } else { $hint=$hint." , ".$a[$i]; sugestão" se nenhuma dica foi encontrada// ou para os valores corretosif ($hint == ""){ $response="sem sugestão";}else{ $response=$hint;}//produz o responseecho $resposta;?>