用原生js实现jq的load()

在工作我碰见了一个老项目用到了jq的’load()‘,我想不用jq,那我该用原生怎么实现了?
jQuery 的 load() 方法是用于异步加载 HTML 文件或者元素的,使用原生 JavaScript 可以通过 XMLHttpRequest 对象来实现类似的功能。

function load(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      callback(this.responseText);
    }
  };
  xhr.open('GET', url, true);
  xhr.send();
}

这个方法接收一个 URL 和一个回调函数作为参数,它会通过 XMLHttpRequest 对象来异步加载指定的 HTML 文件,当加载完成后调用回调函数并传入加载的 HTML 字符串。你可以在回调函数中使用这个字符串来更新 DOM 元素。

以下是一个使用这个方法的示例:

load('./XXXX.jsp', function(response) {
  document.getElementById('myDiv').innerHTML = response;
  // 加载完成后可以执行其他逻辑
});

在这个示例中,我们调用 load() 方法来异步加载 ./XXXX.jsp 文件,当文件加载完成后,我们使用加载的 HTML 字符串来更新指定的 DOM 元素。
通过load()方法我们可以实现在html上的模块化。

你可能感兴趣的:(javascript,前端,开发语言)