简简单单实现Ajax

来源：互联网发布：手机进销存软件免费编辑：程序博客网时间：2024/04/30 07:09

很多时候需要做一点例如注册用户名验证、动态加载列表框之类的东西，其实很简单，　后台一个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>

<title>Ajax示例</title>

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>

<table>

<tr>

<%for(int i=cd.get(1);i>=2006;i--){%>

<%}%>

</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基础教程》，　有兴趣的可以找书看看。