JS跨域交互(jQuery+php)之jsonp使用心得

JSON是一種基於文本的數據交換方式，或者叫作數據描述格式，這篇文章主要介紹了JS跨域交互(jQuery+php)之jsonp使用心得的相關資料，很是不錯，具備參考借鑑價值，須要的朋友一塊兒學習吧

什麼是jsonp？

說到jsonp，你可能最早想到JSON；它還真和JSON有關係；

JSONP(JSON with Padding)是JSON的一種「使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。因爲同源策略，通常來講位於 server1.example.com 的網頁沒法與不是 server1.example.com的服務器溝通，而 HTML 的<script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。

JSONP（JSON with Padding），我更傾向於把最後一個字母P理解爲 protocol（協議，約定）；

JSON的優勢：

　　一、基於純文本，跨平臺傳遞極其簡單；

　　二、Javascript原生支持，後臺語言幾乎所有支持；

　　三、輕量級數據格式，佔用字符數量極少，特別適合互聯網傳遞；

　　四、可讀性較強，雖然比不上XML那麼一目瞭然，但在合理的依次縮進以後仍是很容易識別的；

　　五、容易編寫和解析，固然前提是你要知道數據結構；

　　JSON的缺點固然也有，但在做者看來實在是可有可無的東西，因此再也不單獨說明。

有這麼一個故事：

A男和B女居住在不一樣的國家A國和B國，在一次去C國旅行的途中相遇了，雙方聊的比較Happy，旅行結束都回國了；但A男老是會想B女，想聯繫上B女，無奈當時沒有留下B女的電話、郵箱、微信、QQ號碼這些能夠更加即時的聯繫方式，只是閒聊間知道B女地址，那就只能寫信吧去C國也不太現實；因而就寫信把本身的各類即時聯繫方式都寫進去了，一封信寄出去了過了一段時間沒有迴音又寫一封，就是沒有收到C友的電話等任何迴音；對方收到了沒有呢，肯定是收到了也看了。
這是爲何呢？C女不想搭理他唄（沒有按A男指定的方式回調）！

JSONP就是這麼一回事，你知道對方的調用地址，告訴對方你的回調函數名稱是什麼，但對方若是不配合，就是不調用你約定的回調函數名稱，你調用多少次也沒用，因此JSONP的關鍵仍是要對方配合你才行。

js跨域交互實現原理

HTML <script> 標籤，對就是它，世界因它而美好！

你可使用這個標籤加載任何其它可訪問到的網站的js文件試試，我就很少說了；

跨域交互一：jQuery.getScript

這個例子比較簡單易懂，使用固定的回調函數名稱：fncallback

調用端，也能夠說是客戶端：

我是在本地測試，跑了多個Web服務，本地頁面訪問地址：http://localhost:88/

網頁中的JS代碼以下：

<script type="text/javascript" src="jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
//定義名稱爲「fncallback」的回調函數，參數接收JSON對象； 
function fncallback(data){ 
$(document.body).append("<hr />getScript ok!" + data.reqUrl); 
} 
//註冊頁面加載完成回調函數（匿名） 
$(document).ready(function(){ 
//使用getScript方法調用跨域腳本； 
$.getScript("http://localhost/test2.php"); 

}); 
</script>

效果：在頁面尾部增長一條線，以及：getScript ok! ，後面緊跟被調用端返回的它接收到的請求地址：

getScript ok!/test2.php?_=1467261287339

後面爲何會多了個「?_=1467261287339」呢？

這是防止瀏覽器從緩存去加載這個URL地址的內容的！由jQuery自動添加；

被調用端，也能夠說是服務端

服務端後臺語言是PHP，經過Nginx代理的，端口爲：80，因此訪問地址是：http://localhost/test2.php

test2.php 文件的內容：

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo "fncallback({\"reqUrl\": reqUrl });";

瀏覽器訪問：

經過瀏覽器訪問，天然沒有後面的參數，除非你本身手動加上；

跨域交互二：jQuery.getJSON

調用端：

<script type="text/javascript"> 
//註冊頁面加載完成回調函數（匿名） 
$(document).ready(function(){ 
//使用getJSON方法調用跨域腳本；註冊匿名回調函數 
$.getJSON("http://localhost/test.php?callback=?", function(data){ 
$(document.body).append("<hr />getJSON ok!" + data.reqUrl); 
}); 
}); 
</script>

注意：我在請求的地址中添加了「?callback=?」，這是作什麼用的呢？

目的是讓jQuery爲我自動生成一個回調函數的名稱，並將我註冊的匿名回調函數映射到這個「自動生成的回調函數名稱」上；
有點繞，咱們來看看服務端返回的它收到的請求地址就明白了：

getJSON ok!/test.php?callback=jQuery1102031468501139651384_1467262280037&_=1467262280038

看到callback後面跟了參數值了吧，這就是jQuery自動生成的；再看服務端代碼；

服務端

<?php 
echo "var reqUrl = \"" . $_SERVER["REQUEST_URI"] . "\";"; 
echo $_GET["callback"] . "({\"reqUrl\": reqUrl });";

經過 $_GET["callback"] 獲取客戶端傳遞過來的回調函數名稱；看輸出：

var reqUrl = "/test.php?callback=jQuery1102019717387174726153_1467262461959&_=1467262461960"; 
jQuery1102019717387174726153_1467262461959({"reqUrl": reqUrl });

跨域交互三：jQuery.ajax

調用端：

<script type="text/javascript"> 
//註冊頁面加載完成回調函數（匿名） 
$(document).ready(function(){ 
//使用ajax方法調用跨域腳本； 
$.ajax({ 
url:"http://localhost/test.php", 
dataType: 'jsonp', 
success: function(data){ 
$(document.body).append("<hr />ajax ok!" + data.reqUrl); 
} 
}); 
}); 
</script>

注意：在請求的地址中不須要添加「?callback=?」，但咱們使用「dataType: 'jsonp',」；

服務端

這個例子的服務端和上個是徹底同樣的！

使用總結

使用 getScript 的方式，你能夠本身定義一個回調函數的名稱，讓服務端響應的時候使用你指定的回調函數名稱；

使用 getJSON 的方式關鍵在於URL後面添加的「callback=?」；

使用 ajax 的方式關鍵在於參數中的數據類型設置「dataType: 'jsonp',」；

以上所述是小編給你們介紹的JS跨域交互(jQuery+php)之jsonp使用心得，但願對你們有所幫助，若是你們有任何疑問請給我留言，小編會及時回覆你們的。在此也很是感謝你們對腳本之家網站的支持！