JS跨域互動(jQuery+php)之jsonp使用心得_javascript技巧

什麼是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的優點：

　　1、基於純文字，跨平台傳遞極其簡單；

　　2、Javascript原生支援，後台語言幾乎全部支援；

　　3、輕量級資料格式，佔用字元數量極少，特別適合互連網傳遞；

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

　　5、容易編寫和解析，當然前提是你要知道資料結構；

　　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使用心得，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！