JQuery時間

將!! 將!!

麻煩的事情來了,

因為Facebook的架構,

如果想在FBML下引用JQuery,

FBML會更改所有javascript的code來符合其規範,

而JQuery是很明顯的更改不動,

所以要用JQuery在FBML下似乎是不可能的事情,

看樣子只能用JQuery在iframe下了,

but...

我實在是不想放FBML已經做好的許多語法啊!!!!

天啊!! 自古忠孝難兩全!!

幸好,網路總是有神人,

又有一個FBJS的API可供使用

fbjqry

http://code.google.com/p/fbjqry/

http://apps.facebook.com/fbjqry_demo

目前只到0.2版,不過對於已熟悉JQuery開發Ajax環境已是天大的福音。

現在來實做一下如何插入JQuery在fbjqry(FBML)下吧!

下載fbjqry後有兩個檔案放在目錄下

FBjqRY.min.js

Utility.js

修改一下 app.yaml或是修改main.py

讓browser可以呼叫到這兩個檔案

加一下,下列這段,並把WSGIApplication改為('/', FBJS),


class FBJS(webapp.RequestHandler):
    def get(self):
        pass
    def post(self):
        self.response.out.write(template.render('FBJS.html',0))

新增FBJS.html

內容如下:


<script src="http://..外網IP或GAE的位址/Utility.js"></script>
<script src="http://..外網IP或GAE的位址/FBjqRY.min.js"></script>
<script>
function change()
{
$('div').css('border', '1px solid');
$('#aa').text('yes');
$('div').fadeIn(1000);

}

$('#cc').click(function(event){change();})
</script>

<fb:name uid="loggedinuser" />
<div id="dd" style="display:none" >Hello FBJS</div>
<div id="aa">Hello Faa</div>

<input id="cc" type=button value="press" / >
將! 將!!

當你按下 press 後, 就會跟著改變,或是動作了,一切就和JQuery一樣....

那就下課啦........

啊!!!...(抬下同學要喊不喊的聲音)....老師....

啊~~~ 還是被發現了..

是的,

示範完了CSS Effects Events,那Ajax呢??

這可是JQuery最重要的精神呢!!

嗯,啊~ 這個~ 那個~

因為fbjqry目前只到0.2版,所以...在code.google.com/fbjqry上有明寫著

目前只提供了

CSS

Chainiong

Effects

Events

所以$.ajax 就還沒支援囉!!(學一下阿六仔,弱弱的問一下什麼時候會有啊)~~啊災~~

 

不過這部份,目前還是可以用FBJS 既有的AJAX 物件來做,雖然不連貫了...(哭)

新增main.py

class msg(webapp.RequestHandler):
    def post(self):#facebook只有post方法喔
        self.response.out.write(u'聽說 聽說很好看')

WSGI多一個參數 ('/msg',msg)

修改一下FBJS.html內容如下:


<script src="http://..外網IP或GAE的位址/Utility.js"></script>
<script src="http://..外網IP或GAE的位址/FBjqRY.min.js"></script>
<script>
function change()
{

var ajax =new Ajax();

ajax.responseType=Ajax.RAW;//資料格式有3種,請參閱Facebook與FunP應用程式設計
ajax.ondone=function(data){$('#aa').text(data);};//AJAX成功後所做的事項

 

ajax.post('http://..外網IP或GAE的位址/msg')//下此命令便會實際運行了, 這個詐看之下有問題的url,你在打這行時,心裡一定毛毛的吧,想說這不是跨網域了嗎? 抓不到資料吧!! Wolke不要亂教好嗎??? 這...請容在下在下面解釋一番..

}

$('#cc').click(function(event){change();})
</script>

<fb:name uid="loggedinuser" />
<div id="dd" style="display:none" >Hello FBJS</div>
<div id="aa">Hello Faa</div>
<input type=button value="press" / >

FBML

運做方式為 user(browser)->Facebook->Server->Facebook->user(browser)

詐看之下有問題的,一般來說是在user端執行的javascript,

AJAX.post指令巧妙的被Facebook給包裝起來,

所以AJAX.post真正運行的地方是在Facebook伺服器上,而不是在你的browser上啊!!!

最後按一下press吧~
將! 將!!
Ajax被實作出來囉~

    全站熱搜

    wolkesau 發表在 痞客邦 留言(3) 人氣()