Question

我正在尝试为jQuery的load（）编写XMLHttpRequest（）替换。它过滤了返回的HTML，证明是困难的。

$(".articleBody").load(url+" .articleBody > *", function() {
    // code goes here
});

到目前为止我已经。

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function (data) {
    var response = (httpRequest.responseText);
    //code goes here
}
httpRequest.open('GET', url);
httpRequest.send();

Answer 1

您必须执行.load所做的一切：清空目标元素，解析响应，找到要获取的元素并将它们插入目标。 querySelectorAll在这里会非常有用。

var target = document.querySelector('.articleBody');
target.innerHTML = '';

var tmp = document.createElement('div');
tmp.innerHTML = response;

var newContent = tmp.querySelectorAll('.articleBody > *');
for (var i = 0; i < newContent.length; i++) {
  target.appendChild(newContent[i]);
}

以上示例仅适用于单个目标元素。如果您有多个，则必须克隆每个新节点并将其插入每个目标节点。

Answer 2

你可以简单地做一个get，然后将响应解析为html，然后找到关注的元素：

$.get(url).done(function(data){
  var html = $(data).find(filter);
});

$.get()是XHR GET请求的简写函数。
jQuery可以通过将HTML传递到jQuery函数来将HTML解析为DOM结构。
使用已解析的HTML，您可以使用find()来查找关注的元素。查找可能会返回多个结果，因此请相应处理。

如何复制jQuery的load（）过滤器？

2 个答案: