基于對(duì)XML的學(xué)習(xí)，想好好的學(xué)習(xí)一下AJAX。剛剛學(xué)習(xí)一個(gè)入門，模仿書中的例子，實(shí)踐一下先。
          

          
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){
          
                // 獲取留言相關(guān)信息
          
                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;
          
                // 創(chuàng)建XMLHttpRequest對(duì)象
          
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          
                // new XMLHttpRequest();
          
                // 創(chuàng)建請(qǐng)求結(jié)果處理程序
          
                xmlhttp.onreadystatechange = function(){
          
                  if(xmlhttp.readyState==4 && xmlhttp.status==200){   
          
                    var date = xmlhttp.responseText;
          
          addMsg(date);
          
        }
          
      }
          
                // 打開連接，true表示異步提交
          
                xmlhttp.open("post",path+"/add.do",true);
          
                // 當(dāng)方法為post時(shí)需要如下設(shè)置http頭
          
                xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');     
          
                // 發(fā)送數(shù)據(jù)
          
                xmlhttp.send("name="+escape(name)+"&email="+escape(email)+"&title="+escape(title)+"&content="+escape(content));
          
    }
          
              // 添加留言信息的方法
          
              function addMsg(date){
          
                // 獲取留言DIV的容器
          
                var msg = document.getElementById("msgList");
          
                // 創(chuàng)建新標(biāo)簽
          
                var dl = document.createElement("dl");
          
                var dt = document.createElement("dt");
          
                var ddname = document.createElement("dd");
          
                var ddcontent = document.createElement("dd");
          
                // 插入標(biāo)簽
          
                msg.insertBefore(dl,msg.firstChild);
          
      dl.appendChild(dt);
          
      dl.appendChild(ddname);
          
      dl.appendChild(ddcontent);
          
      dt.innerHTML           = "標(biāo)題："+document.forms[0].title.value;
          
      ddname.innerHTML           = "留言者："+document.forms[0].name.value+"&nbsp;時(shí)間：" + 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">
          
              <!--初始化頁面時(shí)，顯示從數(shù)據(jù)庫讀取數(shù)據(jù)  -->
          
              </div>
          
              <div id="postBox">
          
                <form action="/add.do">
          
                  <dl>
          
                    <dt>如果你有任何評(píng)論、問題、建議，請(qǐng)發(fā)郵件給我:</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>標(biāo)題：<input type="text" maxlength="150" size="45" name="title"/></dd>
          
                    <dd>內(nèi)容<textarea rows="10" cols="45" name="content"></textarea></dd>
          
                    <dd>
          
                      <input type="button" onclick="ajaxSubmit('<%=request.getContextPath()%>');" value="發(fā)送留言" />
          
                    </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");
          
                  // 與數(shù)據(jù)庫交互進(jìn)行處理，省略。
          
                  PrintWriter out = null;
          
                  try {
          
            out           = response.getWriter();
          
        }           catch (IOException e) {
          
            e.printStackTrace();
          
        }
          
        out.print(          "2007-09-15");
          
                  return null;
          
    }
          

          
}
          

          

          
這是對(duì)基于AJAX的開發(fā)模式的簡(jiǎn)單理解。
          

          
記錄于此，繼續(xù)學(xué)習(xí)。 


          歡迎來訪！^.^!
          
本BLOG僅用于個(gè)人學(xué)習(xí)交流!
          
目的在于記錄個(gè)人成長.
          
所有文字均屬于個(gè)人理解.
          
如有錯(cuò)誤，望多多指教！不勝感激！
          

          
	
          


          
	    
    




          








          

				
          
	
	
	

          
	
          
	
          Copyright © 久城
          

          

          

    







          
        
	




主站蜘蛛池模板：
迁安市|
呼伦贝尔市|
青川县|
巍山|
白山市|
高雄县|
比如县|
四会市|
永和县|
和静县|
读书|
龙南县|
当阳市|
柳州市|
南汇区|
武平县|
临高县|
稻城县|
东方市|
肥东县|
铁岭市|
普洱|
伊吾县|
盐池县|
六安市|
勃利县|
唐海县|
安远县|
河西区|
锦屏县|
枝江市|
乾安县|
岳阳市|
通辽市|
崇州市|
平山县|
桐庐县|
织金县|
特克斯县|
阜宁县|
合川市|