2

Eu estou no desenvolvimento de uma página, porém sou completamente leigo em questão de JS...

O site possui a div com a ID #content, e dentro dela um botão de refresh. Como posso fazer para quando alguém clicar ele dar um refresh somente na div, e não na página toda?

Atualmente estou utilizando o código:

<img src="images/refresh.png" onclick="window.location.reload()" style="cursor: pointer; position: absolute; right: 10px; top: 10px;"/>

Porém, ele ataliza a página toda...

Agradeço desde já a ajuda de todos!

0

1 Resposta 1

2

Rodrigo, para atualizar uma pagina por AJAX, você primeiro vai precisar de uma URL que lhe sirva o conteudo parcial que irá alimentar a sua div.

para fins deste exemplo, irei utilizar a tag <template> e o método URL.createObjectURL para criar uma URL em mémoria.

Uma vez que você tenha definido a sua URL, então teremos de usar o objeto XMLHttpRequest para realizar a requisição AJAX (Asynchronous JavaScript and XML), apesar de tanto o objeto quanto a tecnologia mencionarem XML, ela tambem pode servir HTML, JSON e outros.

var tmpl = document.getElementById("tmplContent").innerHTML;
var blob = new Blob([tmpl], { type: "text/html" });
var url = URL.createObjectURL(blob);

var updateContent = document.getElementById("updateContent");
var content = document.getElementById("content");

updateContent.addEventListener("click", function (event) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.addEventListener("readystatechange", function (event) {
    if (request.readyState == 4 && request.status == 200) {
      content.innerHTML = request.responseText
    }
  });
  request.send();
});
<div id="content">
</div>
<input id="updateContent" type="button" value="Atualizar Conteudo" />

<template id="tmplContent">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras laoreet aliquam ex vel eleifend. Aenean hendrerit cursus fermentum. Nam ornare imperdiet odio, non hendrerit risus eleifend vel. Nam nec augue consectetur, condimentum nulla ut, lacinia odio. Etiam tempus ligula ac accumsan tempus. Sed a diam non purus sodales tincidunt. Proin accumsan suscipit facilisis. Cras in placerat nulla. Ut eleifend massa eget gravida vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
  </p>
</template>

note que no retorno do XMLHttpRequest, estou verificando duas propriedades, a readyState (que determina a que passo está requisição) e o status (que diz qual a situação da requisição).

Segue abaixo um pequeno glosario para o readyState:

  • 0 Requisição não enviada
  • 1 Requisição Enviada
  • 2 Headers recebidos (pode ser util para uma requisição com Http Method HEAD)
  • 3 Carregado Parcialmente (responseText parcialmente disponivel)
  • 4 Completo (requisição finalizada)

o HTTP status code 200 significa que a requisição foi concluida com sucesso, você pode ver os demais status em Http Statuses, porem os mais comuns são 301 (Movido), 400 (Requisição mal formada), 401 (não autorizado), 403 (proibido), 404 (Não encontrado), 500 (Erro no servidor) e 501 (não implementado).

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .