1. 程式人生 > >Javascript實現ajax提交form表單到xml檔案(Javaweb)

Javascript實現ajax提交form表單到xml檔案(Javaweb)

(1)ajax實現非同步資料傳輸的原理:
當我們使用ajax技術通過頁面與伺服器交換資料的時候,web ui實際上是將請求交給了ajax引擎去處理。這樣就使得ajax引擎充當了中轉站的角色。只要ajax接受了web ui提交過來的請求,那麼與後臺互動的責任就落在了ajax引擎的身上。由於將互動工作交給了ajax引擎,使得web ui可以不必再等待伺服器端產生迴應後再進行其他操作,所以使用者不必再等待而可以進行其他操作。

(2)ajax實現頁面無重新整理資料更新的原理:
當伺服器將提交的請求處理完畢後返回結果也將返回給ajax引擎(注意,返回給ajax引擎的結果為文字形式,要麼是xml檔案,要麼是純文字),然後通過使用javascript從ajax引擎中取出資料,並操作DOM物件進行頁面資料的更新。由於並不是從伺服器端重新發回頁面,而是通過javascript取出瀏覽器內建的ajax引擎中的資料來渲染頁面,所以頁面將不重新整理而進行資料的更新。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html
>
<head> <base href="<%=basePath%>"> <title>My JSP 'ObtainXml.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script> var validate=function(){ var xmlHttp; var divname=document.getElementById("username"); if(window.XMLHttpRequest){ xmlHttp=new XMLHttpRequest(); }else{ xmlHttp=new ActiveObject("Microsoft.XMLHTTP"); } var url="/servlet/AjaxParseXML?username='+username+'&pwd='+pwd"; //username='+username+'&password='+password" xmlHttp.open("POST",url,true); xmlHttp.send(null); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readystate==4&&xmlHttp.status==200){ Log.console("成功"); } } } </script> </head> <body> <form action="${pageContext.request.contextPath}/servlet/AjaxParseXML"> <div> 使用者名稱:<input type="text" id="username" name="username"/></br> 密 碼:<input type="password" name="pwd"/> <input type="submit" value="提交" onClick="validate()"/> </div> </form> <div id="name"> </div> </body> </html>
package servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import utils.Dom4jParseXml;

public class AjaxParseXML extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
       response.setContentType("text/html;charset=utf-8");
       String username=new String(request.getParameter("username").getBytes("iso-8859-1"),"utf-8");
       String pwd=new String(request.getParameter("pwd").getBytes("iso-8859-1"),"utf-8");
       //String user1="wang";
       try {
            Dom4jParseXml.UpdateUserXML(username,pwd);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
     doGet(request,response);
    }

}
package utils;

import java.io.FileOutputStream;
import org.dom4j.Document;
import org.dom4j.Element;
import org.dom4j.io.OutputFormat;
import org.dom4j.io.SAXReader;
import org.dom4j.io.XMLWriter;

public class Dom4jParseXml { 
    /**
     * DOM4j解析xml檔案。
     * @param volt
     * 設定測試電壓範圍
     */
    public static void UpdateUserXML(String username,String pwd) throws Exception{
        //獲取解析器
        SAXReader reader=new SAXReader();
        //讀取xml檔案../webapps/TS7000test/TestParam.xml
        Document dom=reader.read("../webapps/Ajax/users.xml");//伺服器檔案相對路徑
        //獲取xml檔案內元素節點;
        Element root=dom.getRootElement();
        root.element("username").setText(username);
        root.element("pwd").setText(pwd);
        XMLWriter writer=new XMLWriter(new FileOutputStream("../webapps/Ajax/users.xml"),OutputFormat.createPrettyPrint());
        writer.write(dom);
        writer.close();
    }
}
<?xml version="1.0" encoding="UTF-8"?>

<user> 
  <username>lilei</username>  
  <pwd>123</pwd> 
</user>