ajax jsonp其本質用原生js來處理跨域的數據（jsonp）

時間 2019-11-10

標籤 ajax jsonp 本質原生處理數據欄目 Ajax 简体版

原文原文鏈接

說明總結：javascript

1.ajax和jsonp其實本質上是不一樣的東西。ajax的核心是經過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加<script>標籤來調用服務器提供的js腳本。php

2.可是ajax和jsonp在數據傳輸的過程當中都是能夠用json格式的數據。css

3.其實ajax與jsonp的區別不在因而否跨域，ajax經過服務端代理同樣能夠實現跨域，jsonp自己也不排斥同域的數據的獲取。html

4.ajax和jsonp這兩種技術在調用方式上「看起來」很像，目的也同樣，都是請求一個url，而後把服務器返回的數據進行處理，所以jquery和ext等框架都把jsonp做爲ajax的一種形式進行了封裝；前端

服務器端代碼：java

//獲取客戶端的信息
    if (isset($_GET['code'])) {
        if ($_GET['code'] == "CA1998") {
            $flightId = $_GET['code'];
            $price = 1000;
        }
        else if ($_GET['code'] == "CA1997") {
            $flightId = $_GET['code'];
            $price = 2000;
        }
        else{
            $flightId = 0;
            $price = 0;
        }
        $flightHandler = array('flightId'=>$flightId,'price'=>$price); 
        $flightHandler = json_encode($flightHandler);
        $flightHandler = "flightHandler(".$flightHandler .");";// 將數據進行了包裝，包裝成了一個調用的函數，這一步很重要。
        print_r($flightHandler);
    }

獲取到的服務器數據：jquery

flightHandler({
    "flightId": "CA1998",
    "price": 20004
});
//其實就在服務器端把json數據包裝成了一個js的函數，將一個對象做爲參數放在函數裏面。因此跟ajax用XMLHttpRequest接收數據是不同的。

傳統ajax獲取到的json數據：程序員

{
    "flightId": "CA1998",
    "price": 2000
}

客戶端代碼：ajax

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>XHR</title>
    <link rel="stylesheet" href="../templates/css/verify.css">
</head>
<body>
    <label for="flightId">輸入：CA1998 或者 CA1997 </label> <input type="text" id="flightId" name="flightId"> <input type="button" value="原生js獲取jsonp數據（php包裝數據）" onclick="flightHandler0()"><input type="button" value="原生js獲取jsonp數據（js包裝數據）" onclick="flightHandler1()">
 <script type="text/javascript">

    // 獲得航班信息查詢結果後的回調函數
    function flightHandler(data){
        if (data.price != 0) {
             alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '航班 ' + data.flightId );
        } else{
            alert("EORROR");
        };
       
    };

    function flightHandler0(){
        var flightId = document.getElementById('flightId').value;
         //供jsonp服務的url地址（無論是什麼類型的地址，最終生成的返回值都是一段javascript代碼）
         //其實參數都是前端和後臺程序員規定的，前端傳過去，後端判斷獲取便可。
        var url = "flightResult.php?code=" + flightId +"&callback=flightHandler";
        // 建立script標籤，設置其屬性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script標籤加入head，此時調用開始
        document.getElementsByTagName('head')[0].appendChild(script); 
    };

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

設想：json

上面的方法是在服務器端把json數據包裝在回調函數裏面，那能不能在客戶端來作這個事情呢？可是試了一下感受行不通。

在服務器端把

$flightHandler = "flightHandler(".$flightHandler .");";

去掉。

留言中有用jquery寫的jsonp的例子。

最後附上用原生js和jquery分別處理jsonp的例子：

js：http://snowinmay.net/ajax/xhr-js-jsonp.html

jsonp：http://snowinmay.net/ajax/xhr-jquery-jsonp.html

因此返回數據應該是json數據，可是在客戶端好像沒有很好的辦法來包裝這個數據。若是有的話之後再補充。