JSONP操作01_本地訪問數據和跨域訪問數據

1.jsonp簡介

json 是一種數據格式

jsonp 是一種數據調用的方式。

1)什麼是jsonp

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

JSONP的優點是:它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制;它的兼容性更好,在更加古老的瀏覽器中都可以運行,不需要XMLHttpRequest或ActiveX的支持;並且在請求完畢後可以通過調用callback的方式回傳結果。

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一樣,它也不一定非要用json格式來傳遞數據,如果你願意,字符串都行,隻不過這樣不利於用jsonp提供公開服務。

總而言之,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="https://localhost/ajax2/jsonp.php?cb=abc"></script>

php文件

<?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>  

打印結果為:

發佈留言