javascript 動態跨domain 要資料, use jquery and rails

JSONP
jQuery抓取跨網域外的資料(cross-domain) 運用JSONP
JSON & JSONP 簡介

javascipt 基本上是沒法跨domain 要資料的, 但是現在有一種協定JSONP

什麼是JSONP：JSONP(JSON with Padding)是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式)

作法是
* 使用script tag載入javascript檔的方式，可以cross domain取得資料。
* server端傳回的資料採JSON(Javascript object notation)格式。
* server端提供一項服務，接受回呼函式(callback function)名稱為參數，將傳回的資料當成回呼函式的參數，傳回對此回呼函式的呼叫(padding 所指的就是此加上回呼函式的填充動作)。當此javascript傳輸完成，client端會自動執行，呼叫此回呼函式，因此在資料傳輸完畢時可以得知。


光是說明還是看不懂的話, 用例子吧
範例

以Flickr提供的服務查詢標籤包含羅平、油菜花、sunset的公開照片，並加入參數format=json、jsoncallback=doPhoto，表示傳回資料為JSON格式，並將其填入回呼函式doPhoto的呼叫中作為參數：<br /><[script type="text/javascript" src="http: //api.flickr.com/services/feeds/photos_public.gne?tags=羅平,油菜花, sunset&tagmode=all&format=json&jsoncallback=doPhoto"]> <br />
會回傳一個 callback_function_name(JSON格式的資料)
<br />#server 端利用傳來的paramters把user要的資料拿出來後弄成JSON格式<br />#當成參數, 用代給callback function一樣的作法 丟回給client<br />doPhoto({<br /> "title": "每個人的相片 已標籤 羅平, 油菜花 和 sunset",<br /> "link": "http://www.flickr.com/photos/",<br /> "description": "",<br /> "modified": "2007-04-22T14:19:09Z",<br /> "generator": "http://www.flickr.com/",<br /> "items": [<br /> {<br /> "title": "羅平金雞嶺夕陽",<br /> "link": "http://www.flickr.com/photos/38362352@N00/468370409/",<br /> "media": {"m":"http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg"},<br /> "date_taken": "2007-04-22T22:19:09-08:00",<br /> "description": "...",<br /> "published": "2007-04-22T14:19:09Z",<br /> "author": "nobody@flickr.com (Nature RGB)",<br /> "author_id": "38362352@N00",<br /> "tags": "sunset yunnan 油菜花 羅平"<br /> }<br /> ]<br />})<br />

上面的script tag 跑了之後, 就會像下面那樣, 就是由call 一個 function 的script, 就利用由server 拼出call function 的script , 還有被弄成參數 之 我們需要的資料
<br /><[script]><br />doPhoto({<br /> "title": "每個人的相片 已標籤 羅平, 油菜花 和 sunset",<br /> "link": "http://www.flickr.com/photos/",<br /> "description": "",<br /> "modified": "2007-04-22T14:19:09Z",<br /> "generator": "http://www.flickr.com/",<br /> "items": [<br /> {<br /> "title": "羅平金雞嶺夕陽",<br /> "link": "http://www.flickr.com/photos/38362352@N00/468370409/",<br /> "media": {"m":"http://farm1.static.flickr.com/211/468370409_319f383a24_m.jpg"},<br /> "date_taken": "2007-04-22T22:19:09-08:00",<br /> "description": "...",<br /> "published": "2007-04-22T14:19:09Z",<br /> "author": "nobody@flickr.com (Nature RGB)",<br /> "author_id": "38362352@N00",<br /> "tags": "sunset yunnan 油菜花 羅平"<br /> }<br /> ]<br />})<br /><[/scirpt]><br />
最後就是準備好你的callback function 來被call, 也就是來處理傳回的資料
<br />function doPhoto(result) {<br /> var div = document.getElementById("flickr photos");<br /> for(var i=0; i < result.items.length; i++) {<br /> var img = document.createElement("img");<br /> img.setAttribute("src",result.items[i].media.m);<br /> img.setAttribute("alt",result.items[i].title);<br /> var a = document.createElement("a");<br /> a.setAttribute("href",result.items[i].link);<br /> a.setAttribute("target","_blank");<br /> a.appendChild(img);<br /> div.appendChild(a);<br /> }<br />}<br />

---

我的範例 jquery & rails
Client
<br /><[script type="text/javascript"]><br /> function getTarget(result) { <br /> $('#test').attr('value', result.target_name+'('+result.target_id+')')<br /> } <br />$(function() {<br /> $('#button1').click(function(){<br /> var target_id = $('#target_id').attr('value');<br /> var strURL='http://server.domain.com.tw/target/jsonp?format=json&jsoncallback=getTarget&target_id='+target_id+'';<br /><br /> $.ajax({<br /> type:'GET',<br /> dataType:'jsonp',<br /> url:strURL,<br /> error: function(xmlHttpRequest,error) {<br /> alert('Ajax request ERROR');<br /> }<br /> })<br /> })<br />});<br /><[/script]><br /><input name="button1" id="button1" type="button" value="test" /><br /><input id="test" type='input' value="" /><br /><input id="target_id" type='input' value="" /><br />

Rails Server 端<br /> def jsonp<br /> if params[:format] == 'json' && !params[:jsoncallback].blank? && !params[:target_id].blank?<br /> render :json => "#{params[:jsoncallback]}(#{Target.find(params[:target_id]).to_json})"<br /> end<br /> end<br />