使用 jQuery 的跨域请求答案

【问题标题】：Cross-Domain Requests with jQuery使用 jQuery 的跨域请求
【发布时间】：2011-11-30 03:02:30
【问题描述】：

对于一个项目，我需要获取不同其他域的网页源代码。我试过以下代码：

$('#container').load('http://google.com');

$.ajax({
    url: 'http://news.bbc.co.uk',
    type: 'GET',
    success: function(res) {
        var headline = $(res.responseText).find('a.tsh').text();
        alert(headline);
    }
});

我仍然没有得到任何结果，只是一个空白的警报框。

【问题讨论】：

这里有一个类似问题的链接，里面有几个很好的建议（我一个）stackoverflow.com/questions/7614420/…

标签： ajax jquery cross-domain

【解决方案1】：

出于安全原因，脚本无法访问其他域的内容。 Mozilla 有一篇关于HTTP access control 的长文章，但最重要的是，如果网站本身没有添加对跨域请求的支持，那你就完蛋了。

【讨论】：

【解决方案2】：

默认情况下，所有浏览器都限制跨域请求，您可以通过使用 YQL 作为代理来解决这个问题。在此处查看指南：http://ajaxian.com/archives/using-yql-as-a-proxy-for-cross-domain-ajax

【讨论】：

James Padolsey 也有一个使用 YQL 的小型 jQuery plugin，如果这会让事情变得更容易:)

【解决方案3】：

这段代码在 JQuery 和 YQL 的帮助下完美运行

$(document).ready(function(){
  var container = $('#target');
  $('.ajaxtrigger').click(function(){
    doAjax($(this).attr('href'));
    return false;
  });
  function doAjax(url){
    if(url.match('^http')){
      $.getJSON("http://query.yahooapis.com/v1/public/yql?"+
                "q=select%20*%20from%20html%20where%20url%3D%22"+
                encodeURIComponent("http://www.yahoo.com")+
                "%22&format=xml'&callback=?",
        function(data){
          if(data.results[0]){
            var data = filterData(data.results[0]);
            container.html(data);

          } else {
            var errormsg = '<p>Error: could not load the page.</p>';
            container.html(errormsg);
          }
        }
      );
    } else {
      $('#target').load(url);
    }
  }
  function filterData(data){
    data = data.replace(/<?\/body[^>]*>/g,'');
    data = data.replace(/[\r|\n]+/g,'');
    data = data.replace(/<--[\S\s]*?-->/g,'');
    data = data.replace(/<noscript[^>]*>[\S\s]*?<\/noscript>/g,'');
    data = data.replace(/<script[^>]*>[\S\s]*?<\/script>/g,'');
    data = data.replace(/<script.*\/>/,'');
    return data;
  }
});

【讨论】：

我们不能在 javascript 中创建类似这样的功能吗？我问这个是因为将来如果 yahooapi 限制这个功能会发生什么？
@Nits 检查这个.. frihost.com/forums/vt-32602.html 我没试过这个。顺便说一句，您不认为使用 jquery 是最简单的方法。 :)

【解决方案4】：

为此找到了另一种解决方案：

function getData(url){
   if(url.match('^http')){
     $.get(url,
      function(data){
        process(data);
      }//end function(data)
     );//end get
   } 
}

这确实是处理跨域请求的一种非常简单的方法。由于 www.imdb.com 等一些网站拒绝 YQL 请求。

【讨论】：

我不这么认为。同源策略没有区别。它行不通。 jQuery 本身的文档说：“由于浏览器的安全限制，大多数“Ajax”请求都受制于同源策略；该请求无法成功地从不同的域、子域或协议中检索数据。”我不明白你为什么接受自己的错误答案......
这只是因为查询一开始就不是跨域的，所以它不是对问题的有效回复。

【解决方案5】：

您的情况的解决方案是带填充的 JSON 或 JSONP。

您需要一个 HTML 元素，为其 src 属性指定一个返回 JSON 的 URL，如下所示：

<script type="text/javascript" src="http://differentDomain.com/RetrieveUser?UserId=1234">

您可以在线搜索更深入的解释，但 JSONP 绝对是您的解决方案。

【讨论】：

【解决方案6】：

执行以下步骤。 1：将 datatype:jsonp 添加到脚本中。 2：在url中添加“回调”参数 3：创建一个名称与“回调”参数值相同的javascript函数。 4：可以在javascript函数中接收输出。

【讨论】：