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：*

...

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

3 个答案: