AjaxAnyWhere 实现页面局部刷新_html/css_WEB-ITnose

这个比较jquery、单纯ajax异步简单多了，不多说了直接上代码。

需要引入：ajaxanywhere-1.2.1.jar （最新）和 /ajaxAnyWhereDemo/WebRoot/js/aa.js  ，免费下载地址http://download.csdn.net/detail/xuke6677/8064977

目录结构如下：

1、ListBean.java 实体类   

<strong><span style="font-family:System;font-size:18px;">package org.ydd.test;public class ListBean {	private String id;	private String name;	private String sex;	private String work;	private String address;        //get(),set()…… 省略}</span></strong>

2、   AjaxAnyWhereTest.java  后台servlet

<strong><span style="font-family:System;font-size:18px;">package org.ydd.test;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class AjaxAnyWhereTest extends HttpServlet {	private static final long serialVersionUID = -5750167075517567170L;	List<listbean> rs = new ArrayList<listbean>();		@Override	public void init() throws ServletException {		ListBean userBean = new ListBean();		userBean.setId("1");		userBean.setName("张三");		userBean.setSex("123");		userBean.setWork("prom");		userBean.setAddress("fdsfsd");		rs.add(userBean);	}	public void doGet(HttpServletRequest request, HttpServletResponse response)			throws ServletException, IOException {			doPost(request, response);	}	public void doPost(HttpServletRequest request, HttpServletResponse response)			throws ServletException, IOException {		ListBean userBean = new ListBean();		String id= request.getParameter("id");		if(!"".equals(id) && id!=null){			userBean.setId(id);			userBean.setName(request.getParameter("name"));			userBean.setAddress(request.getParameter("address"));			userBean.setSex(request.getParameter("sex"));			userBean.setWork(request.getParameter("work"));			rs.add(userBean);		}				if(rs.size()>0){			request.setAttribute("queryList", rs);		}				request.getRequestDispatcher("list.jsp").forward(request, response);	}}</listbean></listbean></span></strong>

3、web.xml

<strong><span style="font-family:System;font-size:18px;"><?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee 	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">		<!-- Ajax配置开始,带编码转换(包括ajax提交的编码) -->     <filter>        <filter-name>AjaxAnywhere</filter-name>        <filter-class>org.ajaxanywhere.AAFilter</filter-class>        <init-param>            <param-name>encoding</param-name><!-- 普通提交方式编码 -->            <param-value>GB2312</param-value>        </init-param>        <init-param>            <param-name>ajaxencoding</param-name><!-- AJAX提交方式编码 -->            <param-value>GB2312</param-value>        </init-param>    </filter>        <filter-mapping>        <filter-name>AjaxAnywhere</filter-name>        <url-pattern>*</url-pattern>    </filter-mapping>          <servlet>    <servlet-name>AjaxAnyWhereTest</servlet-name>    <servlet-class>org.ydd.test.AjaxAnyWhereTest</servlet-class>  </servlet>  <servlet-mapping>    <servlet-name>AjaxAnyWhereTest</servlet-name>    <url-pattern>/AjaxAnyWhereTest</url-pattern>  </servlet-mapping>    <!-- Ajax配置结束 -->  <welcome-file-list>    <welcome-file>index.jsp</welcome-file>  </welcome-file-list></web-app></span></strong>

4、index.jsp

<strong><span style="font-family:System;font-size:18px;">      <title>My JSP 'index.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">      	 <forward page="AjaxAnyWhereTest"></forward>  </span></strong>

5、list.jsp

注：需要引入

<strong><span style="font-family:System;font-size:18px;">      <title>ajaxAnywhere局部刷新</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 language="javascript" src="js/aa.js"></script>		<script type="text/javascript">	 <!-- 所要提交的表单 -->		ajaxAnywhere.formName="listForm";	 <!-- 所要刷新的区域 -->		ajaxAnywhere.getZonesToReload = function(){			return "formlist";		} 		//提交		function doCheck(){			var id =  document.getElementById("id").value;			if(id==""){				alert("请填写ID编号！");				return false;			}			var f=document.forms[0];			f.action="AjaxAnyWhereTest";			ajaxAnywhere.submitAJAX();		}	</script>	        <center>  <div>列表</div>  <zone name="formlist">	  <table border="1">	   		<tr>	   			<td>ID编号   </td>	   			<td>姓名</td>	   			<td>性别</td>	   			<td>工作行业</td>	   			<td>地址</td>	   		</tr>	  			<foreach var="listbean" items="${queryList}">			  <tr>			  	<td>${listbean.id}</td>			  	<td>${listbean.name}</td>			  	<td>${listbean.sex}</td>			  	<td>${listbean.work}</td>			  	<td>${listbean.address}</td>			  </tr>	  		    </foreach>	   </table>  </zone>
</center> <br><br><hr> <center>    		<div> <h3>录入</h3>
</div>    		<form name="listForm" action="AjaxAnyWhereTest" method="post">    		<table>    			 <tr>    			 	<td>ID编号 :</td>
<td><input type="text" name="id" id="id"></td>    			 </tr>    			 <tr>    			 	<td>姓名 :</td>
<td><input type="text" name="name"></td>    			 </tr>    			 <tr>    			 	<td>性别 :</td>
<td><input type="text" name="sex"></td>    			 </tr>    			 <tr>    			 	<td>工作行业:</td>
<td><input type="text" name="work"></td>    			 </tr>    			 <tr>    			 	<td>地址:</td>
<td><input type="text" name="address"></td>    			</tr>    			<tr>    				<td><input type="button" value="提交" onclick="return doCheck()"></td>
<td><input type="reset" value="取消"></td>    			</tr>     			    		</table>    		</form>    </center>    </span></strong>