MooTools JSONP标签无效

时间:2011-10-11 20:42:07

标签: ajax json mootools jsonp

让我的数据显示在页面上,继续挂起“无效标签”错误

Current.js(MooTools)

    new Request.JSONP({
        method: 'post',
        url: 'https://somesite.com?needwhat=58b0e',
        evalScripts:false,
        evalResponse:false,
        onSuccess:function(responseTree, responseElements, responseHTML, responseJavaScript)
        {
            $('#gallery').set('html',responseHTML);
            eval(responseJavaScript);
        }
    }).send();

我正在尝试从服务器检索

    {
     "id": "58b0e",
     "items": [
    {
        "title": "Some Title..."
    }
   ]}

1 个答案:

答案 0 :(得分:2)

右。我记得我最初很难理解JSONP,所以我会尝试尽可能地解释它,以及对其他人也有帮助的方式......

在了解错误之前,您需要考虑mootools Request.JSON和Request.JSONP类之间的根本区别。

虽然您可能认为它们是相同的,但是从JSONP中删除了相同原始策略的细微差别,它们根本不相似,它们共享的唯一常见内容是:它们都返回一个对象并共享相同的命名空间(请求)。

除此之外,它们不可能更加不同。 Request.JSONP扩展了默认的XHR类(Request),因为它只能在同一个源域/子域和协议中运行。它期望服务器返回一个JSON字符串,它可以解析/ eval并转换为一个对象。

传递的字符串看起来与您发送的字符串相似,或者更复杂,无论如何。基本的东西。

XHR失败的地方是从其他地方获取数据。您可以通过javascript从其他域导入数据的唯一方法之一。脚本源的来源没有限制。 JSONP从服务器到客户端的问题是它需要将特定的数据传递回您的被调用者函数和范围(在本例中为Request.JSONP)。嵌入脚本是不够的,它需要传递数据。

基本上,JSONP通过在全局范围内定义函数来工作,例如:

window.mycallback = function(data) { console.log(data); };

然后,它通常会请求远程端在名为mycallback的函数中“包装”数据,这是您经常在任何和所有JSONP服务API中看到的。

然后嵌入脚本看起来像(例如):

http://api.twitter.com/1/users/show/shitmydadsays.json?callback=mycallback

Twitter将创建的内容是包含此内容的文件:

mycallback({"listed_count":56509,"profile_background_image_url":"http:\/\/a1.twimg.com\/profile_background_images\/150162853\/desk-final.jpg","protected":false,"profile_link_color":"0084B4","name":"Justin","following":false,"followers_count":2743626,"id_str":"62581962","notifications":false,"utc_offset":-28800,"profile_background_color":"9AE4E8","description":"I'm 29. I live with my 74-year-old dad. He is awesome. I just write down shit that he says","default_profile_image":false,"statuses_count":144,"verified":false,"profile_background_tile":false,"profile_background_image_url_https":"https:\/\/si0.twimg.com\/profile_background_images\/150162853\/desk-final.jpg","favourites_count":0,"location":"","show_all_inline_media":false,"contributors_enabled":false,"profile_sidebar_fill_color":"DDFFCC","screen_name":"shitmydadsays","status":{"retweeted":false,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_reply_to_user_id_str":null,"id_str":"114026815026249728","contributors":null,"in_reply_to_status_id":null,"favorited":false,"truncated":false,"source":"web","place":null,"geo":null,"retweet_count":"100+","in_reply_to_screen_name":null,"id":114026815026249728,"coordinates":null,"text":"\"Bullshit. Don't pretend you don't care about your birthday. It's like watching a hooker pretend she's out for a walk when cops drive by.\"","created_at":"Wed Sep 14 17:24:45 +0000 2011"},"is_translator":false,"url":"http:\/\/www.twitter.com\/justin_halpern","default_profile":false,"follow_request_sent":false,"time_zone":"Pacific Time (US & Canada)","friends_count":1,"profile_sidebar_border_color":"BDDCAD","profile_image_url_https":"https:\/\/si0.twimg.com\/profile_images\/362705903\/dad_normal.jpg","lang":"en","geo_enabled":false,"profile_use_background_image":true,"profile_image_url":"http:\/\/a0.twimg.com\/profile_images\/362705903\/dad_normal.jpg","id":62581962,"created_at":"Mon Aug 03 18:20:34 +0000 2009","profile_text_color":"333333"});

这实际上是做什么的,这是你的数据对象,作为参数传递给你的函数myfunction。

myfunction的第一个参数是你的JSON对象。

Mootools Request.JSONP处理请求映射等,但它需要远程端能够使用callback =参数并将所有数据包装在其中。如果它不支持它,则远程服务不适用于JSONP。

使用Request.JSONP时,上面的url实际上会自动显示为:

http://api.twitter.com/1/users/show/shitmydadsays.json?callback=Request.JSONP.request_map.request_0

MooTools会将listener函数映射到Request.JSONP.request_map对象,但您也可以在本地和远程覆盖回调。

如果您尝试运行此代码,则错误相同:

{
    "foo": "bar"
}

就其本身而言,它不是有效的javascript,会触发SyntaxError: invalid label。获取包装器功能!