soringboot项目前端ajax 03 修改响应函数

function doHandleResponseResult(result){//json String
//1.将json格式字符串转换json格式的js对象
var jsonObj=JSON.parse(result);
console.log(“jsonObj”,jsonObj);
//2.将json对象中的数据更新到页面上
var trs=“”;
for(var i=0;i<jsonObj.length;i++){
trs+=“”+
“”+jsonObj[i].id+“”+
“”+jsonObj[i].title+“”+
“”+jsonObj[i].category+“”+
“”+jsonObj[i].startTime+“”+
“”+jsonObj[i].endTime+“”+
“”+jsonObj[i].state+“”+
“delete”+
“”
}
//2.2将字符串以html的形式更新到tbody位置
var tBody=document.getElementById(“tbodyId”);
tBody.innerHTML=trs;
}

上文为响应函数。

function doGetActivitys(){
debugger
//1.定义请求参数
var params=“”;
//2.定义请求url (前面加/为绝对路径，不加为相对路径)
var url=“doFindActivitys”;
//3.发送异步请求获取服务端资源并更新到页面
//doAjaxGet(url,params,callback);
doAjaxGet(url,params,function(result){
//在浏览器控制台输出result
//console.log(result)
doHandleResponseResult(result);
});
}
function doAjaxGet(url,params,callback){
debugger
//1.创建XmlHttpRequest对象
var xhr=new XMLHttpRequest();
//2.设置状态监听，监听XmlHttpRequest对象与服务端通讯的过程(例如连接是否建立，请求是否在处理，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
//基于xhr对象获取的通讯状态，对响应数据进行处理
if(xhr.readyState4&&xhr.status200){//500表示服务端出错了
//服务端响应的结果会传递给XHR对象，我们可以借助responseText获取响应结果
callback(xhr.responseText);
}
}
//3.创建与服务端的连接
xhr.open(“GET”,url+“?”+params,true);//true表示异步
//4.发送请求
xhr.send(null); //Get请求，send方法不传内容
//5.对响应结果进行处理(在回调函数中处理)。
}

---

此处的代码执行的顺序是，先执行doGetActivitys()，因为这个方法是直接已经 在script标签中进行调用了，这次在没有在代码块中写出来。
url=doFindActivitys
params=" "
callback=function（result）{
//在浏览器控制台输出result
//console.log(result)
doHandleResponseResult(result);
}

然后就调用了doAjaxGet方法
xhr=XMLHttpRequest
callback=function（result）{
//在浏览器控制台输出result
//console.log(result)
doHandleResponseResult(result);
}
之所以callback没有改变，是因为后台那边的数据需要时间，if条件中的xhr.readyState是3.不是4.需要等待

经过数轮的代码等待，xhr.readyState=4，if条件满足了，而后执行
callback（xhr.responseText），responseText包括后台传递的json数组（此时是字符串）。

而后执行doHandleResponseResult(result)函数，
result=xhr.responseText

而后数据根据doHandleResponseResult(result)，写在前端上面

项目的html文件如下

The Activity Page

 <table>
 
    <thead>
       <tr>
       <th>id</th>
       <th>title</th>
       <th>category</th>
       <th>startTime</th>
       <th>endTime</th>
       <th>state</th>
       <th>operation</th>
       </tr>
    </thead>
    
    
    <tbody id="tbodyId">
       <tr >
        <td colspan="7"> data is loading  </td>
       </tr>
       
    </tbody>
    
    
    
 </table>