2011-10-11 39 views
1

击中让我的数据,以显示在页面上,不断收到挂了一个“无效的标签”错误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(); 

什么我m试图从服务器检索

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

乍一看,它看起来像在JSON的“标题”行末尾的逗号不应该在那里。 –

回答

2

没错。我记得最初很难让我的头部绕过JSONP,所以我会尽力解释它尽可能最好,并且可能会对其他人有所帮助...

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

尽管您可能会认为它们与JSONP中删除的同源策略的细微差别相同,但它们并不完全相同,它们共享的唯一共同点是:它们都返回一个对象并共享相同的命名空间(请求)

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

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

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

基本上,JSONP的工作原理是在全球范围内定义一个函数的装置,例如:

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

那么它通常请求远程端为“包装”的功能的数据称为mycallback,事您将经常在任何和所有API中看到JSONP服务。

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

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,上面的网址实际上会自动熄灭为:

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。获取包装功能!