JSONP原理

cag2050發表於2017-10-12
JSON

JSONP原理：

  1. 首先在客戶端註冊一個callback, 然後把callback的名字傳給伺服器。
  2. 此時，伺服器先生成 json 資料。
  3. 然後以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的callback引數值 .
  4. 最後將 json 資料直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文件，返回給客戶端。
  5. 客戶端瀏覽器，解析script標籤，並執行返回的 javascript 文件，此時資料作為引數，傳入到了客戶端預先定義好的 callback 函式裡.

jsonp 原理，程式碼示意：

本地定義的函式===

<script>
    function local_func(data) {
        // 函式內容
    }
</script>

返回的資料放在srcipt標籤裡===

<script src="http://api.douban.com/v2/movie/in_theaters?callback=local_func"></script>
等價於：
<script>
    ;local_func([返回的資料])
</script>

jsonp的2種實現方式：

1.jsonp 在原生js中的實現:
通過src=”http://api.douban.com/v2/movie/in_theaters?callback=local_func”。
直接輸入訪問：http://api.douban.com/v2/movi… ，返回的資料是一個物件：{xxx}。
直接輸入訪問：http://api.douban.com/v2/movi… ，返回的資料是一個物件：{xxx}。
直接輸入訪問：http://api.douban.com/v2/movi… ，返回的資料是：;local_func({xxx})。
注意點：
callback指定的回撥函式，是客戶端註冊的，必須是定義在window下的全域性函式。
例子網址：https://github.com/cag2050/js…

2.jsonp 在jquery ajax中的實現:
例子網址：https://github.com/cag2050/js…

相關文章