Atualizar parte da página (div)

Eu tenho um arquivo html básico que está anexado a um programa java. Este programa java atualiza o conteúdo de parte do arquivo HTML sempre que a página é atualizada. Desejo atualizar somente aquela parte da página após cada intervalo de tempo. Posso colocar a parte que gostaria de atualizar em a div, mas não tenho certeza de como atualizar apenas o conteúdo de div. Qualquer ajuda seria apreciada. Obrigado.

Use Ajax para isso.

Construa uma função que irá buscar a página atual via ajax, mas não a página inteira, apenas a div em questão do servidor. Os dados serão então (novamente via jQuery) colocados dentro do mesmo div em questão e substituirão o conteúdo antigo por um novo.

Função relevante:

http://api.jquery.com/load/

por exemplo

$('#thisdiv').load(document.URL +  ' #thisdiv');

Observe que o carregamento substitui automaticamente o conteúdo. Certifique-se de incluir um espaço antes do seletor de id.

Vamos supor que você tenha 2 divs dentro de seu arquivo html.

<div id="div1">some text</div>
<div id="div2">some other text</div>

O próprio programa java não pode atualizar o conteúdo do arquivo html porque o html está relacionado ao cliente, enquanto o java está relacionado ao back-end.

Você pode, entretanto, comunicar-se entre o servidor (back-end) e o cliente.

Estamos falando de AJAX, que você consegue usando JavaScript. Recomendo usar jQuery, que é uma biblioteca JavaScript comum.

Vamos supor que você deseja atualizar a página a cada intervalo constante e, em seguida, pode usar a função de intervalo para repetir a mesma ação a cada x vezes.

setInterval(function()
{
    alert("hi");
}, 30000);

Você também pode fazer assim:

setTimeout(foo, 30000);

Onde foo é uma função.

Em vez do alerta ("oi"), você pode executar a solicitação AJAX, que envia uma solicitação ao servidor e recebe algumas informações (por exemplo, o novo texto) que você pode usar para carregar no div.

Um AJAX clássico se parece com isto:

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.
    }
});

Onde o backend é capaz de receber dados POST'ed e é capaz de retornar um objeto de dados de informação, por exemplo (e muito preferível) JSON, existem muitos tutoriais por aí com como fazer isso, GSON do Google é algo que eu usado há algum tempo, você poderia dar uma olhada nele.

Não sou profissional com o recebimento do Java POST e o retorno de JSON desse tipo, então não vou dar um exemplo com isso, mas espero que seja um bom começo.

Você precisa fazer isso no lado do cliente, por exemplo, com jQuery.

Digamos que você queira recuperar HTML em div com ID mydiv:

<h1>My page</h1>
<div id="mydiv">
    <h2>This div is updated</h2>
</div>

Você pode atualizar esta parte da página com jQuery da seguinte maneira:

$.get('/api/mydiv', function(data) {
  $('#mydiv').html(data);
});

No lado do servidor, você precisa implementar o manipulador para solicitações que chegam /api/mydive retornar o fragmento de HTML que vai dentro do mydiv.

Veja este Fiddle que fiz para você como um exemplo divertido usando jQuery get com dados de resposta JSON: http://jsfiddle.net/t35F9/1/

Use fetche innerHTMLpara carregar conteúdo div

let url="https://server.test-cors.org/server?id=2934825&enable=true&status=200&credentials=false&methods=GET"

async function refresh() {
  btn.disabled = true;
  dynamicPart.innerHTML = "Loading..."
  dynamicPart.innerHTML = await(await fetch(url)).text();
  setTimeout(refresh,2000);
}

<div id="staticPart">Here is static part of page
  <button id="btn" onclick="refresh()">Click here to start refreshing every 2s</button>
</div>

<div id="dynamicPart">Dynamic part</div>

$.ajax(), $.get(), $.post(), $.load()funções do jQuery enviam XML HTTPsolicitação internamente . entre estes, o load()é dedicado apenas a um determinado DOM Element. Veja jQuery Ajax Doc . Os detalhes do controle de qualidade estão aqui .