简简单单实现Ajax

           很多时候需要做一点例如注册用户名验证、动态加载列表框之类的东西， 其实很简单，　后台一个servlet, 前台简单javascript脚本就能实现。

           下面给出一个动态加载列表框的实例代码，　以供参考：

先来看看后台servlet:

 

package  com.cenglou.dca.servlet;

import  java.io.IOException;
import  java.io.PrintWriter;
import  java.util.Iterator;
import  java.util.List;

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

import  org.apache.log4j.Logger;

import  com.cenglou.dca.report.DcWeekVO;
import  com.cenglou.dca.report.GetWeekStringDAO;

/** */ /**
 * 得到周与日期段的对应关系
 * 
 */
public   class  GetReportDateStringServlet  extends  BaseServlet  ... {
    private static final Logger logger = Logger
            .getLogger(GetReportDateStringServlet.class);

    public void execute(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException ...{
        String Year=request.getParameter("year");
        PrintWriter out=response.getWriter();
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        GetWeekStringDAO dao=new GetWeekStringDAO();
        List list=dao.getWeekStringList(Year);
        Iterator it=list.iterator();
        out.println("<response>");
        while(it.hasNext())...{
            DcWeekVO vo=(DcWeekVO)it.next();
            out.println("<key>");
            out.println("<yearWeek>" + vo.getYearWeek() +"</yearWeek>");
            out.println("<dateString>" + vo.getDateStrig() + "</dateString>");
            out.println("</key>");
        }
        out.println("</response>");
        out.close();
    }

}

 

页面：

 

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=ISO-8859-1" >
< title > Ajax示例 </ title >
< script  type ="text/javascript" > ...
function createXMLHttpRequest()...{
    if(window.ActiveXObject)...{
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if(window.XMLHttpRequest)...{
        xmlHttp = new XMLHttpRequest();
    }
}
function GetDateStringRequest()...{
    createXMLHttpRequest();
    var year = document.getElementById("Year").value;
    var postString="year=" + year;
    var url = "<%=request.getContextPath()%>/GetReportDateStringServlet?timeStamp=" + new Date().getTime();
    xmlHttp.open("POST",url,true);
    xmlHttp.onreadystatechange = callDateStringback;
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
    xmlHttp.send(postString);
}

function callDateStringback()...{
    if(xmlHttp.readyState==4)...{
        if(xmlHttp.status==200)...{
            var keys=xmlHttp.responseXML.getElementsByTagName("key");
            var oldyearWeek=document.getElementById("yearWeek");
            while(oldyearWeek.childNodes.length>1)...{
                oldyearWeek.removeChild(oldyearWeek.childNodes[1]);
            }
            for(i=0;i<keys.length;i++)...{
                var yearWeek=keys[i].firstChild.firstChild.data;
                var dateString=keys[i].lastChild.firstChild.data;
                setDateStringMessage(yearWeek,dateString);
            }
            
        }
    }
}
function setDateStringMessage(yearWeek,dateString)...{
    var yearWeekNode=document.getElementById("yearWeek");
    var newoption=document.createElement("option");
    newoption.value=yearWeek;
    newoption.appendChild(document.createTextNode(dateString));
    yearWeekNode.appendChild(newoption);
}
</ script >
</ head >
< body  onload ="GetDateStringRequest();" >
< table >
< tr >
< td > 年: < select  name ="Year"  onchange ="GetDateStringRequest();" >
<% ... for(int i=cd.get(1);i>=2006;i--){ %>
< option  value ="<%=i%>"  <% =Integer.valueOf(Year).intValue()==i?"selected":"  " % > > <% = i %> </ option >
<% } %>
</ select > 周: < select  id ="yearWeek"  name ="yearWeek" >
< option > --请选择日期段-- </ option >
</ select >< input  type ="hidden"  name ="id"  value ="<%=reportId%>" >< input  type ="submit"  value ="查询" ></ td >
</ tr >
</ table >
</ body >
</ html >

 

多的不想说了，　自己看代码吧！　　代码参考《Ajax基础教程》，　有兴趣的可以找书看看。