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

Posted on 2007-09-15 10:45 久城 阅读(420) 评论(0)  编辑  收藏 所属分类: XML

基于对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的开发模式的简单理解。

记录于此，继续学习。

欢迎来访！^.^!
本BLOG仅用于个人学习交流!
目的在于记录个人成长.
所有文字均属于个人理解.
如有错误，望多多指教！不胜感激！


只有注册用户登录后才能发表评论。
网站导航:
 

Copyright © 久城