Tengo una Red Social con publicaciones, y quiero mostrar lo nuevo con JS y AJAX. Traté de recargar mi página con AJAX y ponerla en un elemento div, pero ahora el sitio web está en este elemento div, así que tengo la página completa dos veces. Sin embargo, solo quiero tomar el elemento div con AJAX. Mi código se ve así:
var timeout = setTimeout(loadDoc, 2000); function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onload = function() { document.getElementById("container").innerHTML = this.responseText; } xhttp.open("GET", "mywebsite.com"); xhttp.send(); timeout = setTimeout(loadDoc, 2000); } <div id="container"> post2<br> post1 </div>Saludos amables, ComputerJoshi
Hay dos enfoques que puede tomar aquí:
La URL que está solicitando está devolviendo un montón de datos que no desea.
Cámbielo (o cree una nueva URL para solicitarlo) para que solo obtenga los datos que desea.
Puede mantener esos datos en formato HTML , pero es más típico presentarlos en un formato estructurado (JSON es popular) y luego usarlo para actualizar el DOM de la página actual.
Convierta la cadena de HTML en un DOM (por ejemplo, con DOMParser ), luego use querySelector para encontrar las partes de ese DOM que desea y luego cópielas en el DOM actual.