1. JSONP定義

JSONP是英文JSON with Padding的縮寫，是一個(gè)非官方的協(xié)議。它允許在服務(wù)器端生成script tags返回至客戶端，通過javascript callback的形式來實(shí)現(xiàn)站點(diǎn)訪問。 JSONP是一種script tag的注入，將server返回的response添加到頁面實(shí)現(xiàn)特定功能。

2.JSONP由來

要解釋JSONP的來由，先要說一下瀏覽器的“同源策略(SOP:Same Origin Policy)”。 簡而言之，就是瀏覽器限制腳本程序只能和同協(xié)議、同域名、同端口的腳本進(jìn)行交互，這包括共享和傳遞變量等。cookie的傳遞也是遵從同樣策略。這就造成一些涉及到多個(gè)服務(wù)器的應(yīng)用在整合時(shí)一些麻煩?？缬蛟L問的問題造成A站點(diǎn)的Ajax代碼無法訪問B站點(diǎn)的數(shù)據(jù)。

如何解決跨域訪問呢？那就要借助瀏覽器的一個(gè)特性：盡管瀏覽器不允許頁面中的腳本程序跨域讀取數(shù)據(jù)，但卻允許HTML引用跨域的資源，如圖片，CSS和腳本程序。對于腳本程序的引用比較特殊，它被瀏覽器解析以后，就和本地的腳本程序別無二致且可立即進(jìn)行解釋并執(zhí)行。如在B站點(diǎn)的一個(gè)js文件，一個(gè)簡單的提示框：alert（“This is Victor！”）;。在A站點(diǎn)引用這個(gè)js，這個(gè)腳本就會(huì)在B站點(diǎn)的應(yīng)用中執(zhí)行，顯示一個(gè)alert信息。由于站外腳本的引用是通過script tag來實(shí)現(xiàn)的，而腳本程序又可通過DOM的方式可以對HTML頁面的所有標(biāo)簽進(jìn)行控制（包括動(dòng)態(tài)的創(chuàng)建script標(biāo)簽），這就可以實(shí)現(xiàn)通過調(diào)用站外程序?qū)Ρ镜刭Y源進(jìn)行更改了。另外，通過<script> 標(biāo)記的使用，就可從服務(wù)端直接返回可執(zhí)行的JavaScript函數(shù)調(diào)用或者JSON數(shù)據(jù)。

3. JSONP原理與實(shí)現(xiàn)

首先在客戶端注冊一個(gè)callback, 然后把callback的名字傳給服務(wù)器。此時(shí)，服務(wù)器先生成 JSON數(shù)據(jù)。然后以JavaScript 語法的方式，生成一個(gè)function, function名字就是傳遞上來的參數(shù)jsonp. 

然后，將JSON數(shù)據(jù)直接以入?yún)⒌姆绞?，放置到function中，這樣就生成了一段 js 語法的文檔，返回給客戶端。

最后，在客戶端瀏覽器中解析script標(biāo)簽，并執(zhí)行返回的JavaScript文檔，此時(shí)數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的回調(diào)函數(shù)里(動(dòng)態(tài)執(zhí)行回調(diào)函數(shù)) 。

具體代碼操作：

1，js代碼

$.ajax({

  url: 'http://192.168.3.49:8080/PORTAL/authCode',

  type: 'post',

  dataType:'jsonp',

  jsonp: "callback",

  data: {

    "type":'0',

    "mobilePhone": $("#tel").val()

  },

  success:function(data){

    alert(data.ret)

    settime(obj);

  },

  error:function(data){

    $('#mstr_ck').html("獲取驗(yàn)證碼失敗，請重試！");

    $("#error_ck").show();

  }

}); 

2，java代碼　　

@RequestMapping(value = "authCode")

@ResponseBody

public String getMobileAuthCode( HttpServletRequest request, String callback)

    throws Exception {

  String result = "{'ret':'true'}";

  //加上返回參數(shù)

  result=callback+"("+result+")";

  return result;

} 

如上：前端調(diào)用結(jié)果彈出：alert('true')　　

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論