Empezando con Ajax
Oct 10 Ajax 
6 Comentarios / 594 lecturas Por razones del trabajo he tenido que empezar a usar Ajax, antes habÃa hecho algunas cosillas asà que he tirado de lo que tenÃa por ahÃ.
En concreto se trata de una función a la que pasándole una capa y una dirección url (html, php, jsp, servlet…) carga la página en dicha capa.
function paginas (url, id_contenedor)
{
var pagina_requerida = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
pagina_requerida = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
pagina_requerida = new ActiveXObject (”Msxml2.XMLHTTP”);
}
catch (e)
{
// en caso que sea una versión antigua
try
{
pagina_requerida = new ActiveXObject (”Microsoft.XMLHTTP”);
}
catch (e)
{
}
}
}
else
return false;
pagina_requerida.onreadystatechange = function ()
{
// función de respuesta
cargarpagina (pagina_requerida, id_contenedor);
}
pagina_requerida.open (’GET’, url, true); // asignamos los métodos open y send
pagina_requerida.send (null);
}
Si todo ha funcionado correctamente entonces cargaremos el contenido en la capa correspondiente
function cargarpagina (pagina_requerida, id_contenedor)
{
if (pagina_requerida.readyState == 4 && (pagina_requerida.status == 200 || window.location.href.indexOf (”http”) == - 1))
document.getElementById (id_contenedor).innerHTML = pagina_requerida.responseText;
}
Me encantarÃa poder decir de donde obtuve estas funciones, pero no sé el autor ni el tipo de licencia que tienen, pero vamos, que tampoco tienen mucho, cualquiera con mÃnimos conocimientos de ajax podrÃa hacerlas e incluso mejorarlas ya que son muy básicas.
Las podemos incluir en un fichero javascript externo o integrarlas en nuestro código, de cualquier manera para poder invocar la función serÃa desde cualquier evento con la sintaxis:
paginas(’url’,'capa_destino’)
Donde la url puede ser tanto absoluta como relativa y la capa_destino ha de ser el id de alguna capa, por ejemplo:
paginas(’prueba.html’,'cprueba’)
y tendrÃamos en nuestro código:
<div id=”cprueba”></div>
Luego cargarÃamos la página prueba.html en la capa “codigo” ubicada mediante css en cualquier parte de nuestra página.
Para poder invocarla podemos usar eventos onChange o onLoad, por ejemplo, si queremos que nada más cargar la página aparezca algo podemos usar la propiedad onLoad del body:
<body onLoad=”paginas(’prueba.html’,'cprueba’)”>
Es conveniente cargar sólo páginas con texto y evitar transferir mediante Ajax funciones javascript ya que suelen dar muchos problemas y fallos.
Si se pretende llamar a un servlet y este redirige a un jsp, por ejemplo, también tendremos ese problema ya que se recargará toda la página y no sólo la capa.
En estos casos quizás sea mejor solución utilizar frames con la estructura de marco flotante
<iframe name = “nombre” width=”100%” height=”400″ frameborder=”0″>Texto alternativo</iframe>
Con el frameborder indicaremos si aparece el borde o si por el contrario queremos hacer transparente su presencia.
Para enviar enlaces al frame sólo necesitaremos utilizar el atributo target del enlace para indicar que frame (name), en este caso serÃa:
<a target= “nombre” href=”">Enlace</a>
Espero que os sirva para vuestros comienzos con Ajax.
Octubre 11th, 2007 a las 10:56 am
hola Emilio,
te recomiendo que uses la libreria jquery para utilizarla tan solo tienes que descargarla en: http://jqueryjs.googlecode.com/files/jquery-1.2.1.min.js ocupa 45.3kb
luego añadirla entre las etiquetas head:
y todo el codigo de funciones que tienes lo podrias hacer con:
function paginas(pagina_requerida, id_contenedor)
{
$.ajax({
url: pagina_requerida,
cache: false,
success: function(html){
$(’#'+id_contenedor).html(html);
}
});
}
Octubre 11th, 2007 a las 11:51 am
La verdad es que nunca he sido mucho de jquery o mootools, lo he usado en alguna ocasión pero para cosas sin importancia.
He puesto esas dos funciones pero en realidad tiro de una libreria ajax mucho más extensa que conseguà en el curro que entre otras cosas me permite poder transferir formularios como objetos dom.
Gracias por el consejo, seguramente tendré que empezar a usar alguna de esas librerias de forma asidua, ya que hacen todo el proceso mucho más sencillo
Octubre 15th, 2007 a las 8:33 am
[...] semana pasada escribÃa un artÃculo sobre los comienzos con ajax, en él indicaba una forma fácil para cargar un documento estático en cualquier capa de una [...]
Abril 23rd, 2008 a las 8:06 am
[...] programa, que mediante el uso de AJAX nos permite un fácil manejo, ofrece la posibilidad de crearnos un menú a la carta, podremos [...]
Agosto 29th, 2008 a las 12:50 pm
[...] de usar Ajax era un fan de los frames, más concretamente del iframe. Creo que en algunos casos puede ser muy [...]
Septiembre 4th, 2008 a las 7:40 am
[...] que apareció AJAX el uso de Javascript se ha vuelto a disparar, pero ahora más que nunca, sobretodo para evitar [...]