Los últimos tutoriales de desarrollo web
 

AJAX Ejemplo ASP


AJAX se utiliza para crear aplicaciones más interactivas.


AJAX ASP Ejemplo

El siguiente ejemplo demostrará cómo una página web puede comunicarse con un servidor web, mientras que unos caracteres de tipo de usuario en un campo de entrada:

Ejemplo

Start typing a name in the input field below:

First name:

Suggestions:



ejemplo Explicación

En el ejemplo anterior, cuando un usuario escribe un carácter en el campo de entrada, una función llamada "showHint()" se ejecuta.

La función se activa por el onkeyup evento.

Aquí está el código HTML:

Ejemplo

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        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>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Inténtalo tú mismo "

Código explicación:

En primer lugar, comprobar si el campo de entrada está vacía (str.length == 0) . Si es así, borrar el contenido de la txtHint marcador de posición y salir de la función.

Sin embargo, si el campo de entrada no está vacía, haga lo siguiente:

  • Crear un XMLHttpRequest objeto
  • Cree la función a ejecutar cuando la respuesta del servidor está listo
  • Enviar la solicitud fuera de un archivo ASP (gethint.asp) en el servidor
  • Observe que q se añade el parámetro gethint.asp?q="+str
  • La variable str mantiene el contenido del campo de entrada

El archivo ASP - "gethint.asp"

El archivo ASP comprueba una serie de nombres, y devuelve el correspondiente name(s) en el navegador:

<%
response.expires=-1
dim a(30)
'Fill up array with names
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"

'get the q parameter from URL
q=ucase(request.querystring("q"))

'lookup all hints from array if length of q>0
if len(q)>0 then
  hint=""
  for i=1 to 30
    if q=ucase(mid(a(i),1,len(q))) then
      if hint="" then
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if

'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then
  response.write("no suggestion")
else
  response.write(hint)
end if
%>