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
[...] 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 ?