AJAX学习笔记---应用AJAX模仿"联系站长"（JSP版）

基于对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+"&nbsp;时间：" + 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;
    }

}

这是对基于AJAX的开发模式的简单理解。

记录于此，继续学习。