在Web程序开发中，难免有时候会遇到一些定时业务，如考试系统中的自动提交试卷、还有平时写博客时定时自动保存草稿的功能。在JavaWeb中也可以利用ajax技术来实现这定时自动保存草稿这一功能。
index.jsp关键代码
html代码
<body onLoad="selectBlog()" >!-- 加载时调用查询所有草稿方法-->
<table width="900" height="200" border="0" align="center" cellpadding="0" style="background-repeat:no-repeat" background="images/top.png">
</table>
<table width="900" border="0" align="center" cellspacing="0">
<tr><td width="194" align="center" valign="top" background="#FFFFFF"><p>草稿箱</p>
<div id="draftBox"></div></td> <!—用于草稿列表 -->
<td align="center" valign="top" background="#FFFFFF"><p>添加文章</p>
<form name=" myform" method="post" action="">
<table width="90%" height="350" border="0" cellspacing="0">
<tr> <td height="20" colspan="2" align="center" id="tip"> </td>
</tr> <tr>
<td align="right" height="34">标题: </td>
<td width="84%" align="left">
<input name="title" id="title" type="text" size="57"> </td></tr>
<tr> <td align="right" height="250">内容: </td>
<td> <textarea name="content" cols="55" rows="17" id="content"></textarea></td></tr>
<tr> <td> </td>
<td align="center">
<input name="Submit" type="submit" class="btn_grey" value="保存">
<input name="Submit2" type="reset" class="btn_grey" value="重置"></td>
</tr></table>
</form> </td>
</tr>
</table>
</body>
js关键代码 篇幅有限所以就不贴出构建XMLHttpRequest对象以及请求方法的代码了，注意创建XMLHttpRequest对象时，应该考虑到浏览器的兼容性。不同的浏览器下创建XMLHttpRequest对象是不同的，大多数浏览器都支持 var xmlHttp = new XMLHttpRequest()这种写法，但IE6.0以下的浏览器创建XMLHttpRequest对象时写法有所不同，可以使用if来判断，也可以利用try catch语句来创建XMLHttpRequest对象以解决浏览器兼容性的问题 ，以此尽量兼容大部分浏览器。
<script language="javascript">
//省略了对构造XMLHttpRequest对象并发送请求的代码……
var saveReq = false;
function autoSave(){//自动保存草稿
var title=document.getElementById("title").value;
var content=document.getElementById("content").value;
if(title!=""&&content!="") { //当文章标题及内容不为空时
var param = "title="+title+"&content="+content;//拼接参数
//调用Ajax请求方法
saveReq = httpRequest("post","<c:url value='/BlogServlet?type=autoSave'></c:url>",true,cbf_save,param);
} }
//提示信息 回调函数
function cbf_save(){
if(saveReq.readyState == 4){ //双重判断 当服务器响应结束时
if(saveReq.status == 200){ ///当服务器响应的状态码为200时(即响应成功)
//把提示信息显示出来
document.getElementById("tip").innerHTML = saveReq.responseText;
}}
}
var selectReq = false;
function selectBlog(){//查询所有的草稿
var param = "nocache="+new Date().getTime();
selectReq = httpRequest("get","drafts.jsp",true,cbf_select,param);
}
function cbf_select(){//回调函数
if(selectReq.readyState == 4){
if(selectReq.status == 200){
document.getElementById("draftBox").innerHTML = selectReq.responseText;
}}
}
var delay=1000*10*60; //定义延迟时间，1分钟
//使用JavaScript的window对象的setInterval方法执行指定函数
timer=window.setInterval(autoSave,delay); //每间隔1分钟调用autoSave方法
timer=window.setInterval(selectBlog,delay);//每间隔1分钟调用selectBlog方法
</script>
从上面代码可以看出利用ajax实现无刷新操作实现自动保存草稿功能。首先创建XMLHttpRequest对象并编写发送请求的方法，然后autoSave()方法调用ajax请求方法保存文章页面的信息，selectBlog()方法调用请求方法从数据库查询草稿信息并生成table(草稿列表)，并编写回调函数将结果输出在页面上。而使用JavaScript的Window对象的setInterval()方法实现每间距一定的时间就调用一次指定函数，这样就可以实现定时自动保存草稿的功能了。
drafts.jsp主要代码(作用:生成草稿列表)
调用数据层的查询方法(这里为了方便，所以直接在java脚本调用方法，其实这样并不规范)，返回List，遍历List动态生成table(用于显示草稿箱)，
<!-- selectAllblog -->
<%List<Blog> list = ArticleDao.getInstance().selectAllblog(); %>
<!-- //草稿箱列表 -->
<table width="96%" border="0" cellspacing="0" cellpadding="0">
<%
int i=0;
for(Blog blog:list){ %>
<tr>
<td height="27" align="left" title="<%=blog.getCreateTime()%> 自动保存草稿">
<input name="hContent" type="hidden" id="hContent<%=i%>" value="<%=blog.getContent()%>">
<a href="#" onclick="myform.title.value='<%=blog.getTitle()%>';myform.content.value=document.getElementById('hContent<%=i%>').value;"><%=blog.getTitle()%></a>
</td>
</tr>
<%i++;} %>
</table>
Servlet关键代码
自动保存方法()
public static void autoSave(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
String title = request.getParameter("title"); //获取文章标题
String content = request.getParameter("content"); //获取文章内容
title = URLEncoder.encode(title, "ISO-8859-1");//转换编码，否则乱码
title = URLDecoder.decode(title, "UTF-8");
content = URLEncoder.encode(content, "ISO-8859-1");
content = URLDecoder.decode(content, "UTF-8");
Blog blog = new Blog();
blog.setTitle(title); //保存标题
blog.setContent(content); //保存内容
Calendar c = Calendar.getInstance();//创建一个Calendar
String time= c.get(c.YEAR)+"-"+c.get(c.MONTH)+"-"+c.get(c.DAY_OF_MONTH)+" "+c.get(c.HOUR_OF_DAY)+":"+c.get(c.MINUTE)+":"+c.get(c.SECOND);
blog.setCreateTime(time);//设置保存时间
//获取到标题和内容后，(根据标题和内容查询表中是否有相同的，有就返回false)
boolean res = BlogDao.getInstance().getBlog(blog);
if(!res){ //如果不存在
//saveBlog方法是将当前的Blog对象保存到数据库中
boolean b= BlogDao.getInstance().saveBlog(blog);//调用saveBlog方法
if(b){
response.getWriter().print("文章内容已经自动保存到草稿箱!");
}else {
response.getWriter().print("文章内容自动保存失败!");
}
}
}
从上面代码可以看出，先设置请求和响应的编码，然后获取传过来的参数，获取到参数后，调用查询方法根据标题和内容判断是否该内容已经存在，如不存在就调用SaveBlog()方法保存，存在就不保存。
结果：
