當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jsonp跨域访问服务

發布時間：2025/6/15 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 jsonp跨域访问服务小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前段時間在做產品開發的時候，需要與公司網站那邊進行交互，我們所開發的產品上線后是放在一個域名下，公司網站那塊是在另一個域名下，這樣在頁面中調用

網站那邊的接口時就存在跨域的問題，當時為了不修改網站那邊的接口，所以采用在服務端通過webservice方式進行調用網站接口，問題也很快解決了，當時我就在想

如果需要在js中直接訪問的話，就涉及到到跨域的問題，那么怎么做才能解決這個問題呢，我上網找了一些資料，最后采用的是jsonp的方式來解決的。下面我來給大家分享下

用jsonp方式解決跨域問題。分為以下步驟：

1、引入jquery.js,使用$.ajax()來定義jsonp，如下：

<%@?page?language="java"?contentType="text/html;?charset=utf-8"?pageEncoding="utf-8"?%> <% String?path?=?request.getContextPath(); %> <!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html?xmlns="http://www.w3.org/1999/xhtml"?> <head> <script?type="text/javascript"?src="${path}/js/jquery-1.7.2.min.js"></script> <script?type="text/javascript"> $(function(){ $("#jsonp").click(function(){ $.ajax({ url:"/demo/jsonp.action", type:"GET", async:false, dataType:"jsonp", jsonp:"jsonpCallback", jsonpCallback:"showAge", success:function(data){ //alert(data.name); } } ); }); }); function?showAge(data){ alert(data.age); } </script> </head> <body> <a?id="jsonp"?href="">使用jsonp</a> </body> </html>

2、服務器端處理：

package?com.mall.web.action; import?java.io.IOException; import?java.io.PrintWriter; import?java.util.HashMap; import?java.util.Map; import?javax.servlet.http.HttpServletRequest; import?javax.servlet.http.HttpServletResponse; import?org.springframework.stereotype.Controller; import?org.springframework.web.bind.annotation.ModelAttribute; import?org.springframework.web.bind.annotation.RequestMapping; import?org.springframework.web.bind.annotation.RequestMethod; import?org.springframework.web.servlet.ModelAndView; import?com.alibaba.fastjson.JSONObject; @Controller @RequestMapping("/demo/") public?class?DemoAction?{ private?HttpServletRequest?request; private?HttpServletResponse?response; @ModelAttribute public?void?setRequestAndResponse(HttpServletRequest?request,HttpServletResponse?response){ this.request?=?request; this.response?=?response; } @RequestMapping(value="jsonp",method=RequestMethod.GET) public?void?jsonp(){try?{??response.setContentType("text/plain");??response.setHeader("Pragma",?"No-cache");??response.setHeader("Cache-Control",?"no-cache");??response.setDateHeader("Expires",?0);??PrintWriter?out?=?response.getWriter();???????JSONObject?resultJSON?=?new?JSONObject();resultJSON.put("name",?"wen");resultJSON.put("age",?"17");String?jsonpCallback?=?request.getParameter("jsonpCallback");//客戶端請求參數??System.out.println("-------------------->"+jsonpCallback);System.out.println("-------------------->"+resultJSON.toJSONString());out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式數據??out.flush();??out.close();??}?catch?(IOException?e)?{??e.printStackTrace();??}?? } }

該訪問的url地址為：/demo/jsonp.action？jsonpCallback=“showAge”

在上述事例中，需要注意以下幾點：

1、jsonp中只能使用get請求，ajax請求中dataType為jsonp

2、jsonp定義的url地址中的參數名默認為callback

3、jsonpCallback定義的時jsonp定義的參數對應的值，也是服務器需要回調的函數，若jsonpCallback為定義值，默認回調success函數

4、服務器接受請求后，需要返回符合參數傳遞過來的回調函數如：?

out.println(jsonpCallback+"("+resultJSON.toJSONString()+")");//返回jsonp格式數據

以上就是jsonp的訪問過程，這里需要大家好好理解。因為使用jsonp跨域訪問，需要客戶端和服務端定義一個規則，即回調函數的規則，所以

在開發的過程中需要客戶端和服務端的開發人員共同定義一個規則。

其實我們還可以通過$.get()和$.getJson()方式來跨域訪問，這里就不跟大家細說了，如果感興趣的朋友，可以自己去了解下，今天就給大家分享到這，

我們下期再見，接下來會為大家分享android的一些知識。

轉載于:https://blog.51cto.com/wenqiangv/1433339

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的jsonp跨域访问服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

jsonp