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

程序员文章站 2022-03-03 09:26:17

JSONP(JSON with Padding) 是 JSON 的一种"使用模式"，可以让网页从别的域名（网站）那获取资源，即跨域读取数据。JSONP 的优势在于支持老式浏览器，兼容性好（兼容低版本IE），缺点是只支持 GET 请求，不支持 POST 请求。本文主要介绍 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>