ASP AJAX
AJAX se trata de actualizar partes de una página web, sin recargar toda la página.
¿Qué es AJAX?
AJAX = JavaScript asíncrono y XML.
AJAX es una técnica para crear páginas web rápidas y dinámicas.
AJAX permite que las páginas web se actualicen de forma asíncrona mediante el intercambio de pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que es posible actualizar partes de una página web sin recargar toda la página.
Las páginas web clásicas (que no usan AJAX) deben volver a cargar la página completa si el contenido debe cambiar.
Ejemplos de aplicaciones que utilizan AJAX: Google Maps, Gmail, Youtube y pestañas de Facebook.
Cómo funciona AJAX
AJAX se basa en los estándares de Internet
AJAX se basa en los estándares de Internet y utiliza una combinación de:
- Objeto XMLHttpRequest (para intercambiar datos de forma asíncrona con un servidor)
- JavaScript/DOM (para mostrar/interactuar con la información)
- CSS (para dar estilo a los datos)
- XML (usado a menudo como formato para transferir datos)
¡Las aplicaciones AJAX son independientes del navegador y de la plataforma!
Sugerencia de Google
AJAX se hizo popular en 2005 por Google, con Google Suggest.
Google Suggest utiliza AJAX para crear una interfaz web muy dinámica: cuando comienzas a escribir en el cuadro de búsqueda de Google, JavaScript envía las cartas a un servidor y el servidor devuelve una lista de sugerencias.
Comience a usar AJAX hoy
En nuestro tutorial de ASP, demostraremos cómo AJAX puede actualizar partes de una página web sin recargar toda la página. El script del servidor se escribirá en ASP.
Si desea obtener más información sobre AJAX, visite nuestro tutorial de AJAX .
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:
Ejemplo explicado
En el ejemplo anterior, cuando un usuario escribe un carácter en el campo de entrada, se ejecuta una función llamada "showHint()".
La función es activada por el evento onkeyup.
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 (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.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>
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
%>
AJAX se puede utilizar para la comunicación interactiva con una base de datos.
Ejemplo de base de datos AJAX
El siguiente ejemplo demostrará cómo una página web puede obtener información de una base de datos con AJAX:
Ejemplo
Ejemplo explicado: la página HTML
Cuando un usuario selecciona un cliente en la lista desplegable anterior, se ejecuta una función llamada "showCustomer()". La función es activada por el evento "onchange":
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
Explicación del código fuente:
Si no se selecciona ningún cliente (str.length==0), la función borra el contenido del marcador de posición txtHint y sale de la función.
Si se selecciona un cliente, la función showCustomer() ejecuta lo siguiente:
- Crear un objeto XMLHttpRequest
- Cree la función que se ejecutará cuando la respuesta del servidor esté lista
- Enviar la solicitud a un archivo en el servidor
- Observe que se agrega un parámetro (q) a la URL (con el contenido de la lista desplegable)
El archivo ASP
La página en el servidor llamado por el JavaScript anterior es un archivo ASP llamado "getcustomer.asp".
El código fuente en "getcustomer.asp" ejecuta una consulta en una base de datos y devuelve el resultado en una tabla HTML:
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>