springboot项目前端ajax01

在我现在看来，ajax就好像是一个快速反应的内存，有很多的时候，ajax是有数据的。这个很好。

01.ajax函数在js中写的，

function doGetActivitys(){
debugger
//1.定义请求参数
var params=“”;
//2.定义请求url (前面加/为绝对路径，不加为相对路径)
var url=“doFindActivitys”;
//3.发送异步请求获取服务端资源并更新到页面
//doAjaxGet(url,params,callback);
doAjaxGet(url,params,function(result){
//在浏览器控制台输出result，这里的result是形式参数
console.log(result)
});

回调函数callback，相当于是在商场预留的手机号码，是只要服务器响应了ajax，那么服务器会根据回调函数把数据传输到某一个ajax请求，从而实现类ajax请求

//定义ajax的get请求函数
function doAjaxGet(url,params,callback){
debugger
//1.创建XmlHttpRequest对象，从前端接受数据
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理，在正常情况下会使用回调函数进行处理，readystate是读取状态的意思，4表示结束了，status是响应状态，响应状态是200表示成功了，404表示没有找到。
if(xhr.readyState4&&xhr.status200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，我们可以借助responseText（json串）获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接，这里的url+？+params，就和get方式很像，open的第一个参数是get，用get方式提交参数（显式）
xhr.open(“GET”,url+“?”+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求，send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}

第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
第五步：通过回调（callback）函数，获得响应结果并进行数据更新.(非阻塞)

需要说明的是controller类中，需要在每一个具体的方法中，如果需要返回的是一个实体（会用json字符串的），添加注解@ResponseBody //告诉spring mvc将返回值转换成json格式字符串。

在前端的时候，url会去记录这个返回值是json的方法，获得数据。

@RequestMapping("doFindActivitys")
@ResponseBody //告诉spring mvc将返回值转换成json格式字符串
public List<Activity> doFindActivitys() {List<Activity> list = ActivityService.findAll();System.out.println(list);return list;//{"key1":value1,"key2":value2,"key3":value3}
}