是否有任何方法可以执行与 jquery 中的 method.load() 相同的作用，以获取带有香草 Javascript 的 html 页面的一部分

Question

我现在正在学习 Ajax，但在查找仅使用 javascript 来执行 jquery 所做的事情的视频或文章时遇到问题。 要加载 HTML 页面并将其放在页面上，使用 jquery 就像这样：

   $(function () {
      $("#showData").load("pageName.html #whatIWant");
    });

并且#whatIWant 中的数据将在具有#showData id 的元素中。 感谢您的参与，我不知道如何用 Vanilla Js 做同样的事情。

注意：如果我使用下面的方法，我会从其他页面获取所有数据，并且我想控制响应。

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

Answer 1

您可以使用内置的XMLHTTPRequest来获取 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);

---

或者，您也可以使用Fetch API来获取 web 页面，以及DOMParser来解析它。

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

Answer 2

我在寻求答案时发现了另一种方法。

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

这个答案和另一个答案都对我有用，我希望这些答案对某人有所帮助。