通过ajax请求异步获取服务端日志信息，并局部刷新页面
Step01：设置dom状态监听
window.onload=function(){
doGetObjects();
console.log("hello ajax");
}//dom事件
Step02：定义事件处理函数通过ajax获取数据
function doGetObjects(){
//1.创建ajax请求对象(是实现ajax应用的一个入口对象)
var xhr=new XMLHttpRequest();
console.log(xhr);
//2.设置ajax对象的状态监听(响应是否结束)
xhr.onreadystatechange=function(){
//基于请求响应状态处理结果
//4表示服务端响应结束,200表示服务端响应OK(正确)
if(xhr.readyState==4&&xhr.status==200){
//responseText为服务端响应的文本
console.log(xhr.responseText);//string
doHandleResponseResult(xhr.responseText);
}
}
//3.发送ajax请求
doSendGetRequest(xhr)
}
发送GET请求
//发送GET请求
function doSendGetRequest(xhr){
//3.1.建立与服务端的连接
var url="doFindPageObjects.do?pageCurrent=1"
xhr.open("GET",url,true);//true表示异步(底层会启动工作线程)
//3.2.发送请求
xhr.send(null);//get请求此位置不传数据
}
数据处理函数定义
function doHandleResponseResult(resultStr){
//1.将json格式的字符串转换json格式的JavaScript object
var result=JSON.parse(resultStr);
console.log(result);
//2.处理数据
if(result.state==1){
//将记录显示到tbody中
doSetTableBodyRows(result.data.records);
}else{
alert(result.message);
}
}
显示数据方法定义
//在tbody中显示记录信息
function doSetTableBodyRows(records){
//1.获取tbody对象，并清空内容
var tBody=document.getElementById("tbodyId");
tBody.innerHTML="";
//2.将records数据追加tbody中
for(var i=0;i<records.length;i++){//一条记录一个tr对象
//1.构建tr对象
var tr=document.createElement("tr");
//2.构建多个td对象,并追加到tr中
doCreateTds(tr,records[i]);
//3.将tr追加到tbody中
tBody.appendChild(tr);
}
}
//创建当前的td对象
function doCreateTds(tr,row){
var td=document.createElement("td");
td.innerText=row.id;
tr.appendChild(td);
td=document.createElement("td");
td.innerText=row.username;
tr.appendChild(td);
td=document.createElement("td");
td.innerText=row.method;
tr.appendChild(td);
}
