Ajax: Aprende a cargar contenido en un div

Colapsar

Anuncio

Colapsar
No hay anuncio todavía.
X
  • Filtrar
  • Tiempo
  • Mostrar
Limpiar Todo
nuevos mensajes

  • Ajax: Aprende a cargar contenido en un div

    Registrate para eliminar la publicidad.

    Ajax, mas que una tecnología en sí es un conjunto de tecnologías (XHTML, CSS, DOM, XML, XSLT, JSON, XMLHttpRequest) unidas con Javascript. Utilizando Ajax conseguiremos mejorar considerablemente la interacción del usuario con la aplicación (web), ya que la página no necesitará ser recargada, actuará en segundo plano, por lo que el usuario siempre tendrá información en la pantalla.

    Y que mejor que empezar entendiendo de lo que hablamos, que con un ejemplo, cargar contenido en un div con ajax:

    Para ello he creado 2 funciones, la primera crea un objeto según el navegador y realiza una petición HTTP al servidor web, al realizar la petición devuelve un estado, pues cuando este estado cambie se ejecutará otra función:
    Código:
    function Carga(url,id) { //Creamos un objeto dependiendo del navegador var objeto; if (window.XMLHttpRequest) { //Mozilla, Safari, etc objeto = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Nuestro querido IE try { objeto = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { //Version mas antigua objeto = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!objeto) { alert("No ha sido posible crear un objeto de XMLHttpRequest"); } //Cuando XMLHttpRequest cambie de estado, ejecutamos esta funcion objeto.onreadystatechange=function() { cargarobjeto(objeto,id) } objeto.open('GET', url, true) // indicamos con el método open la url a cargar de manera asíncrona objeto.send(null) // Enviamos los datos con el metodo send } 
    Y la función a la que llamamos localiza el estado recibido y según la respuesta, cargamos el contenido en el div o mostramos un gif animado simulando una precarga, también podemos poner en texto “Cargando…” o cualquier otro mensaje que queramos.
    
    function cargarobjeto(objeto, id) { if (objeto.readyState == 4) //si se ha cargado completamente document.getElementById(id).innerHTML=objeto.responseText else //en caso contrario, mostramos un gif simulando una precarga document.getElementById(id).innerHTML='<img src="loader.gif" alt="cargando" />' } Una vez tenemos las funciones creadas, solo nos falta llamarlas, podemos hacerlo por ejemplo a través de un enlace:
    
    <a href="javascript:Carga(cargar.html, contenido);" title="Cargar contenido">Cargar contenido</a> Recordando que el primer parámetro es la URL que queremos cargar y el segundo es la ID del div en el que la cargaremos.
Trabajando...
X