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.
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
Recomendados:
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
funciona perfecto pero no logro poner la funcion de wait para que salga el gif de cargando.. alguien lo pudo hacer???
tienes la imagen en el sitio correcto? carga el div que debe?
es de lo mas sencillo esa función
asi es pero ni siquiera sale el texto que dice cargando, mi codigo:
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 wait() {
document.getElementById(“colas”).innerHTML = “Buscando..”;
}
}
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
Ingrese su email:
function wait() {
document.getElementById(“colas”).innerHTML = “Buscando..”;
}
prueba con esta librerÃa es mucho mejor: http://www.deambulando.com/2007/01/02/simplejs/
Porque no utilizan algun framework, y si no es asi seria mejor que separan su codigo con el modelo Vista controlador, perdon pero es muy sucio su codigo
Por que es un ejemplo, para que se entienda como funciona. Una vez conoces el funcionamiento ya te pasas a lo que quieras, pero creo que es mejor asà aprender el funcionamiento básico y luego ya si quieres usa jQuery o lo que te venga en gana.
Si no te gusta abre un blog y escribe acerca de ello para ayudar a la comunidad, seguro que será útil.
una consulta.. !!
yo necesito el codigo de como con un click en una lista de un formulario ..actualizar un formulario completo que muestra los datos del objeto que se le hizo click .. trabajo en asp !
usa un foro, gracias ;)