欢迎光临
我的个人博客网站

跨域访问方法介绍(6)–使用 JSONP

JSONP(JSON with Padding) 是 JSON 的一种”使用模式”,可以让网页从别的域名(网站)那获取资源,即跨域读取数据。JSONP 的优势在于支持老式浏览器,兼容性好(兼容低版本IE),缺点是只支持 GET 请求,不支持 POST 请求。本文主要介绍 JSONP 的使用方法,文中所使用到的软件版本:Chrome 90.0.4430.212、jquery 1.12.4、Spring Boot 2.4.4、jdk1.8.0_181。

1、实现思路

网页通过添加一个 <script> 元素,向服务器请求 JSON 数据,服务器收到请求后,将数据放在一个指定名字的回调函数的参数位置传回来。

2、服务端实现(Spring 版)

假设访问 : http://localhost:8080/test/getStudents?callback=showStudents
假设期望返回数据:[{“name”:”李白”,”age”:”20″},{“name”:”杜甫”,”age”:”21″}]
真正返回到客户端的数据为: showStudents([{“name”:”李白”,”age”:”20″},{“name”:”杜甫”,”age”:”21″}])

package com.abc.demo.controller;  import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;  import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;  @RequestMapping("/test") @Controller public class TestController {     @RequestMapping("/getStudents")     public void getStudents(String callback, HttpServletResponse response) throws IOException {         //返回前台的结果数据         List<Map<String, String>> result = new ArrayList<>();         Map<String, String> map = new HashMap<>();         map.put("name", "李白");         map.put("age", "20");         result.add(map);         map = new HashMap<>();         map.put("name", "杜甫");         map.put("age", "21");         result.add(map);         response.setCharacterEncoding("utf-8");         String javascript = callback + "(" + new ObjectMapper().writeValueAsString(result) + ")";         response.getWriter().println(javascript);     } }

3、前台实现

3.1、原生写法(testJsonp.html)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSONP 测试</title>  </head> <body>     <div id="students"></div> </body> <script type="text/javascript" src="./jquery-1.12.4.min.js"></script> <script type="text/javascript">      </script> <script type="text/javascript">     function showStudents(result) {         let html = '<ul>';         for(let i = 0; i < result.length; i++) {             html += '<li>姓名:' + result[i].name + ',年龄:' + result[i].age +  '</li>';         }         html += '</ul>';         document.getElementById('students').innerHTML = html;     } </script> <script type="text/javascript" src="http://localhost:8080/test/getStudents?callback=showStudents"></script> </html>

3.2、Jquery 写法(testJsonpJquery.html)

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JSONP 测试(Jquery)</title>  </head> <body>     <div id="students"></div> </body> <script type="text/javascript" src="./jquery-1.12.4.min.js"></script> <script type="text/javascript">     $.getJSON("http://localhost:8080/test/getStudents?callback=?", function(result) {         let html = '<ul>';         for(let i = 0; i < result.length; i++) {             html += '<li>姓名:' + result[i].name + ',年龄:' + result[i].age +  '</li>';         }         html += '</ul>';         document.getElementById('students').innerHTML = html;     }); </script> </html>

3、测试

用浏览器直接打开 html 文件即可

 跨域访问方法介绍(6)--使用 JSONP跨域访问方法介绍(6)--使用 JSONP

赞(0) 打赏
未经允许不得转载:张拓的天空 » 跨域访问方法介绍(6)–使用 JSONP
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏