Ejemplo de AJAX ASP
AJAX se utiliza para crear aplicaciones más interactivas.
Ejemplo de AJAX ASP
El siguiente ejemplo demostrará cómo una página web puede comunicarse con un servidor web mientras un usuario escribe caracteres en un campo de entrada:
Ejemplo
Start typing a name in the input field below:
Suggestions:
First name:
Ejemplo explicado
En el ejemplo anterior, cuando un usuario escribe un carácter en el campo de entrada, showHint()
se ejecuta una función llamada.
La función es activada por el onkeyup
evento.
Aquí está el código:
Ejemplo
<p>Start typing a name in the input field below:</p>
<p>Suggestions: <span id="txtHint"></span></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xmlhttp.open("GET", "gethint.asp?q=" + str);
xmlhttp.send();
}
}
</script>
Explicación del código:
Primero, verifique si el campo de entrada está vacío (str.length == 0). Si es así, borre el contenido del marcador de posición txtHint y salga de la función.
Sin embargo, si el campo de entrada no está vacío, haga lo siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función que se ejecutará cuando la respuesta del servidor esté lista
- Envíe la solicitud a un archivo ASP (gethint.asp) en el servidor
- Observe que se agrega el parámetro q gethint.asp?q="+str
- La variable str contiene el contenido del campo de entrada.
El archivo ASP - "gethint.asp"
El archivo ASP comprueba una matriz de nombres y devuelve los nombres correspondientes al 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
%>