http://galaxystar.iteye.com/blog/169765
一直沒時間玩js，看到douban網的開放api後，查了些文檔，瞭解了一下 jsonp 跨域請求方式.跟大家分享一下。
其實 jsonp 是個很簡單的一個東西。
主要是利用了 <script/> 標籤對 javascript 文檔的動態解析來實現。（其實也可以用eval函數）
來個超簡單的例子：
首先是準備客戶端的代碼，
Html代碼 ![複製代碼]()
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head>
- <title>Test Jsonp</title>
- <script type="text/javascript">
- function jsonpCallback(result)
- {
- alert(result.msg);
- }
- </script>
- <script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
- </head>
- <body>
- </body>
- </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Jsonp</title>
<script type="text/javascript">
function jsonpCallback(result)
{
alert(result.msg);
}
</script>
<script type="text/javascript" src="http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback"></script>
</head>
<body>
</body>
</html>
其中 jsonCallback 是客戶端註冊的，獲取跨域服務器上的json數據後，回調的函數。
http://crossdomain.com/jsonServerResponse?jsonp=jsonpCallback
這個 url 是跨域服務器取 json 數據的接口，參數爲回調函數的名字，返回的格式爲
Js代碼 ![複製代碼]()
- jsonpCallback({msg:'this is json data'})
jsonpCallback({msg:'this is json data'})
Jsonp原理：
首先在客戶端註冊一個callback, 然後把callback的名字傳給服務器。
此時，服務器先生成 json 數據。
然後以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數 jsonp.
最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文檔，此時數據作爲參數，傳入到了客戶端預先定義好的 callback 函數裏.（動態執行回調函數）
評論
<scrīpt LANGUAGE="Javascrīpt">
<!--
Function.prototype.bind = function() {
var __method = this, args = [], ōbject = arguments[0];
for (var i = 1; i < arguments.length; i++)
args.push(arguments[i]);
return function(moreargs) {
for (var i = 0; i < arguments.length; i++)
args.push(arguments[i]);
return __method.apply(object, args);
}
};
var scrīptTagProxy=function(){
this.head = document.getElementsByTagName("head")[0];
}
scrīptTagProxy.TRANS_ID=1000;
scrīptTagProxy.prototype={
loadUrl : function(url, params, caller,onComplete, onFailure){
transId=++scrīptTagProxy.TRANS_ID;
var trans = {
id : transId,
cb : "stcCallback"+transId,
scrīptId : "stcscrīpt"+transId,
url : url,
params : params,
caller : caller,
onComplete : onComplete,
onFailure :onFailure
};
var conn = this;
window[trans.cb] = function(o){
conn.handleResponse(o, trans);
};
params='callback='+trans.cb+'&'+params;
var scrīpt = document.createElement("scrīpt");
scrīpt.setAttribute("src", url+params);
scrīpt.setAttribute("type", "text/javascrīpt");
scrīpt.setAttribute("id", trans.scrīptId);
//設置超時
trans.timeoutId=setTimeout(this.handleFailure.bind(conn,trans), 10000);
this.head.appendChild(scrīpt);
},
handleResponse : function(o, trans){
this.destroyTrans(trans, true);
trans.onComplete.call(trans.caller||window, o);
},
handleFailure : function(trans){
this.destroyTrans(trans, false);
if(trans.onFailure){
trans.onFailure.call(trans.caller||window, null);
}else{
alert('超時');
}
},
destroyTrans : function(trans, isLoaded){
this.head.removeChild(document.getElementById(trans.scrīptId));
clearTimeout(trans.timeoutId);
if(isLoaded){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
}else{
window[trans.cb] = function(){
window[trans.cb] = undefined;
try{
delete window[trans.cb];
}catch(e){}
};
}
}
}
function init(){
var proxy=new scrīptTagProxy();
proxy.loadUrl('http://search.yahooapis.com/ImageSearchService/V1/imageSearch?', 'appid=YahooDemo&query=Madonna&output=json', window,process)
}
function process(a){
alert('這個結果從服務器返回:'+a)
}
//-->
</scrīpt>
<body ōnload = "init()">
</body>
我的意思是，無論你用iframe或是隻能用於ie的documentFragment（這明顯是ie的一個問題，憑什麼要爲任意一個新節點產生一個新的腳本scope？而且我懷疑這會引起內存泄漏——ms的人在說memory leak的patterns那個文章裏曾經提到過由這一問題引起的內存泄漏），所付出的代價似乎比不上得到的好處。
因爲不用iframe，你也可以達到向最終編程者隱藏callback名字的目標，只需要callback是由你的框架託管和包裝起來就可以了。差別只在於，這種方式，這個callback名字會污染當前的global上的命名空間，iframe則不會，因爲它在一個獨立的scope裏——但是付出的代價是有獨立的browserContext（包括window、document等對象）。
因此，iframe只是一個錦上添花的工具。我認爲理想的目標是：
1. callback名字最好是可配置的。因爲萬一有些人寫死了callback名字。。。
2. 有些人不僅寫死了，而且不是callback({...json...})，而是var hardCodeJSON = {...json...}，最好也能處理這種情況（肯定是可以做到的）。
3. 不能每次都搞一個iframe，這樣太浪費。iframe的唯一目的其實是搞一個獨立的scope，所以弄一個iframe就可以了。還有基於前面提到的因素，建議不要用documentFragment。
那麼在一個iframe情況下，你說的“多個一模一樣的callback”的衝突還是存在。這就需要用其他技巧解決。所以反過來，如果其他技巧解決了這個問題，那麼iframe的唯一好處就是一丁點都不污染全局命名空間——個人來講，我認爲這個好處還是相當有限的。
下面說一個一般化（也就是不需要iframe）的最土的思路。原本我們插入一個<script>標籤來讀取json。現在我們可以插入3個 <script>。第一個做初始化，建立服務器所需要的callback函數，如果有命名衝突，則把之前的那個變量保存起來。第二個還是 load JSON。第三個做清理，去掉服務器所用的callback，並把之前的變量恢復起來。
當然這只是一個一般的描述，實際做的時候，肯定有很多問題要解決，但是從大體上看，應該是行得通的。
原來firefox需要用絕對地址纔可以,safari需要往iframe write html纔行,我做了個簡單的demo,唯一的一個約定就是輸出的json文件的格式是var json = {...};
演示:http://wfsr.net/temp/loadjson.html
loadjson.html(沒有寫兼容safari的方式)
json.js
var json = {"number" : Math.random() * 100};比如第一次回調就是xxx?_callback1
第二次就是xxx?_callback2
當然這個過程是被包裝起來自動的，最終程序員不用管它。
有人說全局命名污染，這個是沒錯。但是問題其實沒那麼嚴重，大不了你產生一個GUID好了，再有衝突，宇宙都毀滅幾次了。
這樣的唯一問題是它不是靜態化的。
要靜態化，其實就是避免不了對callback名字的約定。那麼我們就污染吧，反正就污染一個，比如叫他 _九天十地菩薩搖頭怕怕劈靂金光雷電掌_json_callback。當然考慮到每次都要寫，我建議還是搞短點，例如 JSON.CB
JSON.CB完全可以鑑別自己是在哪個script裏被調用的（具體方法就省略了），所以你在生成script時，插點草標就可以了。
iframe在這裏唯一的好處就是連這個小小污染都沒有了。不過考慮是否值得呢？這就賤人賤智啦！
問題是，emu同學花了那麼多力氣，其實繞了一圈也沒有能提供更好的方案。因爲所做的，不過是對最終編程者隱藏掉callback名字而已。這種活，不用iframe技巧，其實一樣可以達到的。
山人講的其他問題，我理解是這樣的：
1. 我不想調一個全局函數，我想調一個局部函數，或者方法，總之那纔是我的邏輯。
2. 我可能出於某種原因要同時發起若干個回調。
這種需求我覺得確實需要對callback上做包裝。
首先，他隱含了個條件（或者說這句“想要用一致的callback接口來回傳數據”稍稍說到了一點）文章裏沒說，就是服務器的輸出，實際上是帶有callback名字的，他的例子裏是visitCountCallBack。
這說明兩點：
第一：服務器輸出的不是真正的json。
第二：仍然是耦合。只不過現在client code看不到這個耦合，而是library和server代碼的隱藏耦合。對於同時包含兩端的框架來說，這也許ok，但是我很不喜歡這種隱匿式的耦合。
這兩點比之xxx?callback=myCallback，毛病大許多。
第一條就是強制了callback接口，你爽了，別人（別的調用者）都不爽。
第二條就是對耦合的認識，我認爲是有失偏頗的。
BTW，documentFragment來得到一個單獨的script作用域，我擔心會有內存泄漏，可能應該多多測試看看。
另外推薦一下emu的這種方法:
http://www.blogjava.net/emu/articles/129240.html
不過我測試發現只有ie和opera支持,firefox和safari沒效果,如果能兼容,這個方法才比較有吸引力