. .

Publicidad

Secciones

Publicidad

Aplicaciones Web

Programación

Hardware

Software

Bases de Datos

Mobile

Empresas

 

AJAX JQuery: Actualizar un div con contenido remoto

Uno de los aspectos más interesantes del AJAX es la posibilidad de poder actualizar elementos independientes de la página con contenido remoto. De esta forma se evitan viajes completos al servidor que significan recargar todo el contenido y por ende un desperdicio de ancho de banda.

Con JQuery podríamos, como ejemplo, tener un div con id = "divActualizar". Suponiendo que tenemos un archivo que se llame textollamado.html, podríamos actualizar el div con el contenido de ese fichero remoto de la manera siguiente:

<html>
<head>
<title>Ejemplo 001 de JQuery -> Para actualizar un div</title>
 <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
  </script> 
</head>
<body>
<h1>Ejemplo 001 de JQuery -> Para actualizar un div</h1>
<input type="button" onclick="$('#divActualizar').load('textollamado.html');"   
value="Click Actualizar el Div">
<div id="divActualizar"   
 style="width: 200px; height: 200px; border-style: solid; border-width: 2px;">
  Contenido del div.... [debería reemplazarse al momento de presionar el botón]
</div>
</body>

Elementos a considerar:

1. El llamado a la librería / framework que utilizamos (en este caso jquery) y que en el ejemplo lo hacemos desde los archivos hospedados en google code (Google permite que utilicemos de esa forma los alojamientos y así tenemos siempre la certeza de la versión que estamos usando, además de que hay un ahorro en ancho de banda.

2. El botón con value "Click Actualizar el Div" es el elemento que desencadena la acción: $('#divActualizar') es la forma de acceder al elemento DOM que es el div a actualizar. Mientras que el método load es el que ejecuta la llamada HTTP. Este método recibe la url de donde obtendremos el contenido a actualizar.

Este breve ejemplo puedes descargarlo aquí.

Tags para esta entrada: AJAX JQuery, Ejemplo JQuery, Ejemplo AJAX, Ejemplo Javascript AJAX, JQuery, Framework JQuery

Otros temas relacionados

AJAX Prototype: Actualizar un div con contenido remoto

Recientemente mostrábamos un ejemplo de cómo actualizar dinámicamente un div con contenido remoto mediante el uso de JQuery para peticiones Ajax. Hoy el ejemplo tiene el mismo objetivo, pero hemos utilizado otro framework que también cumple con ese función de actua...... Leer el artículo completo

AJAX y Frameworks Javascript, fundamentos técnicos básicos de la Web 2.0

El Javascript tomó por asalto la Programación Web hace algunos cuatro o cinco años con el boom del AJAX (Asynchronous Javascript and XML). Ajax vino a ser una especie de revitalización para los sitios web que necesitaban mayor interacción con el usuario, puesto que...... Leer el artículo completo

Tutoriales Menús CSS: Una recopilación de los mejores tutoriales

En Sulvision encontramos un listado de los mejores tutoriales de CSS para la construcción de menús de navegación, tabs, listas, etc. En muchas ocasiones este tipo de elementos parecen algo triviales, pero al si no somos gurús de CSS podemos terminar pasando un mal rato. E...... Leer el artículo completo

Diferencia entre las etiquetas DIV y SPAN

En el pasado las etiquetas (Tags) HTML aportaban cierto significado al contenido, y es por ello que en aquel entonces se incluyeron en el lenguaje las etiquetas DIV y SPAN. Hoy, dichas etiquetas, no aportan significado alguno al contenido. La principal diferencia entre ambas es que SPAN es una ...... Leer el artículo completo