什么是JSONP?

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

产生的背景:

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

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

package constxiong; 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 ConstXiong * @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:WindowsSystem32driversetchosts

最后一行添加

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>//学生idvar 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>

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

什么是JSONP?-度崩网-几度崩溃

注意事项

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

给TA打赏
共{{data.count}}人
人已打赏
Java

jsp和servlet有什么区别?

2020-7-31 1:28:20

Java

jsp有哪些内置对象?作用分别是什么?

2020-7-31 1:31:40

本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策。若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
⚠️
本站所发布的一切源码、模板、应用等文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权。本站内容适用于DMCA政策
若您的权利被侵害,请与我们联系处理,站长 QQ: 84087680 或 点击右侧 私信:盾给网 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索