为什么 w3schools 的这个 JQuery.get 示例对我不起作用？答案

【问题标题】：Why does this JQuery.get example from w3schools not work for me?为什么 w3schools 的这个 JQuery.get 示例对我不起作用？
【发布时间】：2014-09-06 04:57:12
【问题描述】：

这对其他人来说是显而易见的，但对于我的生活，我无法弄清楚。

我已经从 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_get 复制了 HTML

我稍微更改了一行，以便 .get url 指向完整的 w3schools.com url（这在他们的示例页面上工作得很好）。这是代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("http://www.w3schools.com/jquery/demo_test.asp",function(data,status){
      alert("Data: " + data + "\nStatus: " + status);
    });
  });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

这段代码在 w3schools 网站上对我来说工作得很好，但是当我将它粘贴到我家用计算机上一个名为“hi.html”的新文件中并在 Chrome 和 Firefox 中打开它时，它失败了。

我是直接复制粘贴这个html，为什么会失败？

【问题讨论】：

必须是 CORS (Cross-Origin Resource Sharing) 问题。检查此链接以获得更好的理解：html5rocks.com/en/tutorials/cors

标签： javascript jquery html get

【解决方案1】：

由于同源策略 (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy)，您的 Web 浏览器阻止执行 Ajax 请求。基本上，当您在 localhost:80 上运行脚本时，您只能向 localhost:80 上的页面发出 Ajax 请求。 W3Schools 在不同的主机上。

出于安全原因，存在同源策略。例如，假设您已登录 Facebook。如果不存在同源策略，程序员可能会创建一个恶意网站，该网站向 Facebook.com 发出 Ajax 请求，并返回您的登录 cookie。然后它可以将您的登录 cookie 发送给恶意程序员。然后，恶意程序员可以获取您的登录 cookie 并在 Facebook 上冒充您。

【讨论】：