用原生js來處理跨域的數據（jsonp）

時間 2019-11-12

標籤原生處理數據 jsonp 欄目 JavaScript 简体版

原文原文鏈接

說明總結：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

 1 //獲取客戶端的信息
 2     if (isset($_GET['code'])) {
 3         if ($_GET['code'] == "CA1998") {
 4             $flightId = $_GET['code'];
 5             $price = 1000;
 6         }
 7         else if ($_GET['code'] == "CA1997") {
 8             $flightId = $_GET['code'];
 9             $price = 2000;
10         }
11         else{
12             $flightId = 0;
13             $price = 0;
14         }
15         $flightHandler = array('flightId'=>$flightId,'price'=>$price); 
16         $flightHandler = json_encode($flightHandler);
17 $flightHandler = "flightHandler(".$flightHandler .");";// 將數據進行了包裝，包裝成了一個調用的函數，這一步很重要。 18         print_r($flightHandler);
19     }

獲取到的服務器數據：jquery

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

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

1 {
2     "flightId": "CA1998",
3     "price": 2000
4 }

客戶端代碼：ajax

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>XHR</title>
 6     <link rel="stylesheet" href="../templates/css/verify.css">
 7 </head>
 8 <body>
 9     <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()">
10  <script type="text/javascript">
11 
12     // 獲得航班信息查詢結果後的回調函數
13     function flightHandler(data){
14         if (data.price != 0) {
15              alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '航班 ' + data.flightId );
16         } else{
17             alert("EORROR");
18         };
19        
20     };
21 
22     function flightHandler0(){
23         var flightId = document.getElementById('flightId').value;
24          //供jsonp服務的url地址（無論是什麼類型的地址，最終生成的返回值都是一段javascript代碼）
25          //其實參數都是前端和後臺程序員規定的，前端傳過去，後端判斷獲取便可。
26         var url = "flightResult.php?code=" + flightId +"&callback=flightHandler"; 27         // 建立script標籤，設置其屬性
28         var script = document.createElement('script');
29         script.setAttribute('src', url);
30         // 把script標籤加入head，此時調用開始
31         document.getElementsByTagName('head')[0].appendChild(script); 
32     };
33 
34     </script>
35 </body>
36 </html>