AJAX se utiliza para crear aplicaciones más interactivas.
El siguiente ejemplo demuestra cómo la página web se comunica con el servidor web cuando el usuario escribe caracteres en el cuadro de entrada:
Cuando el usuario escribe caracteres en el cuadro de entrada de arriba, se ejecuta la función "showHint()". Esta función se activa mediante el evento "onkeyup":
<html><head><script>función showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML="" return } if (window.XMLHttpRequest) { / / Código ejecutado por los navegadores IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest() } else { //IE6, IE5; Código ejecutado por el 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();}</script></head><body><p><b>En el cuadro de entrada Introduzca un nombre:</b></p><form> Nombre: <input type="text" onkeyup="showHint(this.value)"></form><p>Valor de retorno: <span id="txtHint"></span></p></body></html>Explicación del código fuente:
Si el cuadro de entrada está vacío (str.length==0), esta función borrará el contenido del marcador de posición txtHint y saldrá de la función.
Si el cuadro de entrada no está vacío, showHint() realizará los siguientes pasos:
Crear objeto XMLHttpRequest
Cree una función que se ejecute cuando la respuesta del servidor esté lista
Enviar una solicitud a un archivo en el servidor.
Tenga en cuenta el parámetro (q) agregado al final de la URL (que contiene el contenido del cuadro de entrada)
La página del servidor llamada arriba a través de JavaScript es un archivo PHP llamado "gethint.php".
El código fuente en "gethint.php" verifica la matriz de nombres y devuelve los nombres correspondientes al navegador:
<?php// Llene la matriz con nombres $a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva" ; $a[]="Fiona";$a[]="Gunda";$ a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]=" Nina";$a[]="Ofelia";$a[]="Petunia";$ a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="Doris";$a[]="Eva";$a[]=" Evita";$a[]="Sunniva";$a[]="Tove";$a []="Unni";$a[]="Violeta";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="Wenche ";$a[]="Vicky";//Obtener q de la dirección URL de solicitud Parámetro $q=$_GET["q"];//Compruebe si hay un valor coincidente, si q>0if (strlen($q) > 0){ $hint="" for($i=0; $ i< cuenta($a); $i++) { si (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { si ($hint==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; "if ($ sugerencia == ""){ $response="sin sugerencia";}else{ $response=$hint;}//Valor de retorno de salida echo $respuesta;?>Explicación: Si JavaScript envía cualquier texto (es decir, strlen($q) > 0), sucede esto:
Encuentra nombres que coincidan con los caracteres enviados por JavaScript
Si no se encuentra ninguna coincidencia, establezca la cadena de respuesta en "sin sugerencia"
Si se encuentran uno o más nombres coincidentes, establezca la cadena de respuesta con todos los nombres
Enviar la respuesta al marcador de posición "txtHint"
Si su solicitud asincrónica necesita cruzar dominios, puede consultar: Solución de problema de dominio cruzado PHP Ajax.