Ejemplo básico de AJAX y ASP clásico

Código ASP clásico

¿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 sin salir de la pagina, me refiero a mandar y recibir datos sin cambiar de pagina (sin refresh).

Necesitamos 2 paginas:
1.- formulario.asp (donde estará el formulario y el cliente)

 <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>

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.

2. - consulta.asp (la pagina que se ejecuta en segundo plano)

  <%
' 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 = "user@misitio.com" then
       response.write "Si, existe"
    else
       response.write "No existe"
    end if
end if
%>

Yo lo que hice, es una verificacion muy muy simple.
Si el valor ingresado es igual a "user@misitio.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.

tags: asp, ajax toolkit, ajax tool kit, ajax y asp, asp y ajax, ajax en asp, ajax control, jquery y asp, ajax framework, asp ajax extensions, ajax software, asp, asp clasico

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por ASP TEAM. Compartimos recursos útiles de buena fe para formar una base de conocimiento en el desarrollo de aplicaciones en ASP Clásico.