使用JSONP的.ajax()的基本示例是什么？

13 浏览
0 Comments

使用JSONP的.ajax()的基本示例是什么？

请问有人可以帮我解决如何开始使用JSONP吗？

代码：

$('document').ready(function() {
    var pm_url = 'http://twitter.com/status';
    pm_url += '/user_timeline/stephenfry.json';
    pm_url += '?count=10&callback=photos';
    var photos = function (data) {
     alert(data);
    };
    $.ajax({
        url: pm_url,
        dataType: 'jsonp',
        jsonpCallback: 'photos',
        jsonp: false,
    });
});

示例：http://jsfiddle.net/R7EPt/6/

根据文档所述，应该会弹出一个提示框，但似乎没有弹出（但也没有产生任何错误）。

谢谢。

admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

使用jQuery处理JSONP的方式甚至更加容易

$.getJSON("http://example.com/something.json?callback=?", function(result){
   //response data are now in the result variable
   alert(result);
});

URL末尾的?告诉jQuery这是一个JSONP请求而不是JSON请求。jQuery会自动注册和调用回调函数。

有关更多详细信息，请参阅jQuery.getJSON文档。

0
0 Comments

JSONP实际上是一种简单的技巧，用于克服XMLHttpRequest同源策略。（您知道无法向不同域发送AJAX（XMLHttpRequest）请求。）

因此，我们必须使用script HTML标签，而不是使用XMLHttpRequest，因为使用HTML标签的js可以从另一个域获取数据。听起来很奇怪？

事情是这样的——原来script标签可以以类似于XMLHttpRequest的方式使用！看看这个：

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data";

加载数据后，结果会如下所示：

不过这有点不方便，因为我们必须从script标签中获取这个数组。因此，JSONP的创建者认为以下方式更好（确实是这样）：

script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://www.someWebApiServer.com/some-data?callback=my_callback";

注意那里的my_callback函数？因此-当JSONP服务器接收到您的请求并找到回调参数时，它将返回此内容，而不是纯JS数组：

my_callback({['some string 1', 'some data', 'whatever data']});

看到利润在哪里了吗：现在我们得到了自动回调（my_callback），一旦我们获取数据就会触发回调。这就是关于JSONP的全部：它是回调和脚本标签。

注意：
这些是JSONP使用的简单示例，这些不是生产就绪脚本。

原始JavaScript演示（使用JSONP的简单Twitter feed）：

基本的jQuery示例（使用JSONP的简单Twitter feed）：

JSONP代表带填充的JSON。（技术名称非常不准确，因为它与大多数人想象中的“填充”实际上没有任何关系。）

0