Actualizar parte de la página (div)
Tengo un archivo html básico adjunto a un programa java. Este programa java actualiza el contenido de parte del archivo HTML cada vez que se actualiza la página. Quiero actualizar sólo esa parte de la página después de cada intervalo de tiempo. Puedo colocar la parte que me gustaría actualizar en un archivo div, pero no estoy seguro de cómo actualizar solo el contenido del archivo div. Cualquier ayuda sería apreciada. Gracias.
Utilice Ajax para esto.
Cree una función que obtenga la página actual a través de ajax, pero no la página completa, solo el div en cuestión del servidor. Luego, los datos (nuevamente a través de jQuery) se colocarán dentro del mismo div en cuestión y reemplazarán el contenido antiguo por uno nuevo.
Función relevante:
http://api.jquery.com/load/
p.ej
$('#thisdiv').load(document.URL + ' #thisdiv');
Tenga en cuenta que la carga reemplaza automáticamente el contenido. Asegúrese de incluir un espacio antes del selector de identificación.
Supongamos que tiene 2 divs dentro de su archivo html.
<div id="div1">some text</div>
<div id="div2">some other text</div>
El programa Java en sí no puede actualizar el contenido del archivo html porque el html está relacionado con el cliente, mientras que Java está relacionado con el back-end.
Sin embargo, puede comunicarse entre el servidor (el back-end) y el cliente.
De lo que estamos hablando es de AJAX, que se logra usando JavaScript. Recomiendo usar jQuery, que es una biblioteca de JavaScript común.
Supongamos que desea actualizar la página cada intervalo constante, luego puede usar la función de intervalo para repetir la misma acción cada x veces.
setInterval(function()
{
alert("hi");
}, 30000);
También puedes hacerlo así:
setTimeout(foo, 30000);
Mientras que foo es una función.
En lugar de la alerta ("hola"), puede realizar la solicitud AJAX, que envía una solicitud al servidor y recibe información (por ejemplo, el nuevo texto) que puede usar para cargar en el div.
Un AJAX clásico se ve así:
var fetch = true;
var url = 'someurl.java';
$.ajax(
{
// Post the variable fetch to url.
type : 'post',
url : url,
dataType : 'json', // expected returned data format.
data :
{
'fetch' : fetch // You might want to indicate what you're requesting.
},
success : function(data)
{
// This happens AFTER the backend has returned an JSON array (or other object type)
var res1, res2;
for(var i = 0; i < data.length; i++)
{
// Parse through the JSON array which was returned.
// A proper error handling should be added here (check if
// everything went successful or not)
res1 = data[i].res1;
res2 = data[i].res2;
// Do something with the returned data
$('#div1').html(res1);
}
},
complete : function(data)
{
// do something, not critical.
}
});
Mientras que el backend puede recibir datos publicados y puede devolver un objeto de datos de información, por ejemplo (y muy preferible) JSON, existen muchos tutoriales sobre cómo hacerlo, GSON de Google es algo que yo Usado hace un tiempo, podrías echarle un vistazo.
No soy un profesional en la recepción de POST de Java ni en la devolución de JSON de ese tipo, así que no les voy a dar un ejemplo al respecto, pero espero que sea un comienzo decente.
Debes hacerlo en el lado del cliente, por ejemplo con jQuery.
Digamos que desea recuperar HTML en div con ID mydiv:
<h1>My page</h1>
<div id="mydiv">
<h2>This div is updated</h2>
</div>
Puede actualizar esta parte de la página con jQuery de la siguiente manera:
$.get('/api/mydiv', function(data) {
$('#mydiv').html(data);
});
En el lado del servidor, debe implementar un controlador para las solicitudes que llegan /api/mydivy devolver el fragmento de HTML que va dentro de mydiv.
Vea este Fiddle que hice para usted para ver un ejemplo divertido usando jQuery get con datos de respuesta JSON: http://jsfiddle.net/t35F9/1/
