JSONP 是什麼

JSONP 是什麼

說實話，我學了這麼久，其實也沒有好好了解這個東西，固然日常本身在前端方面也涉獵較淺。

1) jsonp 是什麼

JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的 跨域 數據訪問的問題。

跨域？ 因爲同源策略的緣由，也就是說你請求資源時，瀏覽器對於不是你當前域名或者端口號都相同的地址給與禁止訪問，不容許你獲取資源

同源策略：

• examle.com:8080 與 examle.com:9090 不一樣源
• examle.com:8080 與 examle.com:9090 不一樣源
• a.examle.com 與 examle.com 不一樣源

2) 如何解決同源策略帶來的問題

瀏覽器中對<script>、<img>、<iframe> 是給予支持的，因此咱們能夠採用相似引用數據的方式來獲取資源

處理流程：

• 遠程服務器取得js前端處理數據的函數名
• 將相關須要返回的數據保存
• 將數據串進行拼接，以函數的方式返回：showData(['a','b'])

3) 使用例子

// JS
    <button class="getRequest">發起跨域請求</button>
    <textarea name="" id="" cols="30" rows="10" disabled></textarea>

    <script>
        function showdata(result) {
            console.log(result);
        }
        $('.getRequest').on('click', function(){
        //1) // $('head').append("<script src='http://localhost/jsonp/service.php?jsonp=showdata'><\/script>");
        
        //2)
            $.ajax({
                url : 'http://localhost/jsonp/service.php',
                type: 'GET',
                dataType: 'jsonp',
                jsonp: 'jsonp', // 自定義，保證後端能經過這個key值獲取函數名
                jsonpCallback: "showdata",//自定義的jsonp回調函數名稱
                success: function (json) {
                    alert('success');
                },
                error: function () {
                    alert('fail');
                }
            })
        })
    </script>


    --------------------


    header('Content-type: application/json');
    //獲取回調函數名
    $jsonp = htmlspecialchars($_REQUEST ['jsonp']);
    //json數據
    $json_data = '["customername1","customername2"]';
    //輸出jsonp格式的數據
    echo $jsonp . "(" . $json_data . ")";  // 格式進行拼接，獲得showdata(["customername1","customername2"]);


    --------------

因而可知，其實就是遠程服務器代前端處理了相關函數，經過返回一個帶參數的函數表達式，來進行執行相關邏輯代碼。 有效避免了直接向遠程服務器請求數據