AJAX é usado para criar aplicativos mais interativos.
O exemplo a seguir demonstra como a página da web se comunica com o servidor da web quando o usuário digita caracteres na caixa de entrada:
Quando o usuário digita caracteres na caixa de entrada acima, a função "showHint()" é executada. Esta função é acionada pelo evento "onkeyup":
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; / Código executado pelos navegadores IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest() } else { //IE6, IE5; Código executado pelo navegador xmlhttp=new ActiveXObject("Microsoft.XMLHTTP" } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint" .innerHTML=xmlhttp.responseText; xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send();}</script></head><body><p><b>Na caixa de entrada Insira um nome:</b></p><form> Nome: <input type="text" onkeyup="showHint(this.value)"></form><p>Valor de retorno: <span id="txtHint"></span></p></body></html>Explicação do código-fonte:
Se a caixa de entrada estiver vazia (str.length==0), esta função limpará o conteúdo do espaço reservado txtHint e sairá da função.
Se a caixa de entrada não estiver vazia, showHint() executará as seguintes etapas:
Criar objeto XMLHttpRequest
Crie uma função que seja executada quando a resposta do servidor estiver pronta
Envie uma solicitação para um arquivo no servidor
Observe o parâmetro (q) adicionado ao final da URL (contendo o conteúdo da caixa de entrada)
A página do servidor chamada acima através de JavaScript é um arquivo PHP chamado "gethint.php".
O código fonte em "gethint.php" verifica o array de nomes e retorna os nomes correspondentes ao navegador:
<?php// Preencha 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[]="Tove";$a []="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche ";$a[]="Vicky";//Obtém q do endereço URL da solicitação Parâmetro $q=$_GET["q"];//Verifica se existe um valor correspondente, if q>0if (strlen($q) > 0){ $hint="" for($i=0; $ i< contagem($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint==" ") { $hint=$a[$i] } else { $hint=$hint." , ".$a[$i]; " if ($ dica == ""){ $response="sem sugestão";}else{ $response=$hint;}//Valor de retorno de saída echo $response;?>Explicação: Se o JavaScript enviar qualquer texto (ou seja, strlen($q) > 0), isso acontece:
Encontre nomes que correspondam aos caracteres enviados por JavaScript
Se nenhuma correspondência for encontrada, defina a string de resposta como "sem sugestão"
Se um ou mais nomes correspondentes forem encontrados, defina a string de resposta com todos os nomes
Envie a resposta para o espaço reservado "txtHint"
Se sua solicitação assíncrona precisar cruzar domínios, você pode conferir: Solução de problema de domínio cruzado PHP Ajax.