李威 さぽている

          小說翻譯,日語相關轉(zhuǎn)移至http://blog.hjenglish.com/liwei

          JSONP 跨域原理小解

          最近看一些代碼時,邊看邊改代碼,發(fā)現(xiàn)getJSON這個方法沒法正常使用。

          1 var sURL= "http://api.xxxxxx.com/services/feeds/   
          2    xxxxxxx?format=json&callback=?";
          3 $.getJSON(sURL, function(data) {
          4 // do something with the JSON data returned
          5 }); // end get

          究其原因,發(fā)現(xiàn)url里有個callback,這里使用的是JSONP,一種跨域技術。
          網(wǎng)上搜了下JSONP,多數(shù)都是在講如何使用,而沒有說明為什么它能跨域,且沒有說明url服務器端的代碼時如何生成的。
          http://www.west-wind.com/weblog/posts/2007/Jul/04/JSONP-for-crosssite-Callbacks
          這方面,上面的文章里有比較詳細的描述。

           1 function jsonp(url,callback,name, query)
           2 {                
           3     if (url.indexOf("?"> -1)
           4         url += "&jsonp=" 
           5     else
           6         url += "?jsonp=" 
           7     url += name + "&";
           8     if (query)
           9         url += encodeURIComponent(query) + "&";   
          10     url += new Date().getTime().toString(); // prevent caching        
          11     
          12     var script = document.createElement("script");        
          13     script.setAttribute("src",url);
          14     script.setAttribute("type","text/javascript");                
          15     document.body.appendChild(script);
          16 }

          客戶端的javascript代碼會有如上的操作,代碼不難,很容易理解,也就是加了一個script標簽。

          而服務器端會返回
          callbackFunction( { "x": 10, "y": 15} );
          這樣的數(shù)據(jù)。這其實是一段javascript代碼,
          callbackFunction是方法名,
          { "x": 10, "y": 15}是參數(shù)。客戶端代碼里必須要有
          callbackFunction方法的定義。

           1 public partial class JSONP : System.Web.UI.Page
           2 {
           3     protected void Page_Load(object sender, EventArgs e)
           4     {
           5         if (!string.IsNullOrEmpty(Request.QueryString["jsonp"]) )
           6             this.JsonPCallback();
           7     }
           8 
           9     public void JsonPCallback()
          10     {
          11         string Callback = Request.QueryString["jsonp"];
          12         if (!string.IsNullOrEmpty(Callback))
          13         {
          14             // *** Do whatever you need
          15             Response.Write(Callback + "( {\"x\":10 , \"y\":100} );");
          16         }
          17 
          18         Response.End();
          19     }
          20 }

          之后客戶端會調(diào)用callbackFunction
          使用JQuery的getJSON方法后,callback部分會變成如下形式。
          callback=jQuery1710461701650187642_1326201333794&_=1326201356534
          callbackFunction自然就是
          jQuery1710461701650187642_1326201333794部分了。
          返回來的數(shù)據(jù)也會是jQuery1710461701650187642_1326201333794( { "x": 10, "y": 15} ) 這種形式。

          最后JQuery會調(diào)用匿名函數(shù)
          function(data),data即為json數(shù)據(jù)。

          JQuery已經(jīng)將客戶端部分實現(xiàn)了,服務器端也得遵循同樣的規(guī)則才能實現(xiàn)跨域。


          *這里有一點,JQuery如何將匿名函數(shù)換名字的?有哪位大俠知道的,請用簡單的語言講解下。

          posted on 2012-01-10 21:30 李威 閱讀(349) 評論(0)  編輯  收藏


          只有注冊用戶登錄后才能發(fā)表評論。


          網(wǎng)站導航:
           
          主站蜘蛛池模板: 东乌| 金湖县| 台安县| 涞源县| 开平市| 徐水县| 庆安县| 沛县| 原平市| 陵水| 定日县| 通州区| 榆林市| 安阳县| 密云县| 中方县| 新河县| 沅江市| 山东| 永新县| 时尚| 宜春市| 和政县| 东阳市| 丹巴县| 鸡泽县| 南召县| 城固县| 兴隆县| 平阳县| 麻城市| 甘洛县| 潼关县| 察哈| 迁安市| 通州区| 昌吉市| 岗巴县| 开江县| 鲁山县| 卢湾区|