Un poco de AJAX con ASP
Bueno, muchas veces tenemos paginas muy bonitas o con buenos sistemas pero con diseño a la antiguita, es decir, con programacion que hace que cada que se carga un enlace nuevo tenemos que recargar toda la pagina, AJAX nos permite hacer cargas de partes de codigo sin tener que recargar la pagina completa y las demoras y molestias que esto genera.
Aqui les mostrare de manera muy basica pero funcional como usar esta tecnologia en nuestras paginas, ya dependera de la creatividad de cada quien el uso que le den.
Para implementar esto debemos identificar 3 cosas, un archivo .JS que llama a AJAX, segundo un boton, enlace, formulario o parte que pudiera llamar una funcion Javascript, y tercero, un DIV donde se desplegara el resultado, ahora explico cada una.
Primero y antes que nada necesitamos el archivo .JS el cual les pongo aqui ajax_loader.js para su descarga, el cual llamaremos en nuestra pagina asi:<script src="ajax_loader.js" type="text/javascript"></script>
Esto dentro de las etiquetas <head></head>
Despues necesitaremos el metodo que llame a la funcion que realizara la magia del asunto, en este caso pondre un SELECT con un codigo algo asi:
<select name="prueba" onchange="htmlData('ajax.asp', 'resultado', 'envia='+this.value)">
<option value="1">OPCION 1</option>
<option value="2">OPCION 2</option>
<option value="3">OPCION 3</option>
</select>
<div id="resultado"></div>
Donde lo que esta en negritas es lo que hay que cambiar segun sea el caso:
ajax.asp: es el archivo que procesara la informacion a publicar
resultado: es el nombre del DIV donde se mostrara el resultado
envia='+this.value: es donde podremos poner informacion que se enviara mediante el metodo GET como el que se usa en los formularios, podria ser diferente, hay que contemplar que es la informacion que recibira el archivo y que se usara para la informacion que se procese, otro ejemplo podria ser algo asi a=1&b=2&c=3, en el ejemplo de arriba se toma el valor del SELECT usando algo de JAVASCRIPT.
Resumiendo:
- Hay que generar e incrustar el archivo .JS ajax_loader.js
- Agregar el codigo que llame a la funcion htmlData() dentro de algun sistema que lo permita
- Generar el archivo ASP que procesara la informacion que se envie en la funcion anterior, en el ejemplo es ajax.asp.
Se puede ver un ejemplo aqui.
En el ejemplo de la pagina se usaron los siguientes codigos:
PAGINA ejemplo_ajax.asp (Contenedora del script y del SELECT)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de AJAX</title>
<script src="ajax_loader.js" type="text/javascript"></script>
</head>
<body>
<form action="javascript:void%200">
<select name="prueba" onchange="htmlData('ajax.asp', 'resultado', 'muestra=HOLA&prueba='+this.value)">
<option value="">SELECCIONA UNA OPCION</option>
<option value="1">OPCION 1</option>
<option value="2">OPCION 2</option>
<option value="3">OPCION 3</option>
</select>
</form>
<div id="resultado">TEXTO ORIGINAL</div>
<br /><br />
<%=now()%>
</body>
</html>
PAGINA ajax.asp (La que procesa la info a publicar)
<%Response.CharSet = "ISO-8859-1"
Response.addHeader "pragma", "no-cache"
Response.CacheControl = "Private"
Response.Expires = 0
muestra=request.QueryString("muestra")
prueba=request.QueryString("prueba")
if prueba="" then
response.write "NO HAS SELECCIONADO NADA"
else
response.write "MUESTRA:" & muestra & "<br>"
response.write "OPCION SELECCIONADA:" & prueba & "<br><br>"
response.write now()
end if
%>
Realmente es algo que me esta moviendo mucho el usar esta tecnologia por la agilidad que le da a nuestros sistemas, espero que la explicacion haya sigo clara y puedas probarlo.
Etiquetas: ajax, asp, javascript
entrada de JAM @ 9:25 PM
2 comentarios
Enlaces a esta entrada
