AJAX y ASP. Ejemplo de simple de uso.
Ante todo, explico brevemente que es AJAX, para que sirve, y como se puede usar.
- ¿Que es AJAX?
El significado de AJAX es: Asynchronous JavaScript and XML
Esto no dice mucho, pero en pocas palabras, es una técnica de desarrollo web, que utiliza otras tecnologias que
ya existen: HMTL, JavaScript y XML.
- ¿Para que sirve AJAX?
Mediante esta técnica, se puede manejar e intercambiar datos de forma desincronizada con nuestro servidor web.
Lo que quiero decir es que podriamos hacer una operacion en ASP (PHP tambien por supuesto) sin salir de la pagina,
me refiero a mandar y recibir datos sin cambiar de pagina (sin refresh).
Para que se comprenda mejor lo que intento explicar, veamos ejemplos existentes hoy en día...
- Google Suggest
A medida que escribimos en el formulario de busqueda, google nos "sugiere" los terminos mas buscados en una lista
desplegable. Esa información que se muestra, son consultas permanentes a la base de datos de google, pero en segundo
plano, logrando mantener al cliente (nosotros) en la misma pagina.
- Google Maps
Como pueden ver en google maps, al mover el mapa con el mouse, los mapas que no estaban en la pantalla van apareciendo
y todo ese trabajo, sin cambiar al cliente de pagina (no nos vamos de la pagina y volvemos con la nueva información).
En el momento que movemos los mapas, google nos va enviando los mapas que estamos necesitando ver.
A continuación voy a intentar hacer una explicación de cómo lograr este tipo de cosas, pero por supuesto con un
ejemplo mucho mas sencillo, en el cual al cliente se le presentará un formulario, donde debe ingresar su email.
La operación será verificar si ese mail existe (en la teorica base de datos, esto lo haremos en segundo plano) y por último
informarle del resultado de la consulta (si su mail fue encontrado o no).
Necesitamos 2 paginas:
- formulario.asp (donde estará el formulario y el cliente)
- consulta.asp (la pagina que se ejecuta en segundo plano)
Ahora les paso los dos codigos enteros, mas adelante explico las partes que corresponden.
formulario.asp
<html>
<head>
<script language="javascript" type="text/javascript">
function handleHttpResponse() {
if (http.readyState == 4) {
if (http.status == 200) {
if (http.responseText.indexOf('invalid') == -1) {
// Armamos un array, usando la coma para separar elementos
results = http.responseText.split(",");
document.getElementById("campoMensaje").innerHTML = results[0];
enProceso = false;
}
}
}
}
function verificaUsuario() {
if (!enProceso && http) {
var valor = escape(document.getElementById("emailUsuario").value);
var url = "consulta.asp?emailUsuario="+ valor;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
enProceso = true;
http.send(null);
}
}
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) { xmlhttp = false; }
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) { xmlhttp = false; }
}
return xmlhttp;
}
var enProceso = false; // lo usamos para ver si hay un proceso activo
var http = getHTTPObject(); // Creamos el objeto XMLHttpRequest
</script>
</head>
<body>
<form action="post">
Ingrese su email:
<input type="text" name="emailUsuario" id="emailUsuario">
<INPUT type="Button" value="Verificar si existe" onclick="verificaUsuario();">
</form>
<div id="campoMensaje"></div>
</body>
</html>
|
consulta.asp
<%
' me fijo si viene algun valor en el querystring, si no viene nada, no hago nada
if request.querystring("emailUsuario") <> "" then
email = request.querystring("emailUsuario")
if email = "webmaster@dominio.com" then
response.write "Si, existe"
else
response.write "No existe"
end if
end if
%>
|
- Explicación formulario.asp
Hay 3 funciones de javascript:
- getHTTPObject();
Esta función, lo que hace, es crear el objeto XMLHttp que necesitamos para usar AJAX.
Puede parecer la más complicada, pero es la que menos nos debe preocupar. Siempre que usemos esta técnica,
necesitaremos un objeto de ese tipo, y esa función es capaz de crearlo.
- verificaUsuario();
Esta si es más importante para la comprension de lo que estamos haciendo.
Lo que hacemos aqui, es crear una variable llamada url que tiene la pagina de destino y pegarle
(concatenación) el valor del campo de texto (donde el cliente escribe el mail).
Luego le pasamos los parametros al metodo http.open() (notar que la variable url es parametro)
En la linea siguiente, le asignamos al evento onreadystatechange la función handleHttpResponse(), que está
explicada más adelante.
Por último disparamos el proceso llamando al metodo http.send()
- handleHttpResponse();
Esta es la funcion asociada al evento onreadystatechange.
Lo que hace es verificar si el proceso fue finalizado con éxito y en ese caso, mostrar el resultado.
La linea que dice: results = http.responseText.split(",");
Lo que hace es crear un array en javascript usando la coma como separador de elementos.
El primer elemento será results[0], el segundo results[1], y asi ...
La linea que dice: document.getElementById("campoMensaje").innerHTML = results[0];
Es la que se ocupa de escribir en la pagina actual, el valor de la respuesta. Estamos cambiando dinamicamente
el contenido de la pagina.
- Explicacion consulta.asp
Yo lo que hice, es una verificacion muy muy simple.
Si el valor ingresado es igual a webmaster@dominio.com entonces devuelvo "Si, Existe"
En caso de no ser verdad, devuelvo "No Existe"
En esta página se podrian hacer conexiones a bases de datos, buscar informacion en tablas, como
en un script asp tradicional.
Si tienen más dudas sobre AJAX y ASP pueden hacer sus consultas en el foro del sitio
|
