亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

SillyMonkey / 2741人閱讀

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

1. 概述

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

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

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

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

2. 實(shí)現(xiàn)流程

設(shè)定一個(gè)script標(biāo)簽

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

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

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

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

一個(gè)簡單的jsonp實(shí)現(xiàn)，其實(shí)就是拼接url，然后將動(dòng)態(tài)添加一個(gè)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 
});

服務(wù)器端代碼

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");
});

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

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

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

4. 可靠的jsonp實(shí)現(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;

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

        // 出錯(cuò)處理
        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. 來源

個(gè)人博客

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

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

相關(guān)文章

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

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

    CoderBear 評論0 收藏0

  • JSONP原理及JQUERY JSONP的使用

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

    suosuopuo 評論0 收藏0

  • JSONP原理剖析

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

    DangoSky 評論0 收藏0

  • jsonp的原理介紹及Promise封裝

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

    ninefive 評論0 收藏0

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

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

    TesterHome 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<