成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

jsonp的原理與實現(xiàn)

SillyMonkey / 2689人閱讀

摘要：概述是一種跨域通信的手段，它的原理其實很簡單首先是利用標簽的屬性來實現(xiàn)跨域?？煽康膶崿F(xiàn)添加回調(diào)函數(shù)拼接傳遞的是一個匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個全局方法出錯處理使用示例來源個人博客

1. 概述

jsonp是一種跨域通信的手段，它的原理其實很簡單：

首先是利用script標簽的src屬性來實現(xiàn)跨域。

通過將前端方法作為參數(shù)傳遞到服務器端，然后由服務器端注入?yún)?shù)之后再返回，實現(xiàn)服務器端向客戶端通信。

由于使用script標簽的src屬性，因此只支持get方法

2. 實現(xiàn)流程

設定一個script標簽

callback定義了一個函數(shù)名，而遠程服務端通過調(diào)用指定的函數(shù)并傳入?yún)?shù)來實現(xiàn)傳遞參數(shù)，將fn(response)傳遞回客戶端

$callback = !empty($_GET["callback"]) ? $_GET["callback"] : "callback";
echo $callback."(.json_encode($data).)";

客戶端接收到返回的js腳本，開始解析和執(zhí)行fn(response)

3. jsonp簡單實現(xiàn)

一個簡單的jsonp實現(xiàn)，其實就是拼接url，然后將動態(tài)添加一個script元素到頭部。

function jsonp(req){
    var script = document.createElement("script");
    var url = req.url + "?callback=" + req.callback.name;
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script); 
}

前端js示例

function hello(res){
    alert("hello " + res.data);
}
jsonp({
    url : "",
    callback : hello 
});

服務器端代碼

var http = require("http");
var urllib = require("url");

var port = 8080;
var data = {"data":"world"};

http.createServer(function(req,res){
    var params = urllib.parse(req.url,true);
    if(params.query.callback){
        console.log(params.query.callback);
        //jsonp
        var str = params.query.callback + "(" + JSON.stringify(data) + ")";
        res.end(str);
    } else {
        res.end();
    }
    
}).listen(port,function(){
    console.log("jsonp server is on");
});

然而，這個實現(xiàn)雖然簡單，但有一些不足的地方：

我們傳遞的回調(diào)必須是一個全局方法，我們都知道要盡量減少全局的方法。

需要加入一些參數(shù)校驗，確保接口可以正常執(zhí)行。

4. 可靠的jsonp實現(xiàn) 
(function (global) {
    var id = 0,
        container = document.getElementsByTagName("head")[0];

    function jsonp(options) {
        if(!options || !options.url) return;

        var scriptNode = document.createElement("script"),
            data = options.data || {},
            url = options.url,
            callback = options.callback,
            fnName = "jsonp" + id++;

        // 添加回調(diào)函數(shù)
        data["callback"] = fnName;

        // 拼接url
        var params = [];
        for (var key in data) {
            params.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
        }
        url = url.indexOf("?") > 0 ? (url + "&") : (url + "?");
        url += params.join("&");
        scriptNode.src = url;

        // 傳遞的是一個匿名的回調(diào)函數(shù)，要執(zhí)行的話，暴露為一個全局方法
        global[fnName] = function (ret) {
            callback && callback(ret);
            container.removeChild(scriptNode);
            delete global[fnName];
        }

        // 出錯處理
        scriptNode.onerror = function () {
            callback && callback({error:"error"});
            container.removeChild(scriptNode);
            global[fnName] && delete global[fnName];
        }

        scriptNode.type = "text/javascript";
        container.appendChild(scriptNode)
    }

    global.jsonp = jsonp;

})(this);

使用示例

jsonp({
    url : "www.example.com",
    data : {id : 1},
    callback : function (ret) {
        console.log(ret);
    }
});
5. 來源

個人博客

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91190.html

相關(guān)文章

  • 關(guān)于javascript跨域及JSONP的原理與應用

    摘要：因為同源策略的限制，我們不能在與外部服務器進行通信的時候使用。這個是跨域服務器取數(shù)據(jù)的接口，參數(shù)為回調(diào)函數(shù)的名字，返回的格式為原理首先在客戶端注冊一個然后把的名字傳給服務器。 一、同源策略 同源策略，它是由Netscape提出的一個著名的安全策略，現(xiàn)在所有的可支持javascript的瀏覽器都會使用這個策略。 為什么需要同源策略，這里舉個例子： 假設現(xiàn)在沒有同源策略，會發(fā)生什么事...

    CoderBear 評論0 收藏0

  • JSONP原理及JQUERY JSONP的使用

    摘要：同源策略在中有一個很重要的安全性限制，被稱為同源策略。然而，當進行一些比較深入的前端編程的時候，不可避免地需要進行跨域操作，這時候同源策略就顯得過于苛刻。 JSONP原理 JSON和JSONP 　　JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。對于JSON大家應該是很了解了吧，不是很清楚的朋友可以去json.org上了解下，簡單易懂。 　　...

    suosuopuo 評論0 收藏0

  • JSONP原理剖析

    摘要：運行一下頁面，成功彈出提示窗口，的執(zhí)行全過程順利完成到這里為止的話，相信你已經(jīng)能夠理解的客戶端實現(xiàn)原理了吧剩下的就是如何把代碼封裝一下，以便于與用戶界面交互，從而實現(xiàn)多次和重復調(diào)用。 先說說JSONP是怎么產(chǎn)生的： 其實網(wǎng)上關(guān)于JSONP的講解有很多，但卻千篇一律，而且云里霧里，對于很多剛接觸的人來講理解起來有些困難，小可不才，試著用自己的方式來闡釋一下這個問題，看看是否有幫助。 1、...

    DangoSky 評論0 收藏0

  • jsonp的原理介紹及Promise封裝

    摘要：什么叫是填充式或參數(shù)式的簡寫，是通過請求跨域接口，獲取數(shù)據(jù)的新實現(xiàn)方式的實現(xiàn)原理動態(tài)創(chuàng)建標簽，因為標簽是沒有同源策略限制，可以跨域的。具體看接下來的實現(xiàn)這個是庫的具體實現(xiàn)，建議下載來研究一下，最好自己動手寫一遍。 什么叫jsonp? jsonp是json with padding（填充式json或參數(shù)式json）的簡寫，是通過ajax請求跨域接口，獲取數(shù)據(jù)的新實現(xiàn)方式 jsonp的實現(xiàn)...

    ninefive 評論0 收藏0

  • Jsonp及其實現(xiàn)原理

    摘要：同源策略，它是由提出的一個著名的安全策略，現(xiàn)在所有支持的瀏覽器都會使用這個策略。客戶端在對文件調(diào)用成功之后，也就獲得了自己所需的數(shù)據(jù)，剩下的就是按照自己需求進行處理和展現(xiàn)了，這種獲取遠程數(shù)據(jù)的方式看起來非常像，但其實并不一樣。 參考資料 一、先說說JSON 首先JSON是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式。 JSON的優(yōu)點： 基于純文本，跨平臺傳遞極其簡單； Javas...

    TesterHome 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<