Jquery跨域請求php數據（jsonp）

Jquery跨域請求php數據

咱們通常用到ajax的時候是在同服務器下，通常狀況下不會跨域，但有時候須要調用其餘域名或ip下的數據的時候，遇到跨域請求數據的時候。

今天在工做中碰到javascript(如下簡稱js)跨域的問題，之前有看過相關的文章不過沒有親自操做實踐只是瀏覽了一下。因爲不少頁面調用相同的東西，我把須要出來操做的js代碼統一放在了一個命名爲.js文件中，若是是主域名訪問不會出現什麼問題，二級域名訪問死活代碼沒有執行，糾結了我很長時間，不過最終仍是搞定了，如下做爲此次通過和經驗的總結！

什麼引發了ajax不能跨域請求的問題？
ajax自己其實是經過XMLHttpRequest對象來進行數據的交互，而瀏覽器出於安全考慮，不容許js代碼進行跨域操做，因此會警告。
跨域的安全限制都是指瀏覽器端來講的，服務器端是不存在跨域安全限制的。因此針對這2種狀況衍生出2類跨域解決方案，一類是服務器端作中轉相似代理方式，一類是js處理瀏覽器端的真正跨域訪問。

如下代碼是我寫在js文件中的一部分代碼:

$.ajax({ type:'get', url:"",//將要請求的方式
   contentType: "application/json",//contentTy類型
   data:"", dataType:'jsonp', //數據格式
   jsonp: "callback", //傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
   jsonpCallback:"flightHandler", //自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數名，也能夠寫"?"，jQuery會自動爲你處理數據
   success : function(data){ //請求成功
 alert($data); }, error: function () { //請求失敗
 } });

以上代碼是用於請求php文件異步獲取數據實現二級聯動菜單.或許你看到了標紅的字樣，日常異步調用數據dataType使用的都是json，而標紅的是jsonp！是的你沒有看錯就是jsonp。
二者有什麼請區別呢？
JSON和JSONP雖然只有一個字母的差異，但其實他們根本不是一回事兒：JSON是一種數據交換格式，而JSONP是一種依靠開發人員的聰明才智創造出的一種非官方跨域數據交互協議。

請求的php文件返回數據的格式爲json，範例代碼以下:

$result = json_encode(array($data)); echo "flightHandler($result)"; //此處的flightHandler是上面$ajax中jsonpCallback定義的名稱,因爲jquery已經封裝好了jsonp能夠直接拿去用。 //當使用jsonp時，使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 爲正確的函數名，以執行回調函數。 //有人建議此處的函數名稱能夠弄成動態獲取的，爲了實現不一樣的操做代碼範例： //或
$method = isset($_GET[‘method’])?trim($_GET[‘method’]):’flightHandler’;//獲取方法名稱
$result = json_encode(array($data)); echo $method ."($result)";

Jsonp原理：

1):首先在客戶端註冊一個callback (如:’jsoncallback’), 而後把callback的名字(如:jsonp1236827957501)傳給服務器。
此時，服務器先生成 json 數據。
2):而後以 js語法的方式，生成一個function , function 名字就是傳遞上來的參數 ‘jsoncallback’的值jsonp1236827957501 .
3):最後將 json 數據直接以入參的方式，放置到 function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。客戶端瀏覽器，解析js標籤，並執行返回的js 文檔，此時js文檔數據,做爲參數，傳入到了客戶端預先定義好的 callback 函數(如上例中jquery $.ajax()方法封裝的的success: function (json))裏.（動態執行回調函數）
能夠說jsonp的方式原理上和是一致的(qq空間就是大量採用這種方式來實現跨域數據交換的) .JSONP是一種腳本注入(Script Injection)行爲,因此也有必定的安全隱患.