这些时间,瞎子也看得见,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");
file://alert(city.length);
var str=new Array();
for(var i=0;i<city.length;i++){
str[i]=city[i].firstChild.data;
}
file://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对象里。
到现在为止,第一个例子的代码已经全部结束。是不是比较简单?
分享到:
相关推荐
AJAX+servlet实例入门,搞定AJAX简单易学
AJAX+servlet入门实例用户注册
代码中用到了较多的jQuery和部分Ajax(借助jQuery实现),在阅读代码的时候如果不熟悉jQuery和Ajax的话,还是先去稍微学习几个入门实例较好。 二、运行方式: a. 创建数据库:我用的是MySQL 5.1版本,不同版本之间...
本书主要内容包括JSP基础实例、JSP数据库实例、JavaBean技术、Servlet技术、Ajax基本技术、Ajax高级技术、Ajax数据库操作、Ajax时尚技术、Ajax常用框架和实现OA系统。本书实例来源于作者多年工作实践,基本囊括了...
AJAX是每一个JAVA软件开发者经常用到的技术之一,该文件详细列举了三种分别基于Servlet,Jsp,Struts的AJAX实例,相信这一定是初学者最好的入门材料。
Ajax技术详细解说,实例解说,基于Servlet的AJAX\基于JSP的AJAX\基于Struts的AJAX
本书主要内容包括JSP基础实例、JSP数据库实例、JavaBean技术、Servlet技术、Ajax基本技术、Ajax高级技术、Ajax数据库操作、Ajax时尚技术、Ajax常用框架和实现OA系统。本书实例来源于作者多年工作实践,基本囊括了...
AJAX是每一个JAVA软件开发者经常用到的技术,为了使每个初学者可以更快的掌握AJAX,该文件分别基于Servlet,JSP,STRUTS编写了实例,希望对喜欢软件开发的朋友们有帮助。
基于JSON2.O和Servlet的Ajax实例,快速入门的好例子
# AJAX实例 使用AJAX的 登录表单验证 简单案例 以登录界面为例,首先编写登录页面 login.jsp 如果登录成功,则界面显示登录成功后的页面 如果登录失败,则界面显示登录失败后的页面 在登录时,浏览器窗口不刷新,...
《Java Web从入门到精通》开始主要介绍Servlet、JSP、JavaBean、EL、JSTL、JDBC等Web开发基础知识,然后学习Struts、Hibernate、Spring、Ajax、JSF等开源框架,并最终学习如何整合这些开源框架进行J2EE开发,如何...
而且,整个设计过程贯穿了MVC设计思路,是系统学习Java Web项目的入门案例之一。 《Java-Web应用开发基础》教学课件08课程设计实例全文共73页,当前为第6页。 8.3设 计 思 路 用户登录模块设计可划分为前台登录界面...
一个Java+ajax写的登录实例,附有JAVA源文件,JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...
向浏览器发送InputSream对象,通常用来处理文件下载,还可用于返回AJAX数据。 16 org.apache.struts2.dispatcher.StreamResult 16 velocity 16 处理Velocity模板 16 org.apache.struts2.dispatcher.VelocityResult ...
一个Java+ajax写的登录实例,附有JAVA源文件,JAVA新手朋友可以学习一下。 JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份,还可以选择年份及月份和日期 Java编写的HTML浏览器 一个...
第3篇为提高篇,介绍当前流行的SSH开发框架,并带领读者对SSH框架进行整合,最后介绍了Ajax和jQuery;第4篇为实践篇,通过3个具体实例了解Java Web开发流程;第5篇为扩展篇,主要是对移动Web开发领域的扩展。
《Java Web开发从初学到精通》开始主要介绍Servlet、JSP、JavaBean、EL、JSTL、JDBC等Web开发基础知识,然后学习Struts、Hibernate、Spring、Ajax、JSF等开源框架,并最终学习如何整合这些开源框架进行J2EE开发,...
共24章,其中,第1篇为技能学习篇,主要包括Java Web开发环境、JSP语法、JSP内置对象、Java Bean技术、Servlet技术、EL与JSTL标签库、数据库应用开发、初识Struts2基础、揭密Struts2高级技术、Hib锄劬e技术入门、...