什麼是JSONP？

時間 2020-05-12

標籤什麼 jsonp 欄目 JSON 简体版

原文原文鏈接

簡述：

jsonp能夠解決$.ajax沒法跨域請求的問題，其基本原理是利用web調用js文件不受跨域影響，在html標籤中相似<script>、<img>、<iframe>具備src屬性的都不會受跨域的影響，jsonp就是利用這個特性，實現對跨域數據請求，須要注意的是，jsonp只能是GET請求。html

簡單實現

前端代碼前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="http://10.0.0.5/test.js"></script>
</body>
</html>

其中test.js是在虛擬機nginx服務器放置的一個js文件，內容爲:jquery

alert('this is a test')

訪問頁面成功彈窗顯示:nginx

自定義函數調用

此次咱們將遠端的js文件寫上前端的函數名，達到實現數據交互的功能web

前端代碼ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    function Test(data) {
        alert(data)
    }
</script>

<script src="http://10.0.0.5/test.js"></script>
</body>
</html>

目標js文件django

Test('來自遠方的問候')

訪問頁面成功彈窗顯示：json

動態調用

服務端要是能夠動態生成js腳本，這樣服務端就能夠對客戶端發送的請求作驗證，從而返回相應的內容。跨域

客戶端服務器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button onclick="Test()">test</button>

<script src="jquery.js"></script>
<script>

    function Test() {
        $.ajax({
            url:'http://10.0.0.1:8000/index2',
            data:{'data':$('input').val()},
            dataType:'jsonp',
            Callbacks:'callbacks',
            jsonpCallback:'fun',

        })
    }

    function fun(data) {
        alert(data)
    }

</script>
</body>
</html>

服務端(django)

def index2(req):
    messget = req.GET.get('data')
    data = req.GET.get('callback')+'("啦啦啦,服務器收到你的數據啦,你發送的是%s")' %messget
    print(data)
    return HttpResponse(data)

效果以下，當按下test按鈕