JSONP 是什麼

weixin_33806914發表於2018-10-17
JSON

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"]);


    --------------
由此可見，其實就是遠端伺服器代前端處理了相關函式，通過返回一個帶引數的函式表示式，來進行執行相關邏輯程式碼。 有效避免了直接向遠端伺服器請求資料

相關文章