基于对XML的学习,想好好的学习一下AJAX。刚刚学习一个入门,模仿书中的例子,实践一下先。
jsp页面
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
>
< html >
< head >
< script type ="text/javascript" >
function ajaxSubmit(path){
// 获取留言相关信息
var name = document.forms[0].name.value;
var email = document.forms[0].email.value;
var title = document.forms[0].title.value;
var content = document.forms[0].content.value;
// 创建XMLHttpRequest对象
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// new XMLHttpRequest();
// 创建请求结果处理程序
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var date = xmlhttp.responseText;
addMsg(date);
}
}
// 打开连接,true表示异步提交
xmlhttp.open("post",path+"/add.do",true);
// 当方法为post时需要如下设置http头
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送数据
xmlhttp.send("name="+escape(name)+"&email="+escape(email)+"&title="+escape(title)+"&content="+escape(content));
}
// 添加留言信息的方法
function addMsg(date){
// 获取留言DIV的容器
var msg = document.getElementById("msgList");
// 创建新标签
var dl = document.createElement("dl");
var dt = document.createElement("dt");
var ddname = document.createElement("dd");
var ddcontent = document.createElement("dd");
// 插入标签
msg.insertBefore(dl,msg.firstChild);
dl.appendChild(dt);
dl.appendChild(ddname);
dl.appendChild(ddcontent);
dt.innerHTML = "标题:"+document.forms[0].title.value;
ddname.innerHTML = "留言者:"+document.forms[0].name.value+" 时间:" + date;
ddcontent.innerHTML = document.forms[0].content.value;
// 清空输入信息
document.forms[0].name.value="";
document.forms[0].title.value="";
document.forms[0].email.value="";
document.forms[0].content.value="";
}
</ script >
</ head >
< body >
< div id ="msgList" >
<!-- 初始化页面时,显示从数据库读取数据 -->
</ div >
< div id ="postBox" >
< form action ="/add.do" >
< dl >
< dt > 如果你有任何评论、问题、建议,请发邮件给我: </ dt >
< dd > 姓名: < input type ="text" maxlength ="150" size ="45" name ="name" /></ dd >
< dd > Email: < input type ="text" maxlength ="150" size ="45" name ="email" /></ dd >
< dd > 标题: < input type ="text" maxlength ="150" size ="45" name ="title" /></ dd >
< dd > 内容 < textarea rows ="10" cols ="45" name ="content" ></ textarea > </ dd >
< dd >
< input type ="button" onclick ="ajaxSubmit('<%=request.getContextPath()%>');" value ="发送留言" />
</ dd >
</ dl >
</ form >
</ div >
</ body >
< html >
< head >
< script type ="text/javascript" >
function ajaxSubmit(path){
// 获取留言相关信息
var name = document.forms[0].name.value;
var email = document.forms[0].email.value;
var title = document.forms[0].title.value;
var content = document.forms[0].content.value;
// 创建XMLHttpRequest对象
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// new XMLHttpRequest();
// 创建请求结果处理程序
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var date = xmlhttp.responseText;
addMsg(date);
}
}
// 打开连接,true表示异步提交
xmlhttp.open("post",path+"/add.do",true);
// 当方法为post时需要如下设置http头
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送数据
xmlhttp.send("name="+escape(name)+"&email="+escape(email)+"&title="+escape(title)+"&content="+escape(content));
}
// 添加留言信息的方法
function addMsg(date){
// 获取留言DIV的容器
var msg = document.getElementById("msgList");
// 创建新标签
var dl = document.createElement("dl");
var dt = document.createElement("dt");
var ddname = document.createElement("dd");
var ddcontent = document.createElement("dd");
// 插入标签
msg.insertBefore(dl,msg.firstChild);
dl.appendChild(dt);
dl.appendChild(ddname);
dl.appendChild(ddcontent);
dt.innerHTML = "标题:"+document.forms[0].title.value;
ddname.innerHTML = "留言者:"+document.forms[0].name.value+" 时间:" + date;
ddcontent.innerHTML = document.forms[0].content.value;
// 清空输入信息
document.forms[0].name.value="";
document.forms[0].title.value="";
document.forms[0].email.value="";
document.forms[0].content.value="";
}
</ script >
</ head >
< body >
< div id ="msgList" >
<!-- 初始化页面时,显示从数据库读取数据 -->
</ div >
< div id ="postBox" >
< form action ="/add.do" >
< dl >
< dt > 如果你有任何评论、问题、建议,请发邮件给我: </ dt >
< dd > 姓名: < input type ="text" maxlength ="150" size ="45" name ="name" /></ dd >
< dd > Email: < input type ="text" maxlength ="150" size ="45" name ="email" /></ dd >
< dd > 标题: < input type ="text" maxlength ="150" size ="45" name ="title" /></ dd >
< dd > 内容 < textarea rows ="10" cols ="45" name ="content" ></ textarea > </ dd >
< dd >
< input type ="button" onclick ="ajaxSubmit('<%=request.getContextPath()%>');" value ="发送留言" />
</ dd >
</ dl >
</ form >
</ div >
</ body >
AddAction.java
package
com.realsmy.mytangs.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AddAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("name");
String email = request.getParameter("email");
String title = request.getParameter("title");
String content = request.getParameter("content");
// 与数据库交互进行处理,省略。
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
out.print("2007-09-15");
return null;
}
}
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
public class AddAction extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) {
String name = request.getParameter("name");
String email = request.getParameter("email");
String title = request.getParameter("title");
String content = request.getParameter("content");
// 与数据库交互进行处理,省略。
PrintWriter out = null;
try {
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
out.print("2007-09-15");
return null;
}
}
这是对基于AJAX的开发模式的简单理解。
记录于此,继续学习。