網上查詢了下,發現說jQuery對跨域請求有兩種解決方案,分別是jQuery的jquery.ajax jsonp格式和jquery.getScript方式,這裏主要記錄下jsonp跨域的處理。 json格式咱們比較常用,可是jsonp就不那麼經常使用了,因此首先這裏須要對jsonp要有一個瞭解。
jsonp解釋
在解釋jsonp以前,咱們須要瞭解下」同源策略「這個概念,這對理解跨域有幫助。基於安全的緣由,瀏覽器是存在同源策略機制的,同源策略阻止從一個源加載的文檔或腳本獲取或設置另外一個源加載額文檔的屬性。有點繞,說的簡單點就是瀏覽器限制腳本只能和同協議、同域名、同端口的腳本進行交互。javascript
jsonp就是爲了解決這一問題的,jsonp是英文JSON with Padding的縮寫,是一個非官方的協議。他容許服務端生成script tags返回值客戶端,經過JavaScript callback的形式來實現站點訪問。jsonp是一種script tag的注入,將server返回的response添加到頁面是實現特定功能。 簡而言之,jsonp自己不是複雜的東西,就是經過scirpt標籤對javascript文檔的動態解析繞過了瀏覽器的同源策略。
下面就直接上代碼了~~~前端
###前端js文件內容java
/** * 腳本 */ var page = { /** * 頁面數據 */ data:{ }, /** * 事件 */ event:{ /** * 初始化事件 */ initEvent:{ init:function(){ var url = page.data.moralViewUrl+page.data.userId; var userInfo = {}; $.ajax({ type : "POST", url : url, async: false, dataType : "jsonp", jsonp: "jsonpCallback",//服務端用於接收callback調用的function名的參數 data : userInfo, success : function(responseData) { if (responseData.code == 0) {//登陸成功 } else { alert(responseData.msg); } }, error : function(responseData) { alert(responseData.msg); } }); } }, /** * 綁定事件 */ bindEvents:{ }, handleEvents:{ } } }; $(document).ready(function() { page.event.initEvent.init(); });
###服務端代碼jquery
@RequestMapping("/Info/{id}") public void getInfo(@PathVariable Integer id, HttpServletRequest request, HttpServletResponse response) { Map<String, Object> map = Maps.newConcurrentMap(); map.put("msg", "成功"); processOtherDomainAccess(request, response, map); } /** * 處理跨域請求處理方法 * @param request * @param response * @param data */ protected void processOtherDomainAccess(HttpServletRequest request, HttpServletResponse response,Map<String, Object> data) { response.setContentType("text/plain"); response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); ObjectMapper mapper = new ObjectMapper(); PrintWriter out = null; String result = ""; try { out = response.getWriter(); data.put("code", 0); String jsonpCallback = request.getParameter("jsonpCallback");// 客戶端請求參數 result = jsonpCallback + "(" + mapper.writeValueAsString(data) + ")"; } catch (Exception e) { data.put("code", 1); data.putIfAbsent("msg", "獲取失敗"); try { result = "callback" + "(" + mapper.writeValueAsString(data) + ")"; } catch (JsonProcessingException e1) { e1.printStackTrace(); } } out.println(result);// 返回jsonp格式數據 out.flush(); out.close(); }
###參考博客地址
http://hanqunfeng.iteye.com/blog/1866712
http://blog.csdn.net/lcore/article/details/41022567ajax