使用 XMLHttpRequest() 进行 Ajax 调用是否已经过时？

Question

我只是使用我正在读的书中的一个例子。该示例标记为“使用 Ajax 加载 HTML”。这是代码的 JS 部分：

var xhr = new XMLHttpRequest();

xhr.onload = function() {
  if(xhr.status === 200) {
    document.getElementById('content').innerHTML = xhr.responseText;
  }
};

xhr.open('GET', 'data/data.html', true);
xhr.send(null);

当我将页面加载到浏览器上时，我得到了代码的 CSS 部分（标题等），但没有得到任何 JS（应该有会加载到页面上的地图）。该示例表示我应该注释掉上面代码的这一部分：

xhr.onload = function() {
  if(xhr.status === 200) {
    document.getElementById('content').innerHTML = xhr.responseText;

...如果我在没有服务器的情况下在本地运行代码，但这也不起作用。

Answer 1

使用 XMLHttpRequest() 进行 Ajax 调用是否已经过时？

是的，但它仍然有效，这不是问题。更现代的方式是fetch。

当我将页面加载到浏览器上时，我得到了代码的 CSS 部分（标题等），但没有得到任何 JS（应该有会加载到页面上的地图）。

这是因为分配包含script标签的HTMLinnerHTML不会运行这些标签定义的脚本。这些script标签实际上被忽略了。

要运行这些脚本，您需要在结果中找到它们，然后重新创建它们，大致如下：

var content = document.getElementById('content');
content.innerHTML = xhr.responseText;
content.querySelectorAll("script").forEach(function(script) {
    var newScript = document.createElement("script");
    newScript.type = script.type;
    if (script.src) {
        newScript.src = script.src;
    } else {
        newScript.textContent = script.textContent;
    }
    document.body.appendChild(newScript);
});

请注意，这与直接加载页面中的元素不同。当直接加载页面时遇到结束脚本标签时，不带or或 的标签script内的代码会立即执行（以便加载的脚本可以用于输出到 HTML 流；这是 20 世纪 90 年代中期）。而在上面，它们是随后运行的。scriptasyncdefertype="module"document.write

请注意，在较旧的浏览器上，querySelectorAll可能NodeList没有forEach，这是几年前添加的。如果您需要填充它，请参阅我的答案。