通过没有 jQuery 的 AJAX 加载 JavaScript 文件

Question

我正在从另一个 Web 服务动态加载一个小部件，该小部件需要在它之后立即运行一个脚本。该示例使用 document.write() 来执行此操作，但这不起作用，因为它直到文档关闭后才会运行，这意味着它会覆盖整个文档。我正在尝试使用纯 JavaScript 通过 AJAX 加载它：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) { // success
    eval(this.responseText);
  }
};
xhttp.open("GET", "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js", true);
xhttp.setRequestHeader('Content-type', 'application/javascript');
xhttp.send();

但我收到以下错误：

XMLHttpRequest 无法加载 https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js。不 请求中存在“Access-Control-Allow-Origin”标头 资源。因此不允许使用原点“https://example.com” 访问。

我能够通过以下代码在我的测试服务器上使用 jQuery 使其工作：

$.ajax({
    dataType: "script",
    cache: true,
    url: "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js"
});

但是，我不能在我的生产服务器上使用 jQuery，因为......好吧......工作政治。

jQuery 是如何在没有错误的情况下做到这一点的，我怎样才能在纯 JavaScript 中做到这一点？

解决方案

正如@shabs 所说，$.ajax 将脚本标签添加到document.head，然后立即将其删除。我通过添加断点检查了这一点，并在 Chrome 的检查器中看到了它的添加和删除。无论文件是什么，只要当前脚本完成，它似乎就会删除该文件。这适用于立即调用的脚本，但我不知道这将如何与库之类的东西一起使用。

对于纯 JavaScript 实现，我使用了以下代码：

var widgetScript = document.createElement("script");
widgetScript.async = true;
widgetScript.src = "https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js";
document.head.append(widgetScript);
widgetScript.remove();

Answer 1

相关资源不支持CORS。

这适用于$.ajax，因为当您指定dataType: "script" 时，jQuery 实际上会将<script> 标记附加到document.head！ *

您不只是使用<script type="text/javascript" src="https://d3gxy7nm8y4yjr.cloudfront.net/js/embed.js"></script> 之类的东西有什么特殊原因吗？

* （这对我来说是个新闻！documentation for $.ajax 提到“脚本 [...] 请求不受同源策略限制”，the source code 确认了这一点。）