深刻理解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