Estoy aprendiendo Ajax ahora y tengo problemas para encontrar videos o artículos que usan solo javascript para hacer cosas que hace jquery. Para cargar aparte de una página HTML y ponerla en la página, usando jquery es así:
$(function () { $("#showData").load("pageName.html #whatIWant"); });Y los datos en #whatIWant estarán en el elemento con la identificación #showData. No sé cómo hacer lo mismo con Vanilla Js gracias por su participación.
NOTA: si uso el método a continuación, obtengo todos los datos de la otra página y quiero controlar la respuesta.
const getData = (url) => { return new Promise((resolve, reject) => { let request = new XMLHttpRequest(); request.onload = function () { if (this.readyState === 4 && this.status === 200) { resolve(this.responseText); } else { reject(this.responseText); } }; request.open("get", url, true); request.send(); }); }; getData("test.html") .then((resolve) => { console.log(resolve); }) .catch((reject) => { console.error(reject); });Puede usar el XMLHttpRequest incorporado para obtener un documento HTML.
function fetchElement(url, selector) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function() { if (!this.responseXML || !this.responseXML.querySelector) reject("No HTML Document found"); else resolve(this.responseXML.querySelector(selector)); } xhr.open('GET', url); xhr.responseType = 'document'; xhr.send(); }); } const myElement = await fetchElement("pageName.html", "#whatIWant"); document.querySelector("#showData").innerHTML = ""; document.querySelector("#showData").appendChild(myElement);Alternativamente, también puede usar la API Fetch para obtener la página web, junto con DOMParser para analizarla.
async function fetchElement(url, selector) { const data = await fetch(url).then(res => res.text()); const parsed = new DOMParser().parseFromString(data, 'text/html'); return parsed.querySelector(selector); }Hay otra forma que encontré cuando buscaba respuestas.
let dom = new DOMParser(); const getData = (url) => { return new Promise((resolve, reject) => { let request = new XMLHttpRequest(); request.onload = function () { if (this.readyState === 4 && this.status === 200) { resolve(this.responseText); } else { reject(this.responseText); } }; request.open("get", url, true); request.send(); }); }; getData("test.html") .then((resolve) => { let pageHtml = dom.parseFromString(resolve, "text/html"); let element = pageHtml.querySelector("whatIWant"); console.log(element); }) .catch((reject) => { console.error(reject); });Esta respuesta y la otra funcionan para mí, espero que estas respuestas ayuden a alguien.