客户端：AjaxClient 端口：8081
服务端：AjaxServer 端口：8080
|
package com.kunfan;
import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController;
@RestController//rest接口 @RequestMapping("/ajax") public class Constroller {
@GetMapping("/getMessage")//spring4.0方法 public Model getone(){ System.out.println("getone"); return new Model("jack","1001030202"); }
} |
|
package com.kunfan;
public class Model {
private String name;
private String idCard;
public String getIdCard() { return idCard; }
public void setIdCard(String idCard) { this.idCard = idCard; }
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public Model(String name, String idCard) { super(); this.name = name; this.idCard = idCard; }
} |
1、https://jasmine.github.io/ 下载jasmine包
2、将解压后lib目录下的文件夹拷贝到客户端工程 static目录下
3、客户端工程static目录下新增index.html，并在其中编写jasmine测试用例
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="./jquery/jquery-3.3.1.min.js"></script> <script src="./jasmine-3.2.1/jasmine.js"></script> <script src="./jasmine-3.2.1/jasmine-html.js"></script> <script src="./jasmine-3.2.1/boot.js"></script> </head> <body> <a herf="#" onclick="getMsg()">getMessage</a> <imag src="http://localhost:8080/ajax/getMessage"></imag>
<script type="text/javascript"> /** 不用jasmine框架 **/ function getMsg(){ $.ajax({ url : "http://localhost:8080/ajax/getMessage", //请求url type : "GET", //请求类型 post|get // data : "key=value&key1=value2", //后台用 request.getParameter("key"); dataType : "json", //返回数据的 类型 text|json|html-- success : function(data){ //回调函数 和 后台返回的 数据 alert(JSON.stringify(data)); } }); }
/** jasmine框架测试 **/ // 每一个测试用例的超时时间 jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000;
// 请求的接口的前缀 var base = "http://localhost:8080/ajax";
//测试模块 describe("getMessageJasmine", function() { // 测试方法 it("getMessage", function(done) { // 服务器返回的结果 var result; //调用异步请求 将结果保存到result $.getJSON(base + "/getMessage").then(function(jsonObj) { result = jsonObj; }); // 由于是异步请求，需要使用setTimeout来校验 setTimeout(function() { expect(result).toEqual({"name":"jack","idCard":"1001030202"}); // 校验完成，通知jasmine框架 done(); }, 100); }); });
</script>
</body> </html> |
同时满足三个条件：浏览器限制、跨域、xhr请求
|
package com.kunfan;
import org.springframework.web.bind.annotation.ControllerAdvice; import org.springframework.web.servlet.mvc.method.annotation.AbstractJsonpResponseBodyAdvice;
@ControllerAdvice public class JsonpAdvice extends AbstractJsonpResponseBodyAdvice{
public JsonpAdvice() { super("callback");//此值应该与前端ajax调用中jsonp的值相同，ajax默认为callback } } |
|
// 测试方法（jsonp解决跨域） it("jsonp解决跨域", function(done) { // 服务器返回的结果 var result; //调用异步请求 将结果保存到result $.ajax({ url : base+"/getMessage",//请求url type : "GET", //请求类型 post|get // data : "key=value&key1=value2", //后台用 request.getParameter("key"); dataType : "jsonp", //返回数据的 类型 text|json|html-- jsonp : "callback",//默认 可不写 success : function(data){ //回调函数 和 后台返回的 数据 result = data; } }); |
Jsonp请求会添加请求参数
Callback是jsonp中约定的参数值（即：ajax中jsonp的值）
_：是否缓存，在ajax中添加cache : true ，此参数就没了
1、改服务端代码
2、约定，通过jsonp的值约定
3、动态创建script，通过script函数调用发出请求，返回值是也是js，函数名callback参数的值，函数参数是返回的json对象
4、只支持get请求
5、发送的不是xhr请求
6、不能 异步、事件 等
简单请求：浏览器先执行后判断
非简单请求：浏览器先判断后执行
|
@Bean public FilterRegistrationBean filter(){
FilterRegistrationBean bean = new FilterRegistrationBean(); bean.addUrlPatterns("/*");//支持所有请求 bean.setFilter( new MyFilter());//设置filter实例
return bean;
} |
|
MyFilter implements Filter public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2) throws IOException, ServletException {
HttpServletRequest req = (HttpServletRequest) arg0; HttpServletResponse res = (HttpServletResponse)arg1;//将响应强转成HttpServletResponse
String origin = req.getHeader("Origin");//获得client请求头
res.addHeader("Access-Control-Allow-Origin", origin);//设置origin 请求url:port res.addHeader("Access-Control-Allow-Methods", "*");//调用方法 get、put、delete、post等 ，*所有方法 res.addHeader("Access-Control-Allow-Headers", "Content-Type");//ajax里面的contentType
arg2.doFilter(arg0, arg1);
} |
|
//非简单请求 @PostMapping("/getMessage2")//spring4.0方法 public Model getPost(@RequestBody Model model){ System.out.println("getpost"); return new Model(model.getName(),model.getIdCard()); } |
|
private String name; private String idCard; |
|
//测试模块（被调用方filter解决跨域） describe("getpostJasmine", function() { // 测试方法（被调用方filter解决跨域） it("被调用方filter解决跨域", function(done) { // 服务器返回的结果 var result; //调用异步请求 将结果保存到result $.ajax({ url : base+"/getMessage2",//请求url type : "post",//请求类型 post|get contentType : "application/json;charset=utf-8",//非简单请求 data : JSON.stringify({"name":"tom","idCard":"10010302022"}), success : function(data){//回调函数 和 后台返回的 数据 result = data; } }); // 由于是异步请求，需要使用setTimeout来校验 setTimeout(function() { expect(result).toEqual({"name":"tom","idCard":"10010302022"}); // 校验完成，通知jasmine框架 done(); }, 100); }); }); |
//测试模块（被调用方filter解决跨域）
describe("getpostJasmine", function() {
// 测试方法（被调用方filter解决跨域）
it("被调用方filter解决跨域", function(done) {
// 服务器返回的结果
var result;
//调用异步请求 将结果保存到result
$.ajax({
url : base+"/getMessage2",//请求url
type : "post",//请求类型 post|get
contentType : "application/json;charset=utf-8",//非简单请求
data : JSON.stringify({"name":"tom","idCard":"10010302022"}),
success : function(data){//回调函数 和 后台返回的 数据
result = data;
}
});
// 由于是异步请求，需要使用setTimeout来校验
setTimeout(function() {
expect(result).toEqual({"name":"tom","idCard":"10010302022"});
// 校验完成，通知jasmine框架
done();
}, 100);
});
});
原文：https://www.cnblogs.com/alanpo1120/p/10703044.html