欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一看就懂：jsonp詳解

 更新時(shí)間：2015年06月01日 09:08:08   投稿：junjie  
這篇文章主要介紹了一看就懂：jsonp詳解,本文用淺顯易懂的語言組織講解了什么是jsonp、jsonp怎么用、jsonp使用實(shí)例等內(nèi)容,需要的朋友可以參考下

json相信大家都用的多，jsonp我就一直沒有機(jī)會(huì)用到，但也經(jīng)?？吹?，只知道是“用來跨域的”，一直不知道具體是個(gè)什么東西。今天總算搞明白了。下面一步步來搞清楚jsonp是個(gè)什么玩意。

同源策略

首先基于安全的原因，瀏覽器是存在同源策略這個(gè)機(jī)制的，同源策略阻止從一個(gè)源加載的文檔或腳本獲取或設(shè)置另一個(gè)源加載的文檔的屬性?？雌饋聿恢朗裁匆馑迹瑢?shí)踐一下就知道了。

1、隨便建兩個(gè)網(wǎng)頁

一個(gè)端口是2698，一個(gè)2701，按照定義它們是不同源的。

2.用jQuery發(fā)起不同源的請(qǐng)求
在2698端口的網(wǎng)頁上添加一個(gè)按鈕，Click事件隨便發(fā)起兩個(gè)向端口為2701域的請(qǐng)求。

復(fù)制代碼 代碼如下:

$("#getOtherDomainThings").click(function () {
    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
        console.log(data)
    })

    $.get("http://localhost:2701/home/index", function (data) {
        console.log(data)
    })
})


根據(jù)同源策略，很明顯會(huì)悲劇了。瀏覽器會(huì)阻止，根本不會(huì)發(fā)起這個(gè)請(qǐng)求。（not allowed by Access-Control-Allow-Origin）

OK，原來jsonp是要解決這個(gè)問題的。

script標(biāo)簽的跨域能力
不知道大家知不知道CDN這個(gè)東西，例如微軟的CDN，使用它，我們的網(wǎng)頁可以不提供jQuery，由微軟的網(wǎng)站幫我們提供：

復(fù)制代碼 代碼如下:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我們的2698端口的網(wǎng)頁，上面我們在Click事件里有一個(gè)對(duì)2701端口域的jQuery文件的請(qǐng)求，這次使用script標(biāo)簽來請(qǐng)求。
復(fù)制代碼 代碼如下:

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

當(dāng)然，200，OK了

同樣是端口2698的網(wǎng)頁發(fā)起對(duì)2701域的請(qǐng)求，放在script里設(shè)置scr屬性的OK了，另一個(gè)方式就悲劇。利用script的跨域能力，這就是jsonp的基礎(chǔ)。

利用script獲取不同源的json
既然它叫jsonp，很明顯目的還是json，而且是跨域獲取。根據(jù)上面的分析，很容易想到：利用js構(gòu)造一個(gè)script標(biāo)簽，把json的url賦給script的scr屬性，把這個(gè)script插入到dom里，讓瀏覽器去獲取。實(shí)踐：

復(fù)制代碼 代碼如下:

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一個(gè)按鈕事件來測試一下：
復(fù)制代碼 代碼如下:

$("#getOtherDomainJson").click(function () {
    $.get('http://localhost:2701/home/somejson', function (data) {
        console.log(data)
    })
})

首先，第一個(gè)瀏覽器，http://localhost:2701/home/somejson這個(gè)Url的確是存在一個(gè)json的，而且在 2698網(wǎng)頁上用script標(biāo)簽來請(qǐng)求這個(gè)2701這個(gè)Url也是200OK的，但是最下面報(bào)js語法錯(cuò)誤了。原來用script標(biāo)簽加載完后，會(huì)立即 把響應(yīng)當(dāng)js去執(zhí)行，很明顯{"Email":"zhww@outlook.com","Remark":"我來自遙遠(yuǎn)的東方"}不是合法的js語句。

利用script獲取異域的jsonp

顯然，把上面的json放到一個(gè)回調(diào)方法里是最簡單的方法。例如，變成這樣：

如果存在jsonpcallback這個(gè)方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠(yuǎn)的東方"})就是合法的js語句。

由于服務(wù)器不知道客戶端的回調(diào)是什么，不可能hard code成jsonpcallback，所以就帶一個(gè)QueryString讓客戶端告訴服務(wù)端，回調(diào)方法是什么，當(dāng)然，QueryString的key要遵從服務(wù)端的約定，上面的是”callback“。

添加回調(diào)函數(shù)：

復(fù)制代碼 代碼如下:

function jsonpcallback(json) {
    console.log(json)
}

把前面的方法稍微改改參數(shù)：
復(fù)制代碼 代碼如下:

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

200OK，服務(wù)器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠(yuǎn)的 東方"})，我們也寫了jsonpcallback方法，當(dāng)然會(huì)執(zhí)行。OK順利獲得了json。沒錯(cuò)，到這里就是jsonp的全部。

利用jQuery獲取jsonp
上面的方式中，又要插入script標(biāo)簽，又要定義一個(gè)回調(diào)，略顯麻煩，利用jQuery可以直接得到想要的json數(shù)據(jù)，同樣是上面的jsonp：

復(fù)制代碼 代碼如下:

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的結(jié)果跟上面類似。

總結(jié)

一句話就是利用script標(biāo)簽繞過同源策略，獲得一個(gè)類似這樣的數(shù)據(jù)，jsonpcallback是頁面存在的回調(diào)方法，參數(shù)就是想得到的json。

復(fù)制代碼 代碼如下:

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我來自遙遠(yuǎn)的東方"})

ADD 原生js:

復(fù)制代碼 代碼如下:

<button id="btn">click</button>
<script type="text/javascript">
    function $(str){
        return document.getElementById(str)
    }
    function CreateScript(src) {
        var Scrip=document.createElement('script');
        Scrip.src=src;
        document.body.appendChild(Scrip);
    }
    function jsonpcallback(json) {
            console.log(json);//Object { email="中國", email2="中國222"}
    }
    $('btn').onclick=function(){
      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")   
    }
</script>

相關(guān)文章

最新評(píng)論