通过jQuery获取JSONP

Question

更新1：

如果我在浏览器中键入以下内容，就会得到这样的结果。

http://www.remote_host.com/feed.php?callback=jsonpCallBack

{
    "rss": {
        "channels": [
            {
                "title": "title goes here",
                "link": "http://www.remote_server.com/feed.php",
                "description": "description goes here",
                "items": [
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    },
                    {
                        "title": "item title goes here",
                        "link": "item link goes here",
                        "pubDate": "item date goes here",
                        "description": "item description goes here"
                    }
                ]
            }
        ]
    }
}

那么这不是jsonp吗？

原问题：

我有以下脚本，我正在尝试从远程主机获取json数据：

$(document).ready(function() {
    get_json_feed();

    function get_json_feed() {
        $.ajax({
            url: 'http://www.remote_host.com/feed.php?type=json',
            type: 'GET',
            dataType: 'jsonp',
            error: function(xhr, status, error) {
                alert("error");
            },
            success: function(json) {
                alert("success");
            }
        });
    }
});

但是出现了错误和警告，原因不明：

警告：资源被解释为脚本，但传输的MIME类型为text/html。

错误：未捕获的语法错误：意外的令牌“:”

我做错了什么？

- oshirowanen

---

你试过改变类型了吗？ - xkeshav

这听起来像是服务器没有返回JSONP。你应该尝试(a)feed.php?type=jsonp和(b)如果服务器支持JSONP，它通常会接受一个参数，您可以指定回调函数的名称，类似于:feed.php?type=jsonp&callback=?。您必须阅读您正在使用的服务的文档。 - Felix Kling

在您的选项中编写 jsonp: 'callback', jsonpCallback: 'jsonpCallback',。 - xkeshav

尝试在浏览器中使用参数组合或阅读文档。例如，如果您在地址栏中键入“http://www.remote_host.com/feed.php?type=json”，并且响应看起来不像“funcName（{...}）”，而是像“{...}”，则您获得JSON而不是JSONP。 - Felix Kling

如果服务器属于您，您还需要设置它以返回JSONP。 - Felix Kling

Answer 1

JSONP“协议”依赖于网站用以下形式的JavaScript语句回复您的请求：

 someFunction( someJSON )

函数的名称作为参数从您的代码中提供，其想法是响应脚本一旦被浏览器消耗和解释，将会调用该函数并返回一个解析后的JSON数据块，也就是一个JavaScript对象。jQuery库将为您完成一些繁琐的工作，甚至可以创建全局范围内的可调用函数（这将是一段仅调用您提供的“success”参数作为回调的代码）。

因此，您应该检查服务器实际响应的内容。我认为它可能不是一个准备好以那种方式响应的服务器。您可能需要确保URL上有一个额外的参数，形式为“callback =？”。

- Pointy

---

没错 - 这只是普通的 JSON。JSONP 协议要求将 JSON 包装在函数调用中。浏览器通过创建一个 <script> 标签从服务器获取内容。当脚本被获取时（围绕该 JSON 的函数调用），函数调用将发生。 - Pointy

Answer 2

我不知道你遇到了什么错误，但是在使用 jsonp 时有一些有用的提示可以参考，这里。

• error：对于跨域脚本和 JSONP 请求，此处理程序不会被调用。

• 在 ajax 参数中写入 jsonp: 'callback', jsonpCallback: 'jsonpCallback'。 将 jsonp 设置为 callback，然后将 jsonpCallback 设置为 jsonpCallback，可以使查询字符串如下所示：

  http://domain.com/jsonp-demo.php?callback=jsonpCallback&name=watever

• 使用 JSONP 加载 JSON 块。会在 URL 的末尾添加一个额外的 ?callback=? 来指定回调函数。

完整的脚本应该像这样：

<script>
    $(document).ready(function(){

        $("#useJSONP").click(function(){
            $.ajax({
                url: 'http://domain.com/jsonp-demo.php',
                data: {name: 'Chad'},
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'jsonpCallback',
                success: function(){
                    alert("success");
                }
            });
        });

    });

    function jsonpCallback(data){
        $('#jsonpResult').text(data.message);
    }
    </script>

Example here

- diEcho

Answer 3

看起来服务器返回了错误的Content-type头部信息。

- bjornd

---

我已经添加了一个内容类型头header("content-type: text/javascript")，所以警告现在已经消失了。 - oshirowanen