使用SpringBoot完成jsonp

一.什么是jsonp？

JSONP(JSON with Padding)是JSON的一种“使用模式”，并不是一个单独技术
1.ajax请求不支持跨域数据请求的.
1.1 跨域
1.1.1 ip不同
1.1.2 端口不同.
1.2 为什么不支持跨域
1.2.1 因为JS在研发Ajax处于安全性考虑,把ajax跨域功能关闭.
2.在项目中的静态资源,.js文件, .css文件, 图片等都是可以通过标准的http请求进行访问.
2.1 在浏览器地址栏进行直接输入静态资源地址都可以访问.
2.2 把最终需要的json数据放入到js文件中.模拟请求js文件.
2.3 js文件在请求时以流的形式返回给客户端

二.代码演示

总体思路
2.1 客户端脚本代码,需要使用$.ajax函数.jsonp请求要求服务器端返回的js文件的内容格式必须是：方法名（json格式数据）
2.1.1 jsonp:参数名称替代默认callback，必须与服务端的参数名保持一致
2.1.2 jsonpCallback:jsonp参数对应的值,最终回调函数名
2.1.3 success:成功后回调,也可以在$(function(){})外面编写对应名称的函数,等待ajax请求成功后回调.

编写代码

第一个SpringBoot项目第一个JSONP1，只含有一个jsp文件用于调用另一个SpringBoot项目实现跨域请求

3.1pom文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>

	<groupId>com.fpy</groupId>
	<artifactId>jsonp1</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>jsonp1</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.0.5.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>


</project>

3.2添加jsp支持

这一步非常简单如果不懂可以参照SpringBoot支持jsp

3.3界面

<%@ page pageEncoding="utf-8" contentType="text/html;charset=UTF-8"  language="java" %>
<html>
<head>
    <title>跨域测试</title>
    <script src="js/jquery-1.9.1.js"></script>
    <script>
        function showData() {
        }
        $(document).ready(function () {

            $("#btn").click(function () {
                $.ajax({
                    url: 'http://localhost:8082/student',
                    type: 'GET',
                    dataType:'jsonp',
                    jsonp:'a',//必须和参数名保持一致
                    jsonpCallback:"cc",//回调函数的名字随便起
                    success: function (data) {
                        console.log(data);
                        alert(data);
                        var s = "";
                        for(var i = 0;i<data.length;i++){
                            s+=data[i].name+data[i].major+data[i].age;
                        }
                       $("#tt").val(s);
                    }
                });
            });
        });
    </script>
</head>
<body>
<input id="btn" type="button" value="跨域获取数据" />
<textarea id="tt" style="width: 500px; height: 200px;"></textarea>
</body>
</html>

第二个SpringBoot项目第一个JSONP2，只含有一个controller文件用于反馈数据

package com.fpy.controller;

import com.fpy.pojo.Student;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
import java.util.List;

@Controller
public class JSONP2 {

    @RequestMapping("/student")
    @ResponseBody
    public MappingJacksonValue student(String a){//注意参数的名字与界面jsonp后对应的保持一致
        System.out.println("进入--->jsonp2\t"+a);
        //数据准备a
        List<Student> list = new ArrayList<>();
        for(int i = 0;i<4;i++){
            Student student = new Student("张飞"+i,i+1,i*10+1,"美术"+i);
            list.add(student);
        }
        //专门处理jsonp数据的类
        MappingJacksonValue mjv = new MappingJacksonValue(list);
        //设置回调函数
        mjv.setJsonpFunction(a);
        //最终返回的是一个js代码
        ///**/cc([{"name":"张飞0","age":1,"id":1,"major":"美术0"},{"name":"张飞1","age":2,"id":11,"major":"美术1"},{"name":"张飞2","age":3,"id":21,"major":"美术2"},{"name":"张飞3","age":4,"id":31,"major":"美术3"}]);
        return  mjv;
    }
}

pojo类：Student

package com.fpy.pojo;

public class Student {

    private String name;
    private int age;
    private int id;
    private String major;

    public Student() {
    }

    public Student(String name, int age, int id, String major) {
        this.name = name;
        this.age = age;
        this.id = id;
        this.major = major;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getMajor() {
        return major;
    }

    public void setMajor(String major) {
        this.major = major;
    }
}

最终效果：