使用 XMLHttpRequest() 进行 Ajax 调用是一种过时的方式吗？答案

【问题标题】：Is using XMLHttpRequest() an outdated way to make an Ajax call?使用 XMLHttpRequest() 进行 Ajax 调用是一种过时的方式吗？
【发布时间】：2020-01-02 18:40:36
【问题描述】：

我只是在使用我正在阅读的书中的一个例子。该示例被标记为“使用 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;

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

【问题讨论】：

你真的需要使用 XHR 吗？ fetch 在代码方面更好，更简洁
这是我正在阅读的书中示例提供的代码。你能举一个使用fetch的例子吗？
如果响应是 JSON 格式，那么 fetch(url).then(response => response.json()).then(data => document.getElementById('content').innerText = JSON.stringify(data))
但是... TJ 的正式“答案”就在下面，可能正中实际的要害。当您的案例中的真正问题似乎与 JavaScript 代码有关时，您表面上询问 XMLHttpRequest() 作为发送 AJAX 请求的一种方式。一个完全不同的问题，实际上与请求的发送或接收方式无关。查看答案...

标签： javascript ajax xmlhttprequest

【解决方案1】：

使用 XMLHttpRequest() 进行 Ajax 调用的方式是否过时？

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

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

这是因为将包含 script 标记的 HTML 分配给 innerHTML 不会运行由这些标记定义的脚本。 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);
});

请注意，这与直接加载包含script 元素的页面不相同。 script标签内没有async或defer或type="module"的代码在直接加载页面时遇到关闭脚本标签时立即执行（这样加载的脚本就可以使用document.write输出到HTML流；这是 1990 年代中期）。而在上面，它们是在之后运行。

请注意，在较旧的浏览器上，querySelectorAll 的 NodeList 可能没有 forEach，这是几年前才添加的。如果需要 polyfill，请参阅 my answer here。

【讨论】：

谢谢，T.J.我还没有尝试过你的解决方案。在我阅读您的答案之前，我正在尝试在 [mozilla]:(developer.mozilla.org) 上阅读的内容：function reqListener() { console.log(this.responseText); } var xhr = new XMLHttpRequest(); xhr.addEventListener("load", reqListener); xhr.open("GET", "data/data.html"); xhr.send(); 但我在控制台中收到此错误消息：
Access to XMLHttpRequest at 'file:///Users/andrewrea/Downloads/javascript-and-jquery-book-code-0915/c08/data/data.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
@AndrewRea - 是的，在大多数浏览器中，您只能从通过 HTTP 或 HTTPS 提供的页面使用 ajax（无论是 XMLHttpRequest 还是 fetch），而不是使用 file: 伪加载的本地文件方案。通常，使用 Web 技术，您希望运行本地服务器而不是直接加载文件。 Ajax 并不是唯一对通过file: URI 加载的页面不起作用的东西，对于通过file: URI 加载的页面，其他一些东西要么不起作用，要么工作略有不同。最好坚持使用 HTTP/HTTPS。

【解决方案2】：

因为我没有完全理解 T.J. 的回答（T.J. 无意冒犯），所以我想为可能正在阅读本文的任何人提供一个简单的答案。我最近才在 Mozilla.org 上找到了这个答案：你如何设置本地测试服务器？ (https://developer.mozilla.org/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server)。我不会详细说明，我将把答案留给 Mozilla。（向下滚动页面到标题为“运行简单的本地 HTTP 服务器”的部分。）

【讨论】：