Question

我需要使用ajax调用来获取google API的新闻Feed，我有以下代码：

function submitSearch(){
        var query = "business";
        var target = "https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q=" + query + "&callback=processResults";

        $.ajax({
            url: target,
            cache: false,
            success: function(data) {
                $('#resultSet').html(data);
            },
            error: alert(target)
        });
    }

由于某些原因，在使用AJAX调用时，直接在浏览器中使用URL会导致错误。

Answer 1

您不能跨域提出AJAX请求。（查看跨域原始策略）

也就是说，有一个解决方法：JSONP。它本质上是一个黑客，但它完成了工作。至于JQuery的具体实现：http://api.jquery.com/jQuery.getJSON/

Answer 2

由于同源策略，您无法进行跨域ajax请求，否则您可以使用带有填充的jsonp即json。

同源策略（SOP）是一种浏览器安全措施，它限制JavaScript代码与源自其他网站的资源进行通信，即从任何其他域和/或端口加载的资源。例如。在http://google.com上的网页中运行的JS无法与从http://cbs.com甚至http://cbs.com:8081加载的数据进行交互

解决SOP问题

a）服务器中的代理：您在应用中创建一个与外部网址对话并返回结果的终点

b）将JSON响应加载到标记中，否则加载jsonp，即带有填充的json

有一些服务器端更改与此一起..阅读如何为您的脚本语言执行此操作..

基本上响应应该是这样的：

 jsonCallback({"Name": "Random", "Id" : 2432, "Rank": 453})

Answer 3

"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to
the end of your URL to specify the callback. Disables caching by appending 
a query string parameter, "_=[TIMESTAMP]", to the URL unless the cache option
is set to true.

参考：http://api.jquery.com/jQuery.ajax/

您需要设置dataType:"jsonp"并从网址末尾删除&callback=processData

var query = "business";
var target = "https://ajax.googleapis.com/ajax/services/search/news?v=1.0&q="+query;
$.ajax({
    url: target,
    cache: false,                   
    dataType:'jsonp',          
    success: function(data) {
        alert(data.responseData.results[0].GsearchResultClass);

    },
    error: function(jxhr,e){
    alert(jxhr.status+" - "+e.responseText);        
    }
});

这里是小提琴http://jsfiddle.net/6gCRF/8/

使用JQuery Ajax获取新闻

3 个答案: