JSONP原理及簡單實現 可作簡單插件使用

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;
        
        // 拼裝url
        url = 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_8260732076596469
            name = "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";
        // 設置要遠程的url
        script.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 ).')';