MooTools JSONP无效标签

Question

让我的数据显示在页面上，一直挂在一个"Invalid label"错误

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..."
    }
   ]}

Answer 1

正确。我记得一开始很难理解JSONP，所以我将尽我所能解释它，并以一种可能对其他人也有帮助的方式……

在理解错误之前，您需要考虑mootools请求之间的根本区别。JSON和请求。JSONP类。

尽管您可能认为它们是相同的，只是从JSONP中删除了同源策略的轻微差异，但它们根本不相似，它们共享的唯一共同点是:它们都返回一个对象并共享相同的命名空间(请求)

除此之外，他们简直是天壤之别。请求。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请求。JSONP处理请求映射等，但它需要远程端能够使用callback=参数并将所有数据封装在其中。如果不支持JSONP，则远程服务不适合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。获得一个包装函数!