深入了解jsonp解決跨域通路

       在我們做的這個項目中充分利用jsonp跨域這一個特性，完成了簡單的單點登入功能和權限統一認證控制，實作思路并不複雜同各種實作單點登入的産品相比可以說微不足道，各有各的好處、各有各的優點，選擇什麼方式實作完全取決于我們自己或者項目經理的開發經驗，對各種架構的了解程度往往決定了目前開發項目的整體架構。

      這不是一項憑空産生的新東西，僅僅是JS的一個特性而已之前沒有被我們提及也沒有被我們注意到原來經常使用的js還可以跨域呢，覺的我們對已經學過的東西了解還不是不夠深入、有些膚淺，JS絕大多數在浏覽器中運作完成各種動态效果，開發js的人一開始應該就考慮到了浏覽器的特性，為了不受浏覽器的限制而将js賦予了這一個神聖的職責，浏覽器的限制是安全政策裡面的一個政策，叫同源政策。

同源政策

      同源的意思是協定、域名、端口都相同，隻要有一個不相同那麼就是不同源的通路位址，一個浏覽器的一個頁面中是不可以從不同源的位址擷取資料的，當每次頁面加載時浏覽器都會自動判斷擷取的資料是否來自一個源位址，如果不是會受到浏覽器的阻止。

好像會議的安檢一樣，隻允許某一類有通行證的人進入，其他的則不會讓進入阻止在外面，而js有一個特性可以跨過安檢通過特殊途徑進入不受阻止。

解決同源政策問題jsonp

      Jsonp(JSON with Padding)是資料格式 json 的一種“使用模式”，可以讓網頁從别的網域擷取資料。

之是以叫jsonp可以了解為主要作用和目的就是從别的網域擷取json格式資料，這是它的主要應用方面，其它的作用暫時沒有用到。

原理

      原理也很容易了解，它之是以可以跨域是利用了script标簽的跨域能力，試想？你有沒有想過經常引入的一個普通js檔案，它是怎麼樣加載到頁面中去的為什麼它的src屬性寫上一個位址就可以把别處的js檔案加載到頁面上呢，經測試這個src屬性可以填寫任意有效的位址，即使不在同一個項目目錄結構中的檔案也是可以的。

      例如這個連結；

<span style="font-size:14px;"><script type="text/javascript" src="_js/jquery-2.0.0.min.js"></script></span>           

      它隻是一個引用，加載進來的檔案時很多這樣的函數function(){}………………，同理jsonp就是這樣一種模式，它傳回的也是js函數同上面這個連結沒有什麼差別，隻是函數名叫做回調函數需提前定義好，函數裡面是傳回的json資料。我們來看一個執行個體：

<span style="font-size:14px;">	<script type="text/javascript">
		
		function getjson(json)
		{
			alert("通過src屬性獲得json="+json.result);
		}
	</script>
	
	<script type="text/javascript" src="http://localhost:28080/application1/login.do?method=loginInterface&callback=getjson&name=lilongsheng"></script></span>           

      這是我自己寫的一個js标簽，它的src位址是另一個tomcat中部署的application1應用的登入接口位址，而上面調用是在另一個tomcat中的application2 jsp頁面，屬于不同源調用，再來看一下application1中接口類

<span style="font-size:14px;">    public ActionForward loginInterface(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
    {

    	/** 判斷是否登入成功 */
		boolean isLogin = false;
		//從用URL中擷取使用者名和密碼
    	String name=request.getParameter("name");
    	String pwd=request.getParameter("pwd");
		try {
			//回調函數名
			String callbackFunName = request.getParameter("callback");
			//利用jsonp包裝的json資料
			String data = callbackFunName + "({\"result\":\"" + name + "\"})";
	
			System.out.println(data);
			//傳回到界面
			print(data,request,response);
		
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
    }</span>           

      傳回結果為gejson({"result":"lilongsheng"}),傳回的是一個JS代碼,它會自動執行getjson這個函數，而花括号{}裡面的内容正好當做參數傳遞到這個函數裡面，完成跨域調用。

      從上面可以看出通過script标簽可以從不同源的地方獲得json資料。

我們再來看看jquery是如何使用的，僅僅在方法中加入一個參數就可以實作，感覺簡單了很多，這是因為架構已經為我們封裝好了裡面的一些細節調用關系，隻要我們設定了參數它就支援跨域通路，調用如下：

<span style="font-size:14px;">		function getJsonp()
		{
			var name=$("#name").val();
			var pwd=$("#pwd").val();
			$.ajax({
				url:"http://localhost:28080/application1/login.do?method=loginInterface&name="+name+"&pwd="+pwd,
				type:"post",
				dataType:"jsonp",
				jsonp : 'callback',
				success:function(data){
					alert(data.result);
				},
				error:function(){
					alert("網絡連接配接失敗！");
				}
			});
		}</span>           

      除了jquery之外還有ext等架構都支援這一特性，它們都是基于javaScript基礎類庫封裝起來的，是以都具有js具有的特性。

      關于jsonp的如何應用已經錄了一集視訊，下面是下載下傳位址

      jsonp視訊示範下載下傳位址：http://pan.baidu.com/s/1dDIjnTR

轉載于:https://www.cnblogs.com/lilongsheng1125/p/4978515.html