AJAX se utiliza para crear aplicaciones más dinámicas.
El siguiente ejemplo le mostrará cómo la página web se comunica con el servidor web cuando el usuario escribe caracteres en el cuadro de entrada: Escriba letras (A - Z) en el cuadro de entrada a continuación:
Intente ingresar la letra a en el cuadro de entrada:
Información inmediata:
Cuando el usuario escribe caracteres en el cuadro de entrada de arriba, se ejecutará la función "showHint()". Esta función se activa mediante el evento "onkeyup":
función mostrar pista ( str ) { var xmlhttp ; si ( str . longitud == 0 ) { documento.getElementById ( " txtHint " ) internalHTML = " " ; si ( ventana . XMLHttpRequest ) { // Código de ejecución del navegador IE7+, Firefox, Chrome, Opera, Safari xmlhttp = nuevo Solicitud XMLHttp ( ) ; demás { // código de ejecución del navegador IE6, IE5 xmlhttp = nuevo ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = función ( ) { si ( xmlhttp . readyState == 4 && xmlhttp . estado == 200 ) { documento.getElementById ( " txtHint " ) . } xmlhttp open ( " OBTENER " , " /try/ajax/gethint.php?q= " + str , verdadero ) ;Análisis del código fuente:
Si el cuadro de entrada está vacío str.length==0 , la función borra el contenido del marcador de posición txtHint y sale de la función.
Si el cuadro de entrada no está vacío, showHint() realiza las siguientes tareas:
Crear objeto XMLHttpRequest
Ejecutar la función cuando la respuesta del servidor esté lista
Enviar la solicitud a un archivo en el servidor.
Tenga en cuenta que agregamos un parámetro q (con el contenido del cuadro de entrada) a la URL
La página del servidor llamada por el JavaScript anterior es un archivo ASP llamado "gethint.asp".
A continuación, creamos dos versiones del archivo del servidor, una escrita en ASP y la otra en PHP.
El código fuente en "gethint.asp" verifica una serie de nombres y devuelve los nombres correspondientes al navegador:
<%response.expires=-1dim a(30)'Rellenar matriz con nombresa(1)="Anna"a(2)="Bretaña"a(3)="Cenicienta"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)="Ofelia" a(15)="Petunia"a( 16)="Amanda"a(17)="Raquel"a(18)="Cindy"a(19)="Doris"a(20)="Eva"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"'obtener el parámetro q de URLq=ucase(request.querystring("q"))'busca todas las sugerencias de la matriz si la longitud de q>0if len(q)>0 luego sugerencia="" para i=1 a 30 si q=ucase (mid(a(i),1,len(q))) entonces si sugerencia="" entonces sugerencia=a(i) else sugerencia=sugerencia & ", " & a(i) end if end if nextend if'Salida "sin sugerencia" si no se encontró ninguna sugerencia o genera los valores correctos si sugerencia="" entonces respuesta.escribir("sin sugerencia")de lo contrario respuesta.escribir(sugerencia)finalizar si%>El siguiente código está escrito en PHP y tiene el mismo efecto que el código ASP anterior.
<?php// Llenar la matriz con nombres$a[]="Anna";$a[]="Bretaña";$a[]="Cenicienta";$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[]="Para ve";$a[]="Unni";$a[]="Violeta";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//obtener el parámetro q de URL$q=$_GET["q"];//busca todas las sugerencias de la matriz si la longitud de q>0if (strlen($q) > 0){ $hint="" for($i=); 0; $i<count($a); $i++) { si (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { si ($hint=="") { $hint=$a[$i] } else { $hint=$hint." , ".$a[$i]; sugerencia" si no se encontró ninguna pista// o a los valores correctosif ($hint == ""){ $response="sin sugerencia";}else{ $response=$hint;}//genera la respuestaecho $respuesta;?>