溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前段時間在做產品開發的時候，需要與公司網站那邊進行交互，我們所開發的產品上線后是放在一個域名下，公司網站那塊是在另一個域名下，這樣在頁面中調用
網站那邊的接口時就存在跨域的問題，當時為了不修改網站那邊的接口，所以采用在服務端通過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的一些知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
