当前位置：Java面试题 > Web开发 >

JSONP是什么？

JSONP 是 JSON with Padding 的略称。
它是一个非官方的协议，允许在服务器端集成Script tags返回至客户端，通过 javascript callback 的形式实现跨域访问。

产生的背景：

浏览器限制 ajax 跨域请求
json 格式数据被浏览器原生支持
<script> 标签 src 可以跨域 GET 方式获取服务器脚本

1、开发一个 servlet 根据参数返回学生信息的数据。把 callback 参数作为 js 的函数调用

package com.yiidian;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * jsonp servlet
 * @author yiidian
 * @date 2019-07-03 09:56:37
 */
@WebServlet("/jsonp")
public class JsonpServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    public JsonpServlet() {
        super();
    }
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        StringBuilder jsonp = new StringBuilder();
        String sid = request.getParameter("sid");
        String function = request.getParameter("callback");
        jsonp.append(function).append("(");
        jsonp.append(getStudent(sid));
        jsonp.append(")");
        response.getWriter().write(jsonp.toString());
    }
 
    /**
     * 根据学号获取学生信息
     * @param sid
     * @return
     */
    private String getStudent(String sid) {
        String student = null;
        if ("1".equals(sid)) {
            student = "{'sid':'1', 'name':'ConstXiong'}";
        }
        return student;
    }
 
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

}

请求

http://localhost:8081/web/jsonp?sid=1&callback=aaa

aaa({'sid':'1', 'name':'ConstXiong'})

2、修改 hosts 文件，模拟跨域访问。本机 win7 操作系统，修改 C:\Windows\System32\drivers\etc\hosts

最后一行添加

127.0.0.1       www.aaa.com

访问，模拟跨域url

http://www.aaa.com:8081/web/jsonp?sid=1&callback=alertStudent

alertStudent({'sid':'1', 'name':'ConstXiong'})

3、添加 html 页面，测试后台返回的 js 是否能调用到 html 中 js 定义的 alertStudent 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp test</title>
</head>
<body>
<script>
    //学生id
    var sid = 1;
    
    //定义函数显示学生信息
    var alertStudent = function(data) {
        if (data == null) {
            alert('没有该学生信息');
        } else {
            alert('学号：' + data.sid + ', 姓名：' + data.name);
        }
    }
    
    //动态生成 <script> 标签，后端调用  alertStudent 函数
    var script = document.createElement('script');
    script.src = 'http://www.aaa.com:8081/web/jsonp?sid='+sid + '&callback=alertStudent';
    document.getElementsByTagName('head')[0].appendChild(script);
</script>
</body>
</html>

访问页面，能够显示出学生信息

注意事项

ajax 是通过 XmlHttpRequest 方式进行请求，JSONP 的核心是动态添加 <script> 标签来调用服务器提供的 js 脚本，两者功能很相似，实现是有区别的。
JSONP 没有域的限制
JSONP 的浏览器兼容性较好
JSONP 只支持 GET 请求，只能添加超时进行异常处理
使用 JSONP 存在 js 注入的风险

JSONP是什么？

微信关注