AJAX实现完整版
程序员文章站
2022-06-13 20:36:53
...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日志</title>
</head>
<body>
<h1>系统日志列表页面Ajax</h1>
<h1>time:<%=new java.util.Date() %></h1>
<table width="100%" border="1" 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>
<script type="text/javascript">
//页面加载完成执行匿名函数
window.onload = function() {
doGetObjects();
}//dom对象
function doGetObjects() {
//1.创建ajax对象-异步访问服务器、异步刷新页面(是实现ajax的一个入口对象)
var xhr = new XMLHttpRequest();
console.log("xhr", xhr);
//2.设置ajax对象的监听-通讯状态和响应状态(通讯是否结束，响应数据是否正确)
xhr.onreadystatechange = function() {
//基于请求响应状态处理结果
//4表示服务端响应结束
//200表示服务端响应ok(正确)
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);//服务端响应的文本
doHandleResponseResult(xhr.responseText);
}
}
//3.建立与服务端的连接-false表示同步，true表示异步-底层会启动工作线程
var url="doFindPageObjects.do?pageCurrent=3";
xhr.open("GET", url, true);
//4.发送请求
xhr.send(null);//get请求此位置不传数据
}
function doHandleResponseResult(result){
//1.将json格式的字符串转换为json格式的javascript对象
var result=JSON.parse(result);
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中
doCreateTd(tr,records[i]);
//3.将tr追加到tbody中
tBody.appendChild(tr);
}
//创建当前行的td对象
function doCreateTd(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);
}
}
</script>
</body>
</html>
package com.jt.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.jt.common.vo.JsonResult;
import com.jt.common.vo.PageObject;
import com.jt.entity.SysLog;
import com.jt.service.SysLogService;
@RequestMapping("/log/")
@Controller
public class SysLogController {
@Autowired
private SysLogService SysLogService;
@RequestMapping("doFindPageObjects")
@ResponseBody
public JsonResult doFindPageObjects(String username,Integer pageCurrent){
return new JsonResult(SysLogService.findPageObjects(username,pageCurrent));
}
@RequestMapping("doFindPageLogs")
public ModelAndView doFindPageLogs(String username,Integer pageCurrent){
PageObject<SysLog>pageObject= SysLogService.findPageObjects(username, pageCurrent);
ModelAndView mv=new ModelAndView();
mv.addObject("pageObject",pageObject);
mv.setViewName("SysLog");
return mv;
}
@RequestMapping("doLogListUI")
public String doLogListUI(){
try {
Thread.sleep(5000);
} catch (Exception e) {
}
return "SysLog-Ajax";
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
必须先open再setRequestHeader,如果这样调整
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.open("POST", url, true);
会报如下错
InvalidStateError: XMLHttpRequest state must be OPENED.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>日志</title>
</head>
<body>
<h1>系统日志列表页面Ajax</h1>
<h1>time:<%=new java.util.Date() %></h1>
<table width="100%" border="1" 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>
<script type="text/javascript">
//页面加载完成执行匿名函数
window.onload = function() {
doGetObjects();
}//dom对象
function doGetObjects() {
//1.创建ajax对象-异步访问服务器、异步刷新页面(是实现ajax的一个入口对象)
var xhr = new XMLHttpRequest();
console.log("xhr", xhr);
//2.设置ajax对象的监听-通讯状态和响应状态(通讯是否结束，响应数据是否正确)
xhr.onreadystatechange = function() {
//基于请求响应状态处理结果
//4表示服务端响应结束
//200表示服务端响应ok(正确)
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);//服务端响应的文本
doHandleResponseResult(xhr.responseText);
}
}
doSendPostRequest(xhr);
}
function doSendGetRequest(){
//3.建立与服务端的连接-false表示同步，true表示异步-底层会启动工作线程
var url="doFindPageObjects.do?pageCurrent=3";
xhr.open("GET", url, true);
//4.发送请求
xhr.send(null);//get请求此位置不传数据
}
function doSendPostRequest(xhr){
//3.建立与服务端的连接-false表示同步，true表示异步-底层会启动工作线程
var url="doFindPageObjects.do";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.发送请求
xhr.send("pageCurrent=3");//Post请求此位置传数据
}
function doHandleResponseResult(result){
//1.将json格式的字符串转换为json格式的javascript对象
var result=JSON.parse(result);
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中
doCreateTd(tr,records[i]);
//3.将tr追加到tbody中
tBody.appendChild(tr);
}
//创建当前行的td对象
function doCreateTd(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);
}
}
</script>
</body>
</html>