Ajax Y Asp. Ejemplo De Simple De Uso.
|
" Hay la misma diferencia entre un sabio y un ignorante que entre un hombre vivo y un cadáver " - Aristóteles -    |
Computerfacil.com |
 Chat
 Fotos
 Últimos Posts
 Sin Respuesta
 Ayuda
 Búsqueda
 Miembros
 Calendario
|
| Bienvenido, invitado ( Identificarse | Registrarse ) | Reenviar mensaje de validación |
|
|
Forista del Mes: amateos1404 
|
Foros de Informatica -> Sistemas, Software y Hardware -> Lenguajes de Programación -> Programación en ASP   |
Ajax Y Asp. Ejemplo De Simple De Uso.| dejavi |
 Publicado: Aug 29 2007, 04:00 PM
|
 Tera user  Grupo: Moderadores Mensajes: 3.733 Miembro nº: 17.695 Registrado: 18-January 07  |
290807.
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.  --------------------  |
 
|
0 usuario(s) está(n) leyendo esta discusión (0 invitado(s) y 0 usuario(s) anónimo(s))
0 miembro(s):
 |
|
|
|
|
Invision Power Board © 2007 Licensed to: ComputerFacil.com - IPS, Inc.