- 浏览: 408178 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (347)
- java基础 (58)
- ajax (10)
- s2sh (10)
- 版本控制 (4)
- 数据库 (34)
- 服务器 (4)
- 开发工具 (8)
- javascript (15)
- soockte (5)
- ext (2)
- 环境搭建 (7)
- struts2 (9)
- 找工作中的面试技巧 (2)
- 承接网站零活 (0)
- JNI+JONSE+OGNL (8)
- 性能优化 (4)
- Android开发 (5)
- xul (8)
- jquery (2)
- 线程 (3)
- jsp+jdbc (7)
- servlet (2)
- java对xml操作 (1)
- IO流的操作 (10)
- 项目开发前配置 (1)
- css (0)
- 上传、下载 (2)
- 知识探讨 (2)
- html (2)
- HQL (0)
- 工作技巧 (1)
- IT (1)
- Hibernate杂谈 (10)
- Spring杂谈 (35)
- DWR (5)
- JUnit测试 (3)
- EasyMock测试web (1)
- ibatis (6)
- maysql (5)
- C++ (0)
- 正则表达式(解剖) (1)
- 密码安全 (2)
- 上传 (1)
- socket (1)
- jni(java与c++结合) (1)
- jdk版本问题 (0)
- tomcat版本问题 (5)
- linux基本命令(初学) (7)
- linux项目发布 (1)
- 3年的经验总结 (1)
- 加解密 (2)
- 高级java阶段 (2)
- java内存分区 (1)
- 浏览器 (1)
- 职业规划 (1)
- 管理 (5)
- java语音 (1)
- SSH (1)
- jsp (3)
- extjs (1)
- uml (2)
- 加密 (1)
- web (2)
- Ant (1)
- 自述 (1)
- Linux (1)
- ssh源码解剖 (1)
- 代码优化 (1)
- 设计模式 (0)
- xml (2)
- JOSN (1)
- scala (0)
- hadoop (0)
- spark (0)
- hana (1)
- shior (1)
- java Word (6)
- java PDF (4)
- java Excel (0)
最新评论
-
高级java工程师:
ztao2333 写道谢谢。收藏下这个总结。呵呵
温习jdk和tomcat -
ztao2333:
大写的,不是大学的
温习jdk和tomcat -
ztao2333:
谢谢。收藏下这个总结。
温习jdk和tomcat -
the_small_base_:
你好,可以提供调用方法吗?需要的Jar,能发下源码吗?谢谢
java实现语音 -
高级java工程师:
文思涌动 写道楼主新年好。可否再传一遍给我,我没有收到, 不清 ...
s2sh整合
一、开门见山
这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人。
关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科。
只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论:
首先是异步交互,用户感觉不到页面的提交,当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。
其次是响应速度快,这也是用户强烈体验。
然后是与我们开发者相关的,复杂UI的成功处理,一直以来,我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS,使得复杂的UI的设计变得更加成功。
最后,AJAX请求的返回对象为XML文件,这也是一个潮流,就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。
好了,闲话少说,让我们转入正题吧。
我们的第一个例子是基于Servlet为后台的一个web应用。
二、基于Servlet的AJAX
第一个例子是关于关联选择框的问题,如图:
这是一个很常见的UI,当用户在第一个选择框里选择ZHEJIANG时,第二个选择框要出现ZHEJIANG的城市;当用户在第一个选择框里选择JIANGSU时,第二个选择框里要出现JIANGSU的城市。
首先,我们来看配置文件web.xml,在里面配置一个servlet,跟往常一样:
第一眼看来,跟我们平常的JSP没有两样。仔细一看,不同在JS里头。
我们首先来看第一个方法:getResult(stateVal),在这个方法里,首先是取得XmlHttpRequest;然后设置该请求的url:req.open("GET",url, true);接着设置请求返回值的接收方法:req.onreadystatechange = complete;该返回值的接收方法为——complete();最后是发送请求:req.send(null);
然后我们来看我们的返回值接收方法:complete(),这这个方法里,首先判断是否正确返回,如果正确返回,用DOM对返回的XML文件进行解析。关于DOM的使用,这里不再讲述,请大家参阅相关文档。得到city的值以后,再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。
最后我们来看看Servlet文件:
这个类也十分简单,首先是从request里取得state参数,然后根据state参数生成相应的XML文件,最后将XML文件输出到PrintWriter对象里。
到现在为止,第一个例子的代码已经全部结束。是不是比较简单?我们进入到第二个实例吧!
这次是基于JSP的AJAX的一个应用。
三、基于JSP的AJAX
这个例子是关于输入校验的问题,我们知道,在申请用户的时候,需要去数据库对该用户性进行唯一性确认,然后才能继续往下申请。如图:
这种校验需要访问后台数据库,但又不希望用户在这里提交后等待,当然是AJAX技术大显身手的时候了。
首先来看显示UI的JSP:
所有的JS都跟上一个例子一样,不同的只是对返回值的操作,这次是用alert来显示:alert(http_request.responseText);
我们来看处理逻辑JSP:
非常简单,先取得参数,然后作处理,最后将结果打印在out里。
我们的第三个例子仍然以这个唯一性校验为例子,这次结合Struts开发框架来完成AJAX的开发。
四、基于Struts的AJAX
首先,我们仍然是对Struts应用来做配置,仍然是在struts-config,xml文件里做配置,如下:
<action type="com.ajax.CheckAction"
scope="request" path="/ajax/check">
<forward name="success" path="/check.jsp"/>
</action>
跟普通的Struts应用的配置一样,只是没有ActionForm的配置。
下面是Action类:
package com.ajax;
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;
import org.apache.struts.action.DynaActionForm;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class CheckAction extends Action
{
public final ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception
{
System.out.println("haha...............................");
String username= request.getParameter("username");
System.out.println(username);
String retn;
if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
else retn = "congraducation!you can use this name....";
PrintWriter out=response.getWriter();
out.write(retn);
out.close();
return mapping.findForward("success");
}
public static void main(String[] args)
{
}
}
我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。最后,我们来看看JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Check.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck() {
var f = document.forms[0];
var username = f.username.value;
if(username=="") {
window.alert("The user name can not be null!");
f.username.focus();
return false;
}
else {
send_request('ajax/check.do?username='+username);
}
}
</script>
<body>
<form name="form1" action="" method="post">
User Name:<input type="text" name="username" value="">
<input type="button" name="check" value="check" onClick="userCheck()">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
我们可以看到,JSP基本是一样的,除了要发送的url:ajax/check.do?username='+username。
最后,我们来看一个基于Struts和AJAX的复杂一些的例子,如果不用AJAX技术,UI的代码将十分复杂。
五、一个复杂的实例
我们先来看看UI图:
这是一个比较复杂的级联:一共八个列表框,三个下拉框。从第一个列表框里选择到第二个列表框里后,第一个选择框里的选项是第二个列表框的选择;然后,在第一个选择框里选择以后,与选择值关联的一些选项出现在第三个列表框里。从第三个列表框里选择选项到第四个列表框里,同样,第二个选择框的选项也是第四个列表框的选项;如果对第二个选择框进行选择后,与选择值关联的一些选项出现在第六个列表框里,依次类推……
这个UI的逻辑就比较复杂,但使用了AJAX使得我们实现起来就简单多了,这个例子我们除了使用Action类,还要用到POJO类和Business类,然后我们扩展的话,可以通过Business类和数据库连接起来。
我们还是先看配置文件:
虽然这个JSP复杂多了,但是关于AJAX的代码还是跟前面的例子一样,在这里我也就不多说了,请大家自己看。
六、蛇足
好了,例子都说完了。废话也就不多说了,只说一件事:AJAX好像来势汹汹,要把我们用得极其普遍、极其习惯的Struts等的MVC开发模式取代掉一样。
其实,AJAX有它的优点,同样也有它的缺点。它一般用在用户不想等待返回结果的时候和复杂的UI上;其他时候,我们还是可以使用Struts等常规方法。
一句话,不要为了使用AJAX而使用AJAX,而是要在适合于使用AJAX的地方使用AJAX
这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来。不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人。
关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科。
只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论:
首先是异步交互,用户感觉不到页面的提交,当然也不等待页面返回。这是使用了AJAX技术的页面给用户的第一感觉。
其次是响应速度快,这也是用户强烈体验。
然后是与我们开发者相关的,复杂UI的成功处理,一直以来,我们对B/S模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS,使得复杂的UI的设计变得更加成功。
最后,AJAX请求的返回对象为XML文件,这也是一个潮流,就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。
好了,闲话少说,让我们转入正题吧。
我们的第一个例子是基于Servlet为后台的一个web应用。
二、基于Servlet的AJAX
第一个例子是关于关联选择框的问题,如图:
这是一个很常见的UI,当用户在第一个选择框里选择ZHEJIANG时,第二个选择框要出现ZHEJIANG的城市;当用户在第一个选择框里选择JIANGSU时,第二个选择框里要出现JIANGSU的城市。
首先,我们来看配置文件web.xml,在里面配置一个servlet,跟往常一样:
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <servlet> <servlet-name>SelectCityServlet</servlet-name> <servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>SelectCityServlet</servlet-name> <url-pattern>/servlet/SelectCityServlet</url-pattern> </servlet-mapping> </web-app> 然后,来看我们的JSP文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript"> function getResult(stateVal) { var url = "servlet/SelectCityServlet?state="+stateVal; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url, true); req.onreadystatechange = complete; req.send(null); } } function complete(){ if (req.readyState == 4) { if (req.status == 200) { var city = req.responseXML.getElementsByTagName("city"); //alert(city.length); var str=new Array(); for(var i=0;i<city.length;i++){ str[i]=city[i].firstChild.data; } //alert(document.getElementById("city")); buildSelect(str,document.getElementById("city")); } } } function buildSelect(str,sel) { sel.options.length=0; for(var i=0;i<str.length;i++) { sel.options[sel.options.length]=new Option(str[i],str[i]) } } </script> <body> <select name="state" onChange="getResult(this.value)"> <option value="">Select</option>> <option value="zj">ZEHJIANG</option>> <option value="zs">JIANGSU</option>> </select> <select id="city"> <option value="">CITY</option> </select> </body> </html>
第一眼看来,跟我们平常的JSP没有两样。仔细一看,不同在JS里头。
我们首先来看第一个方法:getResult(stateVal),在这个方法里,首先是取得XmlHttpRequest;然后设置该请求的url:req.open("GET",url, true);接着设置请求返回值的接收方法:req.onreadystatechange = complete;该返回值的接收方法为——complete();最后是发送请求:req.send(null);
然后我们来看我们的返回值接收方法:complete(),这这个方法里,首先判断是否正确返回,如果正确返回,用DOM对返回的XML文件进行解析。关于DOM的使用,这里不再讲述,请大家参阅相关文档。得到city的值以后,再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。
最后我们来看看Servlet文件:
import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * @author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectCityServlet extends HttpServlet { public SelectCityServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); String state = request.getParameter("state"); StringBuffer sb=new StringBuffer("<state>"); if ("zj".equals(state)){ sb.append("<city>hangzhou</city><city>huzhou</city>"); } else if("zs".equals(state)){ sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>"); } sb.append("</state>"); PrintWriter out=response.getWriter(); out.write(sb.toString()); out.close(); } }
这个类也十分简单,首先是从request里取得state参数,然后根据state参数生成相应的XML文件,最后将XML文件输出到PrintWriter对象里。
到现在为止,第一个例子的代码已经全部结束。是不是比较简单?我们进入到第二个实例吧!
这次是基于JSP的AJAX的一个应用。
三、基于JSP的AJAX
这个例子是关于输入校验的问题,我们知道,在申请用户的时候,需要去数据库对该用户性进行唯一性确认,然后才能继续往下申请。如图:
这种校验需要访问后台数据库,但又不希望用户在这里提交后等待,当然是AJAX技术大显身手的时候了。
首先来看显示UI的JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Check.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <script type="text/javascript"> var http_request = false; function send_request(url) {//初始化、指定处理函数、发送请求的函数 http_request = false; //开始初始化XMLHttpRequest对象 if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) {//设置MiME类别 http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { // 异常,创建对象实例失败 window.alert("不能创建XMLHttpRequest对象实例."); return false; } http_request.onreadystatechange = processRequest; // 确定发送请求的方式和URL以及是否同步执行下段代码 http_request.open("GET", url, true); http_request.send(null); } // 处理返回信息的函数 function processRequest() { if (http_request.readyState == 4) { // 判断对象状态 if (http_request.status == 200) { // 信息已经成功返回,开始处理信息 alert(http_request.responseText); } else { //页面不正常 alert("您所请求的页面有异常。"); } } } function userCheck() { var f = document.form1; var username = f.username.value; if(username=="") { window.alert("The user name can not be null!"); f.username.focus(); return false; } else { send_request('check1.jsp?username='+username); } } </script> <body> <form name="form1" action="" method="post"> User Name:<input type="text" name="username" value=""> <input type="button" name="check" value="check" onClick="userCheck()"> <input type="submit" name="submit" value="submit"> </form> </body> </html>
所有的JS都跟上一个例子一样,不同的只是对返回值的操作,这次是用alert来显示:alert(http_request.responseText);
我们来看处理逻辑JSP:
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %> <% String username= request.getParameter("username"); if("educhina".equals(username)) out.print("用户名已经被注册,请更换一个用户名。"); else out.print("用户名尚未被使用,您可以继续。"); %>
非常简单,先取得参数,然后作处理,最后将结果打印在out里。
我们的第三个例子仍然以这个唯一性校验为例子,这次结合Struts开发框架来完成AJAX的开发。
四、基于Struts的AJAX
首先,我们仍然是对Struts应用来做配置,仍然是在struts-config,xml文件里做配置,如下:
<action type="com.ajax.CheckAction"
scope="request" path="/ajax/check">
<forward name="success" path="/check.jsp"/>
</action>
跟普通的Struts应用的配置一样,只是没有ActionForm的配置。
下面是Action类:
package com.ajax;
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;
import org.apache.struts.action.DynaActionForm;
/**
* @author Administrator
*
* TODO To change the template for this generated type comment go to
* Window - Preferences - Java - Code Style - Code Templates
*/
public class CheckAction extends Action
{
public final ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception
{
System.out.println("haha...............................");
String username= request.getParameter("username");
System.out.println(username);
String retn;
if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
else retn = "congraducation!you can use this name....";
PrintWriter out=response.getWriter();
out.write(retn);
out.close();
return mapping.findForward("success");
}
public static void main(String[] args)
{
}
}
我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。最后,我们来看看JSP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Check.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<script type="text/javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常,创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回,开始处理信息
alert(http_request.responseText);
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck() {
var f = document.forms[0];
var username = f.username.value;
if(username=="") {
window.alert("The user name can not be null!");
f.username.focus();
return false;
}
else {
send_request('ajax/check.do?username='+username);
}
}
</script>
<body>
<form name="form1" action="" method="post">
User Name:<input type="text" name="username" value="">
<input type="button" name="check" value="check" onClick="userCheck()">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
我们可以看到,JSP基本是一样的,除了要发送的url:ajax/check.do?username='+username。
最后,我们来看一个基于Struts和AJAX的复杂一些的例子,如果不用AJAX技术,UI的代码将十分复杂。
五、一个复杂的实例
我们先来看看UI图:
这是一个比较复杂的级联:一共八个列表框,三个下拉框。从第一个列表框里选择到第二个列表框里后,第一个选择框里的选项是第二个列表框的选择;然后,在第一个选择框里选择以后,与选择值关联的一些选项出现在第三个列表框里。从第三个列表框里选择选项到第四个列表框里,同样,第二个选择框的选项也是第四个列表框的选项;如果对第二个选择框进行选择后,与选择值关联的一些选项出现在第六个列表框里,依次类推……
这个UI的逻辑就比较复杂,但使用了AJAX使得我们实现起来就简单多了,这个例子我们除了使用Action类,还要用到POJO类和Business类,然后我们扩展的话,可以通过Business类和数据库连接起来。
我们还是先看配置文件:
<action type="com.ajax.SelectAction" scope="request" path="/ajax/select"> <forward name="success" path="/select.jsp"/> </action> 然后看看Action类: /* /** * Title : Base Dict Class * Description : here Description is the function of class, here maybe multirows * Copyright: Copyright (c) 2004 * @company Freeborders Co., Ltd. * @Goal Feng * @Version 1.0 */ package com.ajax; import java.io.PrintWriter; import java.util.List; 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; /** * @author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectAction extends Action { public final ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception { response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); String type = request.getParameter("type"); String id = request.getParameter("id"); System.out.println(id); StringBuffer sb=new StringBuffer("<select>"); sb.append("<type>"+type+"</type>"); List list = new SelectBusiness().getData(id); for(int i=0;i<list.size();i++) { SelectForm sel = (SelectForm)list.get(i); sb.append("<text>"+sel.getText()+"</text><value>"+sel.getValue()+"</value>"); } sb.append("</select>"); PrintWriter out=response.getWriter(); out.write(sb.toString()); out.close(); System.out.println(sb.toString()); return mapping.findForward("success"); } public static void main(String[] args) { } } POJO类和Business类: package com.ajax; /** * @author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectForm { private String text; private String value; /** * @return Returns the text. */ public String getText() { return text; } /** * @param text The text to set. */ public void setText(String text) { this.text = text; } /** * @return Returns the value. */ public String getValue() { return value; } /** * @param value The value to set. */ public void setValue(String value) { this.value = value; } public static void main(String[] args) { } } package com.ajax; import java.util.ArrayList; import java.util.List; /** * @author Administrator * * TODO To change the template for this generated type comment go to * Window - Preferences - Java - Code Style - Code Templates */ public class SelectBusiness { public List getData(String id) { ArrayList list = new ArrayList(); for(int i=1;i<6;i++) { SelectForm form = new SelectForm(); form.setText(id+i); form.setValue(id+i); list.add(form); } return list; } public static void main(String[] args) { } } 最后是JSP文件: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE>FB</TITLE> <LINK href="images/magazin.css" type=text/css rel=stylesheet> <LINK href="images/briefing.css" type=text/css rel=stylesheet> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <META content="MSHTML 6.00.2800.1498" name=GENERATOR> <style type="text/css"> <!-- .style1 { color: #000000; font-weight: bold; font-size: 10pt; } .style2 {font-size: 10pt; color: #FF0000;} --> </style> <script language="javascript"> function Add() { if(document.all.Education2.style.display=='block')document.all.Education2.style.display='none'; else document.all.Education2.style.display='block'; } </script> </HEAD> <BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> <script type="text/javascript" src="images/head.js"></script> <script language=javascript> function getResult(type,id) { var url = "ajax/select.do?type="+type+"&id="+id; if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); } if(req){ req.open("GET",url, true); req.onreadystatechange = complete; req.send(null); } } function complete(){ if (req.readyState == 4) { if (req.status == 200) { var type = req.responseXML.getElementsByTagName("type"); var value = req.responseXML.getElementsByTagName("value"); var str=new Array(); for(var i=0;i<value.length;i++){ str[i]=value[i].firstChild.data; } var type = type[0].firstChild.data; removeType1(type); if(type=="0") { buildSelect(str,document.getElementById("select28")); } else if(type=="1") { buildSelect(str,document.getElementById("select32")); } else if(type=="2") { buildSelect(str,document.getElementById("select34")); } } } } function buildSelect(str,sel) { sel.options.length=0; for(var i=0;i<str.length;i++) { sel.options[sel.options.length]=new Option(str[i],str[i]) } } function removeType1(type) { var form = document.forms[0]; if(type=="0") { removeAll(form.select28); removeAll(form.select29); removeAll(form.select30); removeAll(form.select31); removeAll(form.select32); removeAll(form.select33); removeAll(form.select34); removeAll(form.select35); } else if(type=="1") { removeAll(form.select31); removeAll(form.select32); removeAll(form.select33); removeAll(form.select34); removeAll(form.select35); } else if(type=="2") { removeAll(form.select34); removeAll(form.select35); } else if(type=="3") { } } function selChange(f,h) { for(i = 0;i < f.length; i++) { if(f.options[i].selected == true) { h.options.add(new Option( f.options[i].text,f.options[i].value)); f.options.remove(i); i--; } } } function removeAll(obj) { for(i=0;i<obj.length;i++) { obj.options.remove(i); i--; } } function addAll(f,h) { for(i = 0;i < f.length; i++) { h.options.add(new Option( f.options[i].text,f.options[i].value)); f.options.remove(i); i--; } } function changeSel(offer,getter,type) { removeType(type); for(i=0;i<getter.length;i++) { getter.options.remove(i); i--; } getter.options.add(new Option("","")); for(i = 0;i < offer.length; i++) { getter.options.add(new Option(offer.options[i].text,offer.options[i].value)); } } function removeType(type) { var form = document.forms[0]; if(type=="0") { removeAll(form.select25); removeAll(form.select28); removeAll(form.select29); removeAll(form.select30); removeAll(form.select31); removeAll(form.select32); removeAll(form.select33); removeAll(form.select34); removeAll(form.select35); } else if(type=="1") { removeAll(form.select30); removeAll(form.select31); removeAll(form.select32); removeAll(form.select33); removeAll(form.select34); removeAll(form.select35); } else if(type=="2") { removeAll(form.select31); removeAll(form.select34); removeAll(form.select35); } else if(type=="3") { } } function removeAll(obj) { for(i=0;i<obj.length;i++) { obj.options.remove(i); i--; } } </script> <form> <font face="Arial, Helvetica, sans-serif"></font> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD align=middle vAlign=top bgcolor="#eeeeee"><!--[ Left & Contents & Right ]------> <TABLE cellSpacing=0 cellPadding=0 width=945 align=center background=images/bg2.gif border=0> <TBODY> <TR> <TD vAlign=top> <TABLE cellSpacing=0 cellPadding=0 width="95%" align=center border=0> <TBODY> <TR> <TD width="97%" align=right> <p align="left"> Resource Management >> New Staff</TD> </TR> <TR height=4> <TD></TD> </TR> <TR> <TD valign="top"> <table class=homeBody cellspacing=0 cellpadding=0 width="100%" align=center border=0> <tbody> <tr> <td height=25 colspan="2" nowrap><table class=grid style="WIDTH: 100%;" cellspacing=0 cellpadding=3> <tbody> <tr class=gridHeader> <td width="26%" align=left bgcolor="#eeeeee" ><strong> Personal Information</strong></td> <td width="74%" align=left bgcolor="#eeeeee" ><span class="gridAlternating">Last Modified : 06/06/2005</span></td> </tr> </tbody> </table></td> </tr> <tr> <td valign=middle nowrap><div align="right"><input style="width:50px" class="button" type="button" value="Save" name="B323252"> <input style="width:50px" class="button" type="button" value="Undo" name="B323262"> </div></td> </tr> <tr> <td colspan=2 valign="top" class="modifiedRow modifiedProducts"> <table id=DynamicTabsTable cellspacing=0 cellpadding=0 border=0 name="DynamicTabsTable"> <tbody> <tr id=DynamicTabsTR> <script language=JavaScript src="images/Public.js"></script> </tr> </tbody> </table> <table width="100%" border="0" cellpadding="0" cellspacing="3" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF"> <tr> <td nowrap><fieldset align="left" style="PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; LINE-HEIGHT: 30px; PADDING-TOP: 8px;width:900px"> <legend class=legend>Freeborders Experience</legend> <table width="100%" height="15" border="0" align="center" cellspacing="0" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" id="table21"> <tr> <td nowrap><strong>FB Vertical Experience</strong></td> <td colspan="2"><strong>FB Customer Experience </strong></td> </tr> <tr> <td height="26" valign="top" nowrap> </td> <td colspan="2" valign="top" nowrap><strong> <select name="select25" id="select25" style="WIDTH: 179px" onchange="getResult('0',document.forms[0].select25.value);"> <option value="b">b</option> <option value="c">c</option> </select> </strong></td> </tr> <tr> <td height="26" valign="top" nowrap> <table border="0" cellspacing="0" cellpadding="0" id="table34"> <tr> <td> <select id="select26" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select26"> <option value="a">a</option> </select> </td> <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center"> <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table35"> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button29" style="WIDTH: 30px" value=">" onclick="selChange(document.forms[0].select26,document.forms[0].select27);changeSel(document.forms[0].select27,document.forms[0].select25,'0')" /> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button30" style="WIDTH: 30px" value=">>" causesvalidation="False" onclick="addAll(document.forms[0].select26,document.forms[0].select27);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/> </div></td> </tr> <tr> <td height="5"><div align="center"></div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button31" style="WIDTH: 30px" value="<" causesvalidation="False" onclick="selChange(document.forms[0].select27,document.forms[0].select26,document.forms[0].select25,1);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button32" style="WIDTH: 30px" value="<<" causesvalidation="False" onclick="addAll(document.forms[0].select27,document.forms[0].select26);changeSel(document.forms[0].select27,document.forms[0].select25,'0')"/> </div></td> </tr> </table> </div></td> <td> </td> <td align="right"> <select id="select27" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select27"> <option value="b">b</option> <option value="c" selected>c</option> </select></td> </tr> </table></td> <td colspan="2" valign="top" nowrap> <table border="0" cellspacing="0" cellpadding="0" id="table36"> <tr> <td> <select id="select28" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select28"> <option value="b1">b1</option> </select></td> <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center"> <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table37"> <tr> <td><div align="center"> <input type="button" name="button2" id="button33" style="WIDTH: 30px" value=">" onclick="selChange(document.forms[0].select28,document.forms[0].select29);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button34" style="WIDTH: 30px" value=">>" causesvalidation="False" onclick="addAll(document.forms[0].select28,document.forms[0].select29);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/> </div></td> </tr> <tr> <td height="5"><div align="center"></div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button35" style="WIDTH: 30px" value="<" causesvalidation="False" onclick="selChange(document.forms[0].select29,document.forms[0].select28);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button36" style="WIDTH: 30px" value="<<" causesvalidation="False" onclick="addAll(document.forms[0].select29,document.forms[0].select28);changeSel(document.forms[0].select29,document.forms[0].select30,'1')"/> </div></td> </tr> </table> </div></td> <td> </td> <td> <select id="select29" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select29"> <option value="b2">b2</option> </select></td> </tr> </table></td> </tr> <tr> <td height="10" colspan="2" nowrap></td> <td width="275" valign="top"> </td> </tr> <tr> <td nowrap><strong>Project Experience</strong></td> <td colspan="2" nowrap><strong>SubProject Experience</strong></td> </tr> <tr> <td height="10" valign="top" nowrap><strong> <select name="select30" id="select30" style="WIDTH: 179px" onchange="getResult('1',document.forms[0].select30.value);"> <option value=""></option> <option value="b2">b2</option> </select> </strong></td> <td colspan="2" valign="top" nowrap><strong> <select name="select31" id="select31" style="WIDTH: 179px" onchange="getResult('2',document.forms[0].select31.value);"> <option> </option> <option value="b13">b13</option> <option value="b14">b14</option> </select> </strong></td> </tr> <tr> <td height="10" valign="top" nowrap> <table border="0" cellspacing="0" cellpadding="0" id="table38"> <tr> <td> <select id="select32" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select32"> <option value="b11">b11</option> <option value="b12">b12</option> </select></td> <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center"> <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table39"> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button37" style="WIDTH: 30px" value=">" onclick="selChange(document.forms[0].select32,document.forms[0].select33);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button38" style="WIDTH: 30px" value=">>" causesvalidation="False" onclick="addAll(document.forms[0].select32,document.forms[0].select33);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/> </div></td> </tr> <tr> <td height="5"><div align="center"></div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button39" style="WIDTH: 30px" value="<" causesvalidation="False" onclick="selChange(document.forms[0].select33,document.forms[0].select32);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button40" style="WIDTH: 30px" value="<<" causesvalidation="False" onclick="addAll(document.forms[0].select33,document.forms[0].select32);changeSel(document.forms[0].select33,document.forms[0].select31,'2')"/> </div></td> </tr> </table> </div></td> <td> </td> <td> <select id="select33" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select33"> <option value="b13">b13</option> <option value="b14">b14</option> </select></td> </tr> </table></td> <td colspan="2" valign="top" nowrap> <table border="0" cellspacing="0" cellpadding="0" id="table40"> <tr> <td> <select id="select34" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select34"> <option value="b111">b111</option> <option value="b112">b112</option> <option value="b113">b113</option> </select></td> <td width="50" align="middle" valign="middle" bordercolorlight="#C0C0C0" bordercolordark="#FFFFFF" class="tableblackborder"><div align="center"> <table width="80%" height="110" border="0" align="center" cellpadding="0" cellspacing="0" id="table41"> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button41" style="WIDTH: 30px" value=">" onclick="selChange(document.forms[0].select34,document.forms[0].select35);"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button42" style="WIDTH: 30px" value=">>" causesvalidation="False" onclick="addAll(document.forms[0].select34,document.forms[0].select35)"/> </div></td> </tr> <tr> <td height="5"><div align="center"></div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button43" style="WIDTH: 30px" value="<" causesvalidation="False" onclick="selChange(document.forms[0].select35,document.forms[0].select34);"/> </div></td> </tr> <tr> <td><div align="center"> <input name="button2" type="button" class="button" id="button44" style="WIDTH: 30px" value="<<" causesvalidation="False" onclick="addAll(document.forms[0].select35,document.forms[0].select34)"/> </div></td> </tr> </table> </div></td> <td> </td> <td> <select id="select35" style="WIDTH: 180px; HEIGHT: 120px" multiple="multiple" size="4" name="select35"> <option value="b114">b114</option> <option value="b115">b115</option> <option value="b116">b116</option> </select></td> </tr> </table></td> </tr> </table></td> </tr> </table> </fieldset></td> </tr> </table></td> </tr> </tbody> </table></TD> </TR> </TBODY> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width="95%" align=center border=0> <TBODY> <TR valign="top"> <TD width="97%" align="left" valign="middle"><div align="right"><input style="width:50px" class="button" type="button" value="Save" name="B32"> <input style="width:50px" class="button" type="button" value="Undo" name="B3"> </div></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE> <script type="text/javascript" src="images/bottom.js"></script></TD></TR></TBODY></TABLE> </BODY></form></HTML>
虽然这个JSP复杂多了,但是关于AJAX的代码还是跟前面的例子一样,在这里我也就不多说了,请大家自己看。
六、蛇足
好了,例子都说完了。废话也就不多说了,只说一件事:AJAX好像来势汹汹,要把我们用得极其普遍、极其习惯的Struts等的MVC开发模式取代掉一样。
其实,AJAX有它的优点,同样也有它的缺点。它一般用在用户不想等待返回结果的时候和复杂的UI上;其他时候,我们还是可以使用Struts等常规方法。
一句话,不要为了使用AJAX而使用AJAX,而是要在适合于使用AJAX的地方使用AJAX
发表评论
-
ajaxFileUpload上传文件时无返回结果,调整函数后出现syntaxError :unexpected
2015-11-13 13:24 1933<table id="deploy_app ... -
document.createElement()的用法
2013-08-06 15:46 837document.createElement()的用法 ... -
ajax基本的实例
2011-03-28 15:30 939核心对象变量 代码 var xmlHttp; // ... -
第六章
2011-01-27 19:16 718DWR util.js 学习笔记 util.js包含一 ... -
第五章
2011-01-27 19:16 734关键字: dwr 学习笔记<三>demo 首先下 ... -
第四章
2011-01-27 19:15 832$(); 功能:相当于document.getElement ... -
第三章
2011-01-27 19:14 894这部分将实际开发一个应用,套用了一个老外的示例模板,做了一个在 ... -
第二章
2011-01-27 19:13 7591、调用没有返回值和参数的JAVA方法 1.1、dwr.xm ... -
第一章
2011-01-27 19:12 825关键字: ajax 框架dwr hello ...
相关推荐
**AJAX实例入门** 在网页开发中,AJAX(Asynchronous JavaScript and XML)技术是一种用于创建动态、交互性更强的Web应用的重要手段。它允许页面在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容...
### AJAX实例入门 #### 基于Servlet的AJAX示例 文章中提到的第一个AJAX实例是基于Servlet的Web应用,具体场景是在用户选择省份后动态加载对应城市列表。实现这一功能的关键步骤包括: 1. **配置Servlet**:在`web...
综上所述,AJAX实例入门、实战中文版及基础教程将涵盖这些基本概念和实践技巧,帮助初学者掌握如何利用AJAX提升Web应用的用户体验。通过学习这些教程,你可以深入了解AJAX的工作原理,学会编写AJAX请求,以及如何...
AJAX 实例入门 示例中的项目介绍了一个简单的 AJAX 应用案例,该案例使用 Servlet 作为后端服务。 #### 示例说明: - **选择省份后自动加载城市**:当用户在一个下拉列表中选择某个省份时,另一个下拉列表会动态...
这个简单的AJAX实例展示了如何利用JavaScript和Servlet实现动态交互。AJAX技术的运用不仅限于此,它还可以用于实时聊天、动态加载内容、表单验证等多种场景,大大增强了Web应用程序的交互性和性能。 在实际开发中,...
现在,我们看一个基于Servlet的Ajax实例。这个例子中,当用户在第一个下拉框选择省份时,第二个下拉框会动态填充相应省份的城市。 **Servlet配置**:在`web.xml`文件中,配置了一个名为`SelectCityServlet`的...
**AJAX(Asynchronous JavaScript and XML)实例入门** AJAX是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术结合了JavaScript、XML、DOM(Document Object Model)、CSS(Cascading Style...
**Ajax技术详解** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种方式可以让网页保持交互...
**Ajax 入门实例详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建XMLHttpRequest对象,通过这个对象与服务器...
**Ajax(Asynchronous JavaScript and ...总之,`ajax经典入门实例源码`提供了一个实践平台,通过实际操作加深对Ajax的理解。结合`readme.txt`的指导,你应该能逐步掌握Ajax的基本使用,为后续的Web开发打下坚实基础。
如果是一个初学者希望入门学习Ajax,可以参考脚本之家(一个专注于脚本开发的资源网站)提供的Ajax栏目,查看之前的相关入门文章。接下来,我们将基于给定的代码片段,介绍Ajax技术的基本知识点。 首先,代码中使用...
AJAX+servlet实例入门 AJAX+servlet实例入门是指通过结合AJAX技术和Servlet实现的Web应用程序。AJAX(Asynchronous JavaScript and XML)是一种技术,它可以使Web应用程序具备异步交互的能力,从而提高用户体验。...
**Ajax入门实例——用户注册详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大...
一个简单的Ajax实例,用于从服务器获取文本数据: ```javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document....
#### 一、基于Servlet的AJAX实例 在本部分中,我们将探讨一个基于Servlet实现的简单AJAX应用示例。这个示例主要关注于如何通过AJAX技术实现实时的数据获取与展示。具体来说,用户在前端页面选择省份后,通过AJAX...