JSP Ajax  自动保存草稿
现在很多都提供了自动保存草稿的功能,这个功能很实用,很人性化。本实例就应用Ajax技术实现了自动保存草稿的功能。
(1)首先建立静态页面,这个页面提供了一个编辑草稿的界面,打开记事本,新建一个名为index.html的页面,我们对代码进行分段讲解。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="javascript">
var xmlHttp=false;
var tid;
//创建一个跨浏览器的XMLHttpRequest对象
(2)创建一个函数用来根据复选框是否被选中的状态设置或清除了一个定时器,当复选框被选中时,定时器就会调用run()方法完成异步调用。代码如下所示:
function check(){
    ElementById("as").checked==true)
ajax实例 文件浏览        tid=window.setTimeout("run()",5000); //设置定时器
    else{
        window.clearTimeout(tid);
        ElementById("Layer1").innerHTML="<font color='red'>已经取消自动保存!</font>";
    }
}
(4)下面开始实现异步调用的过程,并在回调函数中获得了从服务器端返回的数据信息,这里要注意的是在最后我们又调用了check()方法,否则定时器将不能持续工作。代码如下所示:
function run(){
    createXMLHttpRequest();
    adystatechange=callback;
    xmlHttp.open("post","index.jsp");
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send("content="+ElementById("content").value);   
}
function callback(){
在此添加代码1  //获取服务器端返回的数据,并显示在层Layer1
}
</script>
</head>
<body background="bg.gif">
<center><h2>实现自动保存草稿</h2></center>
<center><textarea name="content" cols="47" rows="20"></textarea><br><br>
<input id="as" type="checkbox" value="" onClick="check()">是否自动保存
<div id="Layer1"></div>
</center>
</body>
</html>
(5)创建一个JSP文件来实现把草稿内容保存到一个文本文件当中去。打开记事本,新建一个名为index.jsp的文件,代码如下所示:
<%@ page contentType="text/html; charset=utf-8" %>
<%@ page import="java.util.*" %>
<%@ page import="java.io.*" %>
<%
String PostContent,type;
String filename;
File f;
FileWriter fw;
Parameter("content");
filename="草稿.txt";            //保存草稿的文件
filename= RealPath("/"+filename);
f = new File(filename);
if(!f.exists())                  //如果文件不存,则建立
    f.createNewFile();
fw = new FileWriter(filename);    //建立FileWrite对象,并设定由fw对象变量引用
fw.write(PostContent);
fw.close();                    //关闭文件
out.println("最后于 "+new Date().toString()+" 自动保存成功!");
%>
(6)执行效果如图9-16所示:
图9-16  自动保存草稿

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。