模拟jsonp原理
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
Document
servlet
package com.wanggs.web.jq;
/**
* @author Wgs
* @version 1.0
* @create：2018/06/04
*/
@WebServlet("/jsonp")
public class JsonpServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setContentType("application/json;charset=UTF-8");
String method = req.getParameter("method");
User user = new User("tom",12);
String json = JSON.toJSONString(user);
Writer out = resp.getWriter();
out.append(method+"("+json+")");
out.flush();
out.close();
}
}
测试
http://localhost/jq/jsonp.jsp
callback({"age":12,"name":"tom"})
JSONP
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
Document
<%@ page import="java.util.List" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
Document
image.png
image.png
jsonp调用有道api
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
Document
fastJson JSONPObject
package com.wanggs.web.jq;
/**
* @author Wgs
* @version 1.0
* @create：2018/06/04
*/
@WebServlet("/jsonp")
public class JsonpServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setContentType("application/json;charset=UTF-8");
// 必须是callback: jQuery33101920591678805521_1528275197482
String method = req.getParameter("callback");
User user = new User("tom",12);
JSONPObject jsonp = new JSONPObject(method);
jsonp.addParameter(user);
Writer out = resp.getWriter();
out.append(jsonp.toJSONString());
out.flush();
out.close();
}
}
image.png
script
$.ajax({
url : '/jsonp',
type : 'GET',
dataType: 'jsonp', // 表示要用 JSONP 进行跨域访问
success : function(data) {
alert(data.name+"--->>"+data.age)
}
});
SpringMvc
服务器端:
- 使用 produces 设置响应的 Content-Type
- 返回 JSONP 格式的字符串，例如jQuery21107523536464367151_1492668511201("Goo")
import com.alibaba.fastjson.JSONPObject;
@GetMapping(value="/jsonp-test", produces="application/javascript;charset=UTF-8")
@ResponseBody
public String jsonpTest(@RequestParam String callback) {
JSONPObject jsonp = new JSONPObject(callback);
jsonp.addParameter("Goo"); // 或则 Object
return jsonp.toString();
}
浏览器端
$.ajax({
url : 'http://127.0.0.1:8080/jsonp-test',
type : 'GET',
dataType: 'jsonp', // 表示要用 JSONP 进行跨域访问
success : function(data) {
console.log(data);
}
});