JSONP簡單入門介紹

時間 2019-12-10

標籤 jsonp 簡單入門介紹欄目 JSON 简体版

原文原文鏈接

1、什麼是JSONP？

JSON with padding 是一種數據交換的技巧，用於解決主流瀏覽器的跨域數據訪問的問題！

2、生產的背景

因爲同源策略，通常來講位於A服務器的網頁是沒法與其餘服務器上的資源溝通的
而html中的`<script>`是一個特例，JSONP就是利用`<script>`這個標籤實例動態地
從其餘服務器獲取資源（通常來講是一些文本內容）。

3、使用

客戶端JS代碼首先定義一個回調函數，該回調函數接收將要被處理的數據參數，參數個數不定。javascript
客戶端HTML代碼嵌入一段<script>引用，src指向服務器程序的URL，並在URL在給定一個參數，它的值就是上面1定義的function名php
服務器端代碼（如PHP）接收到請求，解析參數取得客戶端中定義的回調函數名，並將取得的回調函數名看成函數名稱與數據合併輸出一段 JS調用函數的代碼html

4、Talk is cheap, Show me the code!

服務器端程序代碼 jsonp.php （在B機器）

<?php
$func = $_GET['callback']; //這裏獲取客戶JS定義的回調函數名稱
$data = 'This is the jsonp data on crossdomain request';
echo "$func('{$data}')"; //這是一段JS代碼

客戶端HTML代碼：jsonptest.html（在A機器上）

<!DOCTYPE html>
<html>
<head>
    <title>Json test</title>
</head>
<body>
<h1 id="padding-content"></h1>
<a  href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
function callbackfunc(data){
    $("#padding-content").text("callback:"+data);
}
</script>
<script type="text/javascript" src="http://www.B.com/jsonp.php?callback=callbackfunc"></script>
</html>

打開瀏覽器A服務器上的jsonptest.html 可能看到結果

callback:This is the jsonp data on crossdomain request

Ajax跨域請求：

仍是用剛纔的服務器端程序，咱們修改一下客戶HTML中的JS代碼，發起一個請求

<!DOCTYPE html>
<html>
<head>
    <title>Json test</title>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<h1 id="padding-content"></h1>
<a  href="javascript:;" class="button">json data</a>
</body>
<script type="text/javascript">
$(".button").click(function(){
        $.ajax({
            url:"http://www.B.com/jsonp.php",
            dataType:"jsonp",
            type:"get",
            jsonpCallback:"testJsonpCallBackFunc",
            error:function(err, errstr){
                $("#padding-content").text(errstr);
            },
            success:function(resp){
                $("#padding-content").text(resp);
            }
            
        });
    });
</script>
</html>

點擊頁面的json data，成功在頁面打印如下內容，表示跨域調用成功

callback:This is the jsonp data on crossdomain requestjava

相關標籤/搜索

每日一句

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