1.Jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>SysLog-Ajax</title>
</head>
<body>
<h1>This is system log list page-Ajax</h1>
<h1>time:<%=new java.util.Date()%></h1>
<div>
<table border="1" width="100%" cellpadding="2" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>username</th>
<th>method</th>
</tr>
</thead>
<tbody id="tbodyId">
<tr>
<td colspan="3">数据加载中...</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//页面加载完成匿名函数
window.function(){
doGetObjects();
}
function doGetObjects(){
//1.创建ajax对象 是实现ajax的一个入口对象
var xhr = new XMLHttpRequest();
console.log(xhr);//在浏览器的控制台输出一句话
//2.设置ajax对象的状态监听（响应是否结束）
xhr.onreadystatechange=function(){
//基于响应状态，处理结果
//3.建立与服务器的连接
// 4表示服务端响应结束
// 200表示服务器响应ok（正确）
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText); //服务器端返回的结果给xhr
doHandleResponseResult(xhr.responseText);
}
}
// 3.发送请求
// 表单提交用Post
// url 用get
// doSendGetRequest(xhr);
doSendPostRequest(xhr);
}
function doSendGetRequest(xhr) {
//3.1建立与服务器的连接
var url = "doFindPageObject?pageCurrent=1";
xhr.open("GET",url,true);//false表示同步。true表示异步
//3.2.发送请求
xhr.send(null);//get请求此位置不传输局
}
function doSendPostRequest(xhr) {
//3.1建立与服务器的连接
var url = "doFindPageObject";
xhr.open("POST",url,true);//false表示同步。true表示异步
//下面这句话一定要写在open,POST的下面！！！！！！
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.2.发送请求
xhr.send("pageCurrent=1");//POST请求此位置传数据
}
function doHandleResponseResult(resultStr){
//将json格式的字符串转换为json格式的JavaScript对象
var result = JSON.parse(resultStr);
//console.log(result); 注释掉是因为占内存 降低运行效率
// 2.处理数据
if(result.state==1){ //result.data来自PageObject
doSetTableBodyRows(result.data.records); //当前页记录 List<SysLog>
}else{
alert(result.message);
}
}
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为父
tBody.appendChild(tr);
}
function doCreateTds(tr,row){
// 2.构建多个td对象,追加到tr中
var td = document.createElement("td");
td.innerText=row.id;
// td追加到tr中 tr为父。
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);
}
}
</script>
</body>
</html>
2.重点部分：
function doGetObjects(){
//1.创建ajax对象 是实现ajax的一个入口对象
var xhr = new XMLHttpRequest();
console.log(xhr);//在浏览器的控制台输出一句话
//2.设置ajax对象的状态监听（响应是否结束）
xhr.onreadystatechange=function(){
//基于响应状态，处理结果
//3.建立与服务器的连接
// 4表示服务端响应结束
// 200表示服务器响应ok（正确）
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText); //服务器端返回的结果给xhr
doHandleResponseResult(xhr.responseText);
}
}
// 3.发送请求
// 表单提交用Post
// url 用get
// doSendGetRequest(xhr);
doSendPostRequest(xhr);
}
function doSendGetRequest(xhr) {
//3.1建立与服务器的连接
var url = "doFindPageObject?pageCurrent=1";
xhr.open("GET",url,true);//false表示同步。true表示异步
//3.2.发送请求
xhr.send(null);//get请求此位置不传输局
}
function doSendPostRequest(xhr) {
//3.1建立与服务器的连接
var url = "doFindPageObject";
xhr.open("POST",url,true);//false表示同步。true表示异步
//下面这句话一定要写在open,POST的下面！！！！！！
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.2.发送请求
xhr.send("pageCurrent=1");//POST请求此位置传数据
}
xhr.open(“POST”,url,true);//false表示同步。true表示异步
//下面这句话一定要写在open,POST的下面！！！！！！
xhr.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
get与post的不同
get中var url = “doFindPageObject?pageCurrent=1”;
xhr.send(null);//get请求此位置不传输局post中var url = “doFindPageObject”;
xhr.send(“pageCurrent=1”);//POST请求此位置传数据