在web2.0時代，熟練的使用ajax是每個前端攻城師必備的技能。然而由于受到瀏覽器的限制，ajax不允許跨域通信。
JSONP就是目前主流的實現跨域通信的解決方案。
雖然在在jquery中，我們可以通過$.ajax的dataType設置為jsonp來調用jsonp，但是jsonp和ajax的實現原理一個關系都木有。jsonp主要是通過script可以鏈接遠程url來實現跨域請求的。如：
<script src="http://jsonp.js?callback=xxx"></script>
callback定義了一個函數名，而遠程服務端通過調用指定的函數并傳入參數來實現傳遞參數。
搜索了網上好多文章，他們實現方法都過于簡單，要實際應用還要多加修改，我在這里封裝了一個對象，可以直接運用于實際操作。
var JSONP = {// 獲取當前時間戳now: function() {return (new Date()).getTime();},// 獲取16位隨機數rand: function() {return Math.random().toString().substr(2);},// 刪除節點元素removeElem: function(elem) {var parent = elem.parentNode;if(parent && parent.nodeType !== 11) {parent.removeChild(elem);}},// url組裝parseData: function(data) {var ret = "";if(typeof data === "string") {ret = data;}else if(typeof data === "object") {for(var key in data) {ret += "&" + key + "=" + encodeURIComponent(data[key]);}}// 加個時間戳，防止緩存ret += "&_time=" + this.now();ret = ret.substr(1);return ret;},getJSON: function(url, data, func) {// 函數名稱var name;// 拼裝urlurl = url + (url.indexOf("?") === -1 ? "?" : "&") + this.parseData(data);// 檢測callback的函數名是否已經定義var match = /callback=(/w+)/.exec(url);if(match && match[1]) {name = match[1];} else {// 如果未定義函數名的話隨機成一個函數名// 隨機生成的函數名通過時間戳拼16位隨機數的方式，重名的概率基本為0// 如:jsonp_1355750852040_8260732076596469name = "jsonp_" + this.now() + '_' + this.rand();// 把callback中的?替換成函數名url = url.replace("callback=?", "callback="+name);// 處理?被encode的情況url = url.replace("callback=%3F", "callback="+name);}// 創建一個script元素var script = document.createElement("script");script.type = "text/javascript";// 設置要遠程的urlscript.src = url;// 設置id，為了后面可以刪除這個元素script.id = "id_" + name;// 把傳進來的函數重新組裝，并把它設置為全局函數，遠程就是調用這個函數window[name] = function(json) {// 執行這個函數后，要銷毀這個函數window[name] = undefined;// 獲取這個script的元素var elem = document.getElementById("id_" + name);// 刪除head里面插入的script，這三步都是為了不影響污染整個DOM啊JSONP.removeElem(elem);// 執行傳入的的函數func(json);};// 在head里面插入script元素var head = document.getElementsByTagName("head");if(head && head[0]) {head[0].appendChild(script);}}};實現過程基本寫在注釋里啦，自己看。調用的方法跟jQuery基本一樣。如：
var data = {from: "北京",count: 27,output: "json",callback: "?"}JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp", data, function(json) {console.log(json)});當然要這么寫也行：
JSONP.getJSON("http://api.qunar.com/cdnWebservices.jcp?from=北京&count=27&output=json&callback=?", null, function(json) {console.log(json)});至于服務端的實現，那就比較簡單了，以php為例：
$callback = !empty($_GET['callback']) ? $_GET['callback'] : 'callback';echo $callback.'( .json_encode( $data ).')';
ajax與jsonp的異同再做一些補充說明：
1、ajax和jsonp這兩種技術在調用方式上“看起來”很像，目的也一樣，都是請求一個url，然后把服務器返回的數據進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；
2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標簽來調用服務器提供的js腳本。
3、所以說，其實ajax與jsonp的區別不在于是否跨域，ajax通過服務端代理一樣可以實現跨域，jsonp本身也不排斥同域的數據的獲取。
4、還有就是，jsonp是一種方式或者說非強制性協議，如同ajax一樣，它也不一定非要用json格式來傳遞數據，如果你愿意，字符串都行，只不過這樣不利于用jsonp提供公開服務。
總而言之，jsonp不是ajax的一個特例，哪怕jquery等巨頭把jsonp封裝進了ajax，也不能改變這一點！
好了，寫完了，有什么問題歡迎討論。
新聞熱點
疑難解答
