AJAX实例入门Word文件下载.docx
《AJAX实例入门Word文件下载.docx》由会员分享，可在线阅读，更多相关《AJAX实例入门Word文件下载.docx（22页珍藏版）》请在冰豆网上搜索。
这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；
当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：
<
web-appversion="
2.4"
xmlns="
xmlns:
xsi="
http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation="
servlet>
servlet-name>
SelectCityServlet<
/servlet-name>
servlet-class>
com.stephen.servlet.SelectCityServlet<
/servlet-class>
/servlet>
servlet-mapping>
url-pattern>
/servlet/SelectCityServlet<
/url-pattern>
/servlet-mapping>
/web-app>
然后，来看我们的JSP文件：
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
>
html>
head>
title>
MyHtml.html<
/title>
metahttp-equiv="
keywords"
content="
keyword1,keyword2,keyword3"
description"
thisismypage"
--<
linkrel="
stylesheet"
type="
text/css"
href="
./styles.css"
-->
/head>
scripttype="
text/javascript"
functiongetResult（stateVal）{
varurl="
servlet/SelectCityServlet?
state="
+stateVal;
if（window.XMLHttpRequest）{
req=newXMLHttpRequest（）;
}elseif（window.ActiveXObject）{
req=newActiveXObject（"
Microsoft.XMLHTTP"
）;
}
if（req）{
req.open（"
GET"
url,true）;
req.onreadystatechange=complete;
req.send（null）;
}
functioncomplete（）{
if（req.readyState==4）{
if（req.status==200）{
varcity=req.responseXML.getElementsByTagName（"
city"
file:
//alert（city.length）;
varstr=newArray（）;
for（vari=0;
i<
city.length;
i++）{
str[i]=city[i].firstChild.data;
}
//alert（document.getElementById（"
））;
buildSelect（str,document.getElementById（"
}
functionbuildSelect（str,sel）{
sel.options.length=0;
str.length;
i++）{
sel.options[sel.options.length]=newOption（str[i],str[i]）
/script>
body>
selectname="
state"
onChange="
getResult（this.value）"
<
optionvalue="
"
Select<
/option>
zj"
ZEHJIANG<
zs"
JIANGSU<
/select>
selectid="
CITY<
/body>
/html>
第一眼看来，跟我们平常的JSP没有两样。
仔细一看，不同在JS里头。
我们首先来看第一个方法：
getResult（stateVal），在这个方法里，首先是取得XmlHttpRequest；
然后设置该请求的url：
req.open（"
接着设置请求返回值的接收方法：
req.onreadystatechange=complete;
该返回值的接收方法为——complete（）;
最后是发送请求：
req.send（null）;
然后我们来看我们的返回值接收方法：
complete（），这这个方法里，首先判断是否正确返回，如果正确返回，用DOM对返回的XML文件进行解析。
关于DOM的使用，这里不再讲述，请大家参阅相关文档。
得到city的值以后，再通过buildSelect（str,sel）方法赋值到相应的选择框里头去。
最后我们来看看Servlet文件：
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
/**
*@authorAdministrator
*
*TODOTochangethetemplateforthisgeneratedtypecommentgoto
*Window-Preferences-Java-CodeStyle-CodeTemplates
*/
publicclassSelectCityServletextendsHttpServlet{
publicSelectCityServlet（）{
super（）;
publicvoiddestroy（）{
super.destroy（）;
publicvoiddoGet（HttpServletRequestrequest,HttpServletResponseresponse）
throwsServletException,IOException{
response.setContentType（"
text/xml"
response.setHeader（"
Cache-Control"
"
no-cache"
Stringstate=request.getParameter（"
StringBuffersb=newStringBuffer（"
state>
if（"
.equals（state））{
sb.append（"
city>
hangzhou<
/city>
huzhou<
}elseif（"
nanjing<
yangzhou<
suzhou<
/state>
PrintWriterout=response.getWriter（）;
out.write（sb.toString（））;
out.close（）;
这个类也十分简单，首先是从request里取得state参数，然后根据state参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。
到现在为止，第一个例子的代码已经全部结束。
是不是比较简单？
我们进入到第二个实例吧！
这次是基于JSP的AJAX的一个应用。
三、基于JSP的AJAX
这个例子是关于输入校验的问题，我们知道，在申请用户的时候，需要去数据库对该用户性进行唯一性确认，然后才能继续往下申请。
这种校验需要访问后台数据库，但又不希望用户在这里提交后等待，当然是AJAX技术大显身手的时候了。
首先来看显示UI的JSP:
Check.html<
varhttp_request=false;
functionsend_request（url）{//初始化、指定处理函数、发送请求的函数
http_request=false;
file:
//开始初始化XMLHttpRequest对象
if（window.XMLHttpRequest）{file:
//Mozilla浏览器
http_request=newXMLHttpRequest（）;
if（http_request.overrideMimeType）{//设置MiME类别
http_request.overrideMimeType（'
text/xml'
}
elseif（window.ActiveXObject）{//IE浏览器
try{
http_request=newActiveXObject（"
Msxml2.XMLHTTP"
}catch（e）{
}catch（e）{}
if（!
http_request）{//异常，创建对象实例失败
window.alert（"
不能创建XMLHttpRequest对象实例."
returnfalse;
http_request.onreadystatechange=processRequest;
//确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open（"
url,true）;
http_request.send（null）;
//处理返回信息的函数
functionprocessRequest（）{
if（http_request.readyState==4）{//判断对象状态
if（http_request.status==200）{//信息已经成功返回，开始处理信息
alert（http_request.responseText）;
}else{file:
//页面不正常
alert（"
您所请求的页面有异常。
functionuserCheck（）{
varf=document.form1;
varusername=f.username.value;
if（username=="
）{
Theusernamecannotbenull!
f.username.focus（）;
else{
send_request（'
check1.jsp?
username='
+username）;
<
formname="
form1"
action="
method="
post"
UserName:
inputtype="
text"
name="
username"
value="
&
nbsp;
button"
check"
onClick="
userCheck（）"
submit"
/form>
所有的JS都跟上一个例子一样，不同的只是对返回值的操作，这次是用alert来显示：
alert（http_request.responseText）;
我们来看处理逻辑JSP:
%@pagecontentType="
text/html;
charset=gb2312"
language="
java"
errorPage="
%>
%
Stringusername=request.getParameter（"
if（"
educhina"
.equals（username））out.print（"
用户名已经被注册，请更换一个用户名。
elseout.print（"
用户名尚未被使用，您可以继续。
%>
非常简单，先取得参数，然后作处理，最后将结果打印在out里。
我们的第三个例子仍然以这个唯一性校验为例子，这次结合Struts开发框架来完成AJAX的开发。
四、基于Struts的AJAX
首先，我们仍然是对Struts应用来做配置，仍然是在struts-config,xml文件里做配置，如下：
actiontype="
com.ajax.CheckAction"
scope="
request"
path="
/ajax/check"
forwardname="
success"
/check.jsp"
/>
/action>
跟普通的Struts应用的配置一样，只是没有ActionForm的配置。
下面是Action类：
packagecom.ajax;
importorg.apache.struts.action.Action;
importorg.apache.struts.action.ActionForm;
importorg.apache.struts.action.ActionForward;
importorg.apache.struts.action.ActionMapping;
importorg.apache.struts.action.DynaActionForm;
publicclassCheckActionextendsAction
{
publicfinalActionForwardexecute（ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,
HttpServletResponseresponse）
throwsException
{
System.out.println（"
haha..............................."
Stringusername=request.getParameter（"
System.out.println（username）;
Stringretn;
if（"
.equals（username））retn="
Can'
tusethesamenamewiththeolduse,plsselectadifference..."
;
elseretn="
congraducation!
youcanusethisname...."
out.write（retn）;
returnmapping.findForward（"
publicstaticvoidmain（String[]args）
我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。
最后，我
升级会员 