1．jsonp簡介

json 是一種資料格式

jsonp 是一種資料呼叫的方式。

1）什麼是jsonp

為了便於客戶端使用資料，逐漸形成了一種非正式傳輸協議，人們把它稱作JSONP，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

JSONP的優點是：它不像XMLHttpRequest物件實現的Ajax請求那樣受到同源策略的限制；它的相容性更好，在更加古老的瀏覽器中都可以執行，不需要XMLHttpRequest或ActiveX的支援；並且在請求完畢後可以通過呼叫

2）與ajax的區別

1、ajax和jsonp這兩種技術在呼叫方式上“看起來”很像，目的也一樣，都是請求一個url，然後把伺服器返回的資料進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；

2、但ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態新增script標籤來呼叫伺服器提供的js指令碼。

3、所以說，其實ajax與jsonp的區別不在於是否跨域，ajax通過服務端代理一樣可以實現跨域，jsonp本身也不排斥同域的資料的獲取。

4、還有就是，

總而言之，jsonp不是ajax的一個特例，儘管jquery等把jsonp封裝進了ajax，也不能改變這一點。

2.非跨域訪問資料舉例

jsonp訪問本地php檔案，php獲取本地資料庫資料返回給客戶端頁面

<script type="text/javascript">
    function abc(data){
        console.log(data);
    }
</script>
<script type="text/javascript" src="http://localhost/ajax2/jsonp.php?cb=abc"></script>
 

<?php
$conn = mysqli_connect("localhost","root","","html5-7");
$conn->query("set names utf8");
$cb = $_GET['cb'];//獲取函式名
$sql = "SELECT * FROM user";
$ret = $conn->query($sql);
$arr = array();
while($row = $ret->fetch_assoc()){
    $arr[] = $row;
}
//陣列轉換weijson格式
$str = json_encode($arr);
echo $cb."({$str})";

返回給客戶端的結果：

3.跨域訪問資料舉例

訪問百度搜索資料，比如返回百度搜索遊戲的結果

開啟百度首頁，同時代開網頁debug，切換到Network，在百度搜索框中輸入關鍵字遊戲時會發現nerwork下面不斷有資料變化，在name那一欄下找到su?wd開頭的資料點選開啟它的頭部資訊，把Request URL請求的地址取出，不要wd=XXX和cd=XXX中的XXX分別替換為”遊戲”和”abc”，作為jsonp跨域訪問的地址，其中wd為百度搜索關鍵字,cb為回撥函式。

例如取出的地址為https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&json=1&p=3&sid=1434_18195_21093_18560_21804_21553&req=2&pbs=%E4%BC%98%E9%85%B7&csor=0&cb=jQuery110203815173300440866_1483450049958&_=1483450049971

替換掉關鍵字和回撥函式後為https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=遊戲&cb=abc

這樣一個jsonp跨域訪問頁面程式碼可以這樣寫：

<script type="text/javascript">
    function abc(data){
        console.log(data);
    }
</script>
<script type="text/javascript" src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=遊戲&cb=abc"></script>

列印結果為：