簡單透徹理解JSONP原理及使用

時間 2019-11-08

標籤簡單透徹理解 jsonp 原理使用欄目 JSON 简体版

原文原文鏈接

什麼是JSONPjavascript

首先提一下JSON這個概念，JSON是一種輕量級的數據傳輸格式，被普遍應用於當前Web應用中。JSON格式數據的編碼和解析基本在全部主流語言中都被實現，因此如今大部分先後端分離的架構都以JSON格式進行數據的傳輸。php

那麼JSONP是什麼呢？
首先拋出瀏覽器同源策略這個概念，爲了保證用戶訪問的安全，現代瀏覽器使用了同源策略，即不容許訪問非同源的頁面，詳細的概念你們能夠自行百度。這裏你們只要知道，在ajax中，不容許請求非同源的URL就能夠了，好比www.a.com下的一個頁面，其中的ajax請求是不容許訪問www.b.com/c.php這樣一個頁面的。html

JSONP就是用來解決跨域請求問題的，那麼具體是怎麼實現的呢？前端

JSONP原理java

ajax請求受同源策略影響，不容許進行跨域請求，而script標籤src屬性中的連接卻能夠訪問跨域的js腳本，利用這個特性，服務端再也不返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。jquery

jsonp根本不是ajax，由於它根本不產生XMLHttpRequest對象，只是它表現有點像ajax -- 沒有刷新頁面就能夠獲取到數據，但這不是ajax的根本特徵（ajax的根本特徵是XMLHttpRequest對象）。另外ajax大多數返回json或者文本數據，而jsonp返回的是一個js文檔。ajax

JSONP具體實現chrome

1.首先看下ajax中若是進行跨域請求會如何。
前端代碼在域www.practice.com下面，使用ajax發送了一個跨域的get請求json

<!DOCTYPE html> <html> <head> <title>GoJSONP</title> </head> <body> <script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> <script type="text/javascript" src="jquery-1.8.3.min.js">
</script> <script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            type: "json",
            success : function(data) {
                jsonhandle(data);
            }

        });
    });
</script> </body> </html>

後端PHP代碼放在域www.practice-zhao.com下，簡單的輸出一段json格式的數據後端

jsonhandle({
    "age" : 15,
    "name": "John",
})

當訪問前端代碼http://www.practice.com/gojsonp/index.html 時 chrome報如下錯誤

提示了不一樣源的URL禁止訪問

2.下面使用JSONP，將前端代碼中的ajax請求去掉，添加了一個script標籤，標籤的src指向了另外一個域www.practice-zhao.com下的remote.js腳本

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="http://www.practice-zhao.com/remote.js"></script> 
</body> 
</html>

這裏調用了跨域的remote.js腳本，remote.js代碼以下：

jsonhandle({
    "age" : 15,
    "name": "John",
})

也就是這段遠程的js代碼執行了上面定義的函數，彈出了提示框

3.將前端代碼再進行修改，代碼以下：

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript">
    function jsonhandle(data){
        alert("age:" + data.age + "name:" + data.name);
    }
</script> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript">
    $(document).ready(function(){
        var url = "http://www.practice-zhao.com/student.php?id=1&callback=jsonhandle";
        var obj = $('<script><\/script>');
        obj.attr("src",url);
        $("body").append(obj);
    });
</script> 
</body> 
</html>

這裏動態的添加了一個script標籤，src指向跨域的一個php腳本，而且將上面的js函數名做爲callback參數傳入，那麼咱們看下PHP代碼怎麼寫的：

<?php 
$data = array( 'age' => 20, 'name' => '張三', ); 
$callback = $_GET['callback'];
echo $callback."(".json_encode($data).")"; 
return;

PHP代碼返回了一段JS語句，即

jsonhandle({
    "age" : 15,
    "name": "張三",
})

此時訪問頁面時，動態添加了一個script標籤，src指向PHP腳本，執行返回的JS代碼，成功彈出提示框。
因此JSONP將訪問跨域請求變成了執行遠程JS代碼，服務端再也不返回JSON格式的數據，而是返回了一段將JSON數據做爲傳入參數的函數執行代碼。

4.最後jQuery提供了方便使用JSONP的方式，代碼以下：

<!DOCTYPE html> 
<html> 
<head> 
<title>GoJSONP</title> 
</head> 
<body> 
<script type="text/javascript" src="jquery-1.8.3.min.js">
</script> 
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            type : "get",
            async: false,
            url : "http://www.practice-zhao.com/student.php?id=1",
            dataType: "jsonp",
            jsonp:"callback", //請求php的參數名
            jsonpCallback: "jsonhandle",//要執行的回調函數
            success : function(data) {
                alert("age:" + data.age + "name:" + data.name);
            }

        });
    });
</script> 
</body> 
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。