时间戳

首页 > 解决方案 > vanilla js 相当于通过 div id 通过 XMLHttpRequest 的“加载页面片段”

javascript - vanilla js 相当于通过 div id 通过 XMLHttpRequest 的“加载页面片段”

问题描述

出于学习目的，尽量不要使用 jQuery 来获取远程内容。

以下代码段运行良好。它获取两个 div 并将它们放在当前页面中。

它正在获取这个原始要点：

<div class="remote" id='one'>one</div>
<div class="remote" id='two'>two</div>


function remoteFetch() {
  var xhr = new XMLHttpRequest();
  var varUrl = 'https://gist.githubusercontent.com/persianphilosopher/b0d4e948da801d09969b4ac6f5c0206d/raw/d139dd28e2cd5a73a4b38f489c8462c755c342c6/temp';

  xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
      if (xhr.status == 200) {

        document.getElementById("here").innerHTML = xhr.responseText;
      }
    }
  }
  xhr.open("GET", varUrl, true);
  xhr.send();
}
remoteFetch();
<div id="here"></div>

问题：我想不通的是相当于以下 jQuery 位：

$("#here").load("varUrl #one");

这将允许我只通过它的 id 获取一个 div。

我在 SO 上找到的最接近的是这个答案，但我没有根据我的需要在这里调整它。

提前致谢。

标签： javascriptjquery

解决方案

您的 codepen 中的实现几乎可以正常工作，我在这个 fork 中纠正了两个问题：
https ://codepen.io/anon/pen/VdJYVG?editors=1010

第一个问题是一个错字svgDoc.getElementsById，应该只是svgDoc.getElementById。
第二个问题是 DOMParser 中的解析问题。您text/xml作为预期的 MIME 类型传入，而您要解析的内容是text/html.

推荐阅读