ASP - AJAX y ASP

AJAX se utiliza para crear aplicaciones más dinámicas.

Ejemplo AJAX ASP

El siguiente ejemplo mostrará cómo la página web se comunica con el servidor cuando el usuario ingresa caracteres en el cuadro de entrada:

Ejemplo

Escribe las letras (A - Z) en el cuadro de entrada siguiente:

Nombre:

Consejo:

Prueba el código fuente

Ejemplo práctico - Página HTML

Cuando el usuario ingresa caracteres en el cuadro de entrada superior, se ejecuta la función "showHint()". Esta función se activa por el evento "onkeyup":

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Código para IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
de lo contrario
  // Código para IE6, IE5
  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.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Por favor, ingrese caracteres en inglés en el cuadro de entrada:</b></p>
<form>
Nombre: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Sugerencias: <span id="txtHint"></span></p>
</body>
</html>

Explicación del código fuente:

Si el cuadro de entrada está vacío (str.length==0), la 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() ejecutará los siguientes pasos:

  • Crear un objeto XMLHttpRequest
  • Crear una función que se ejecute cuando la respuesta del servidor esté lista
  • Enviar una solicitud al archivo en el servidor
  • Por favor, asegúrese de agregar los parámetros al final de la URL (q) (que contiene el contenido del cuadro de entrada)

Archivo ASP

Esta página de servidor de JavaScript llamada "gethint.asp" es un archivo ASP.

El código fuente en "gethint.asp" verificará el array de nombres y luego devolverá los nombres correspondientes al navegador:

<%
response.expires=-1
dim a(30)
rellenar el array con nombres
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
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)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
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 desde la URL
q=ucase(request.querystring("q"))
si la longitud q>0, buscará todas las sugerencias en el array
si len(q)>0 entonces
  hint=""
  para i=1 hasta 30
    si q=ucase(mid(a(i),1,len(q))) entonces
      si hint="" entonces
        hint=a(i)
      de lo contrario
        hint=hint & " , " & a(i)
      fin si
    fin si
  siguiente
fin si
si no se encuentra una sugerencia, se mostrará "sin sugerencias"
o mostrar los valores correctos
si hint="" entonces
  response.write("sin sugerencias")
de lo contrario
  response.write(hint)
fin si
%>

Explicación del código fuente:

Si JavaScript envía cualquier texto (es decir, strlen($q) es mayor que 0), ocurrirá lo siguiente:

  • Buscar coincidencias de caracteres de nombre desde JavaScript
  • Si no se encuentra coincidencia, configurar la cadena de respuesta como "no suggestion"
  • Si se encuentra un o varios nombres coincidentes, configurar la cadena de respuesta con todos los nombres
  • Enviar la respuesta a la marca de posición "txtHint"