如果URL只有“一行HTML”，jQuery.load（）如何工作跨域？

Question

在我的网站上，我正在尝试编写一个JavaScript脚本，在单击按钮时，从一些网站的HTML源中删除数据并在我的网站上显示已解析/已清理的数据。

阅读TutorialsPoint's JQuery - Ajax page，其中展示了jQuery.load（）方法，

<script type = "text/javascript" language = "javascript">
     $(document).ready(function() {
        $("#driver").click(function(event){
           $('#stage').load('/jquery/result.html');
        });
     });
</script>

我决定在我的网站上试一试。我将URL从相对的URL更改为绝对的 - “http://www.tutorialspoint.com/jquery/result.html” - 令我惊讶的是，它实际上正在运行（单击 EXTRACT DATA ）。这与我的理解相矛盾，在阅读了几十个SO线程以及jQuery.load（）API时，HTTP请求将受到同源策略的约束。

  

由于浏览器安全限制，大多数“Ajax”请求都遵循相同的原始策略;请求无法从其他域，子域，端口或协议成功检索数据。 〜API

当我将网址更改为http://google.com/或http://www.example.com/之类的内容时，脚本无效。

上述教程页面上的一行引起了我的注意：

  

这里load（）向指定的URL /jquery/result.html文件发起Ajax请求。加载此文件后，所有内容都将填充在标有ID阶段的内部。 假设，我们的/jquery/result.html文件只有一行HTML

如果指定网址的HTML文件只有一行，那么load（）如何跨域工作？

Answer 1

这与文件或结构无关。这是关于启用Cross Origin Request Sharing。如果相关服务器或请求具有以下标头：

Access-Control-Allow-Origin: *

这将使AJAX也能够从跨域获取文件。

实际上，例如，通过Hurl.it发送HTTP GET请求会确认标头存在。

Answer 2

内部load()只是$.ajax的快捷方式，load()的代码是

function load(url, params, callback) {
    // ... some checks and stuff
        jQuery.ajax({
            // settings
        }).done(function (responseText) {
            self.html(selector ?
            jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : responseText);
        }).complete(callback && function (jqXHR, status) {
            self.each(callback, response || [jqXHR.responseText, status, jqXHR]);
        });
    }
    return this;
}

在这种情况下，服务器返回CORS requests的正确标头，如果查看请求，响应标头包括

Access-Control-Allow-Headers:X-Requested-With
Access-Control-Allow-Origin:*

意味着它允许来自不同来源的请求，因此它与load()完全无关，任何ajax请求都可以正常工作到该URL，因为它不受同源政策的约束

  

跨域资源共享标准通过添加新HTTP来工作   允许服务器描述原始集合的标头   允许使用网络浏览器阅读该信息。

Answer 3

我意识到该功能无法违反同源政策。

通过Hurl.It向HTML页面发送GET请求产生了原因：

  

获取http://www.tutorialspoint.com/jquery/result.html

     

头

     

...

     

* Access-Control-Allow-Origin：*

     

...