jsonp跨域請求資源使用方法與簡單原理

前幾天在做項目的時候遇到了需要跨域進行資料互動的問題，後來查閱了相關資料，也測試成功了，下面給大家分享一下這種跨域方式----jsonp

大家都知道，由于同源政策（約定：協定、域名、端口号相同）的限制，js是不允許在不用的域之間進行資料互動和通信的，但是就如同<script>内的src屬性是沒有跨域限制的，同樣的，在頁面上引入不同不同域上的js腳本時是可以的，它并不在xhrhttprequest協定的限制範圍。

在這裡簡單說一下jsonp的json的差別與聯系:json僅僅是一種資料格式，而jsonp是一種資訊交流方式，它是一個非官方的協定，允許在伺服器端內建Script tags傳回至用戶端，通過javascript callback的形式實作跨域通路。在jsonp跨域請求過程中，資料都是json格式存在的。

具體使用方法如下：（假如已經綁定了一個check（）事件）

function check() {
	   	$.ajax({
	   		type:"GET",//jsonp隻支援get方式
	   		url:"http://127.0.0.1/*****/Login/check_login",//請求的伺服器位址
	   		data:{id:123456},//需要傳送的資料
	   		dataType:"jsonp",//規定資料傳送方式
	   		jsonp:"callback",//定義回調函數
	   		success:function callback(data) {//請求成功後處理
	   			alert(data.flag);
	   		},
	   		error:function(XHR) {//請求失敗處理
	   			alert(XHR.status);
	   		}
	   	});
	   }
           

然後在伺服器端擷取資料和輸出資料的方式為：

public function check_login() {
          $id = $_GET['id'];
          $arr = json_encode(array('success'=>true,'msg'=>$id));
          $callback = $_GET['callback'];
          echo $callback."(".$arr.")";
    }
           

需要注意的是伺服器端輸出的必須是：用戶端擷取的回調函數名字（json資料），這種格式的，不能有其他資料，否則用戶端無法傳回請求資源，此時http狀态碼為200，但是會調用error錯誤處理函數。如果代碼正确的話，伺服器端傳回的資料應該是：jquery5672356823（{‘這裡是json資料’}）。用戶端隻需要在請求成功的succes方法中做傳回資料的相關處理即可。上述代碼中的data參數就是伺服器端傳回的json資料。其實講到這裡大家可能會有搞不明白，傳回的明明是一個function，為什麼可以直接調用json資料。下面簡單說一下jsonp的基本工作過程。

用戶端在定義dataType:"jsonp" 後，浏覽器會注冊一個callback，然後通過jsonp："callback" 的方式将函數名（如:jquery123456）傳到伺服器，伺服器端在接收并處理完用戶端資料後，通過javascript文法的方式，生成一個function，function名字就是由用戶端傳過來的函數名（jquery123456），而資料将會以參數形式傳入function中。這樣的話，伺服器端就傳回了一個jsvaxcript文檔。然後，浏覽器解析這個script文檔，并将解析後的資料已參數形式傳入用戶端動态調用的回調函數中（如上述success：function(data)）

注意：（1）php伺服器端在傳回json資料類型時，如果資料中包含中文，在數組->json類型的轉換過程中，即在使用json_encode（$arr）時，要為json_encode方法添加一個參數:JSON_UNESCAPED_UNICODE。

（2）在使用tp架構時，一定要記得将頁面調試工具關閉，否則伺服器端無法正常傳回資料。'SHOW_PAGE_TRACE'=>false，

‘’