AJAX con ASP
El otro d�a en el art�culo de AJAX, promet� explicar como usarlo con ASP, pues bien, voy a poner un peque�o ejemplo que es el que yo use en su d�a para aprenderlo, el c�digo que pongo no es m�o pero no recuerdo de donde lo obtuve, solo se que a partir de este ejemplo pude desarrollar muchas cosas interesantes.
Despu�s del c�digo les voy a explicar algunos peque�os trucos que yo aprend�.
Ejemplo:
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” onBlur=”verificaUsuario();”>
<INPUT type=”Button” value=”Verificar si existe” onclick=”verificaUsuario();”>
</form>
<div id=”campoMensaje”>
aqui va el mensaje
</div>
</body>
</html>
consulta.asp
<style type=”text/css”>
<!–
.Estilo1 {color: #FF0000}
.Estilo2 {
color: #000000;
font-weight: bold;
}
–>
</style>
<%if request.querystring(”emailUsuario”) <> “” then’ me fijo si viene algun valor en el querystring, si no viene nada, no hago nada
email = request.querystring(”emailUsuario”)
if email = “a” then%>
<span class=”Estilo1″>Si, existe</span>
<%else%>
<span class=”Estilo2″>No existe</span>
<% end if
end if%>
Trucos:
- En la 1� funci�n de Java Script no es necesario realizar un Split sobre la respuesta, si nos interesa, podemos obtener todo el HTML de golpe y devolverlo. S�lo es necesario esta l�nea: document.getElementById(”campoMensaje”).innerHTML =http.responseText, de este modo ser� mucho m�s comodo trabajar.
- El elemento campoMensaje, aqu� se usa un DIV, pero podr�a ser cualquier otro tag de HTML, como un<td>, o un select, siempre pongamosle un ID �nico.
- Aprovechemos la funci�n que realiza el evento del click o update para realizar una validaci�n de los datos insertados, as� tendremos dos validaciones, la del usuario, y luego en el servidor. Mucho m�s seguro, no?
- Podemos poner un wait, si la consulta va a llevarnos tiempo, ejemplo: function wait() {
document.getElementById(”colas”).innerHTML = “<br><br><img src=’/images/wait.gif’><br>Buscando..”;
}, de este modo queda m�s profesional y al cliente ya sabe que su petici�n esta en curso. S�lo tenemos que poner el wait dentro de verificarUsuario de nuestro ejemplo, la 1� l�ne despu�s del IF. - Aprendan algo m�s de Java Script les puede ser muy �til para realizar todo tipo de operaciones en el mismo cliente.
- Con Ajax, yo he creado desde una paginaci�n, a calculos estad�sticos,validaci�n de usuarios…., realmente es muy vers�til.
Les muestro una Galer�a de fotos realizada integramente con AJAX y tecnolog�a ASP: Galer�a
Si se fijan, la carga de los thumbs, es toda en ajax, y tiene un peque�o wait. Tambi�n la paginaci�n es en Ajax, y la carga de las fotos.
Si tienen dudas de como hice alguna cosa, no duden, y pondr� el c�digo
Saludos
También te puede interesar:
31 Comments »
RSS feed for comments on this post. TrackBack URL
[...] Bueno validaciones para Ajax, quizás no es lo más correcto, son validaciones para Java Script, pero es lo que recomendaba recientemente en el post de AJAX + ASP [...]
hola
te invito a que visites el foro y la galeria de mi pagina que esta en la version beta 2. todo es asp y ajax 100%%%
Ostrás bastante wapa :)
realmente se pueden hacer maravillas, que es un proyecto particular, o para una empresa?o por ocio, saludos, gracias por la colaboracion
hi
Master esta muy bueno ese codigo y tambien tu galeria. Viendo el codigo de tu galeria ahora entiendo mucho mejor esta tecnologia. Gracias por compartirlo
Saludos desde Guadalajara, Jalisco, Mexico
Jesus
me alegro muchisimo te resulte util :)
[...] enero 2nd, 2007 Con esta librería de JavaScript nos facilitarán muchísimo la vida! lo mejor es que es compatible con lo que ya expliqué. [...]
Brother, esta chevere el sitio, pero todavía no entiendo bien el uso del XML de Ajax, me ayudarías bastante si compartieras el codigo un poco mas completo, talvez puedes enviarme los fuentes a esta dir: xx_tear_xx@hotmail.com
Gracias
Alexis
hola, ver código fuente, y ves todo el source de javascript xd
hee ya se de donde lo sacaste http://soloasp.com.ar/vereje.asp?eje=56 es bueno dar credito a los autores.
Saludos
hola, pues es identico, la verdad me lo pasaron por mail si me confimas q ese es el autor no hay problema ;)
Hola! soy nuevo en esto por eso quiero saber que quiere decir :
“results = http.responseText.split(”,”);
document.getElementById(”campoMensaje”).innerHTML = results[0];”
Se que esta cogiendo la respuesta y la escribe en bloque div campoMensaje.Y se que results es un array. Pero si yo quiero asignar a otro bloque div results[1] porque he hecho una consulta me escribe ‘undefined’ porque?
Gracias de antemano!!
hola
el split divide los resultados en un array, pero yo no usaria el split, es mas nunca lo uso
haz esto:
document.getElementById(”campoMensaje”).innerHTML = http.responseText
asi, pones en el div todo el valor devuelto, es lo mas util y creo q lo mejor….
Gracias! Eres un crack
de nada;)
Ola! me gustaria hacerte una consulta no es sobre este tema pero bueno, si no quieres no respondas.
Es que he cogido este ejercicio y estoy cambiandolo un poquito y me gustaria saber que boton han pulsado es decir, tengo dos botones, y cada uno hace una cosa dentro de una misma funcion pero tengo que decirle cual han pulsado y no se como !
Gracias!
ponles un ID diferentes a cada boton, crea una funcion donde le pasas this, y luego haz un alert con el valor de this, o del id de this ;)
Gracias otra vez! No se me habia ocurrido eso!jeje!Que cabeza!
este tio es un crack!
Quisiera saber como hago para recibir varios datos y cargar cada uno en un text distinto, desde ya gracias.
hola henry…como te expliques mejor no te podre ayudar ;)
Hola! te envio mi codigo de un ejercicio de combos enlazados (pais,provincia) que no me funciona, si es posible decirme porq? es que lo e intentado todo y no da resultado
Envio
function nuevoAjax(){
{
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”);
} catch (e) {
try {
xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”);
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest != ‘undefined’)
{
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
}
function cargarProvincia(d1)
{
ajax = nuevoAjax();
ajax.open(”GET”,”Envio.aspx?Elegido=”+d1,true);
ajax.onreadystatechange=function(){
if (ajax.readystate == 4){
if (ajax.responseText.indexOf(’invalid’) == -1) {
document.getElementById(”cboProv”).innerHTML = ajax.responseText;
}
else
{
alert(”Error”);
}
}
}
ajax.send(null)
}
pais
provincia
“” then
dim sql as string
dim IdEn as integer
IdEn = Request.querystring(”Elegido”)
dim param() as Object = {IdEn}
sql = “SELECT * FROM Pais INNER JOIN Provincias ON Pais.IdPais = Provincias.IdPais WHERE Provincias.IdPais= @0″
dt = contacto.llenatabla(sql,param)
contacto.actualizatabla(dt)%>
response.write(”">”"”)
%for each dr in dt.rows
%>
response.write(”">”"”)
No me deja escribir lo que cargo en el select
pero seria las provincias de la BD
ya esta todo el codigo! gracias
uff contacta conmigo, por mail, por que por aqui no entiendo na :S
y trata de usar el jsimple, mucho mas facil en serio
http://deambulando.wordpress.com/2007/01/02/simplejs/
Hola… me gustaria saber si has hecho alguna paginación con ASP. Es que necesito mostrar una información desde la base de datos que es muy extensa y al cargarla es muy lenta la conexxión. Y eso me ahorraria tiempo de busqueda
hola, si pero no ganaras velocidad… la BBDD te irá lenta igualmente… solo que el usuario esperará enla misma web sin cambiar a otra
Una duda Que pasa con el cache de la pagina ,con ASP y AJAX?
tengo un input text en el cual introduz datos y un creo un nuevo registro en la base de datos y devuelta me trae la lista en un Select size 10(lista) via AJAX y ASP
La idea es que cada vez que introduzco un dato a la BD me devuelba el Select actualizado , pero esta lo hace con efecto retardado
———————-
por EJ: (input) : 100
crear
(select) :vacio
———————–
por EJ: (input) : 222
crear
(select) :100 (debería a ver ingresado 222)
————————
por EJ: (input) : 333
crear
(select) :222
222 aqui esta el problema deberia a ver ingresado
el valor del input 333 y ingreso nuevamente el 222
he intentado con esto para limpiar el cache pero no pasa nada….
Response.addHeader “pragma”, “no-cache”
response.ContentType=”text/html”
response.CacheControl=”Private”
response.Expires=0
Alguna idea…..
PD: Ya busque en Google ;)
Hola es muy practico el ejemplo y me gustaria que me dieras un consejo:
Tengo la sig tabla en asp.
[ checkbox ,campo1,campo2, textinput]
La idea es que el usuario seleccione los productos y le ponga una cantidad para hacer un pedido.
Al momento que el usuario da click en agregar se pasan los registros seleccionados a una tabla identica en la parte de abajo con la opcion de editar pedidos.
No lo puedo hacer en la misma tabla(usando estatus o colores) por que ocupo un buscador de productos.
Te Agradeceria mucho que me dieras un consejo para resolver este problema llevo 2 dias sin dormir y no puedo ni traerme el numero de seleccionados ya que estoy super tierno para el asp y ajax Saludos Tio!!!
por que no pones un DIV debajo y le metes los datos a ese div ?
he utilizado tu codigo y me funciona bien pero no se como hacer para que me salte un alert y no pintar el div
aa