AJAX实例入门.docx
《AJAX实例入门.docx》由会员分享，可在线阅读，更多相关《AJAX实例入门.docx（28页珍藏版）》请在冰点文库上搜索。
AJAX实例入门
阿里西西通告：
韩国酷站 网页特效集 配色方案 电子书 网站免费登录 常用广告代码 ASP源码下载 导航条代码 南国早报采访本站 电视台采访本站 央视转播采访
ASP教程|PHP教程|JHP教程|.NET教程|CGI教程|XML教程|AJAX教程|HTML|网站重构|CSS教程|JS教程|网页设计|数据库|服务器|开发工具|网站运营
ASP源码下载|ASP.NET源码下载|PHP源码下载|JSP源码下载|CGI源码下载|FLASH源码下载|AJAX源码下载|办公OA源码|网店商城|公司网站源码|整站源码
代码编程|界面设计|加解密|开发辅助|浏览阅读|装机必备|IIS软件|FTP软件|安全软件|远程监控|邮件系统|虚拟主机|web服务|组件|设计软件|数据库
网站运营|ASP电子书|PHP电子书|.NET电子书|JSP电子书|CGI|数据库XML|服务器|HTML|设计教程|AJAX|JAVA/J2EE|C语言|VB|DELPHI|安全|其它
∙
AJAX实例入门
∙
一、开门见山
这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。
不管我们是拥护也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。
关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字，在这里我也不想照本宣科。
只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：
首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。
这是使用了AJAX技术的页面给用户的第一感觉。
其次是响应速度快，这也是用户强烈体验。
然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S模式的UI不如C/S模式UI丰富而苦恼。
现在由于AJAX大量使用JS，使得复杂的UI的设计变得更加成功。
最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEBSERVICE潮流一样。
易于和WEBSERVICE结合起来。
好了，闲话少说，让我们转入正题吧。
我们的第一个例子是基于Servlet为后台的一个web应用。
二、基于Servlet的AJAX
这是一个很常见的UI，当用户在第一个选择框里选择ZHEJIANG时，第二个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时，第二个选择框里要出现JIANGSU的城市。
首先，我们来看配置文件web.xml，在里面配置一个servlet，跟往常一样：
xmlns="
xmlns:
xsi="http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation="
SelectCityServlet
com.stephen.servlet.SelectCityServlet
SelectCityServlet
/servlet/SelectCityServlet
然后，来看我们的JSP文件：
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
MyHtml.html
---->
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 str[i]=city[i].firstChild.data;
}
file:
//alert（document.getElementById（"city"））;
buildSelect（str,document.getElementById（"city"））;
}
}
}
functionbuildSelect（str,sel）{
sel.options.length=0;
for（vari=0;i sel.options[sel.options.length]=newOption（str[i],str[i]）
}
}
Select>
ZEHJIANG>
JIANGSU>
CITY
第一眼看来，跟我们平常的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文件：
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（"state"）;
StringBuffersb=newStringBuffer（""）;
if（"zj".equals（state））{
sb.append（"hangzhouhuzhou"）;
}elseif（"zs".equals（state））{
sb.append（"nanjingyangzhousuzhou"）;
}
sb.append（""）;
PrintWriterout=response.getWriter（）;
out.write（sb.toString（））;
out.close（）;
}
}
这个类也十分简单，首先是从request里取得state参数，然后根据state参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。
到现在为止，第一个例子的代码已经全部结束。
是不是比较简单？
我们进入到第二个实例吧！
这次是基于JSP的AJAX的一个应用。
三、基于JSP的AJAX
这个例子是关于输入校验的问题，我们知道，在申请用户的时候，需要去数据库对该用户性进行唯一性确认，然后才能继续往下申请。
这种校验需要访问后台数据库，但又不希望用户在这里提交后等待，当然是AJAX技术大显身手的时候了。
首先来看显示UI的JSP:
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
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）{
try{
http_request=newActiveXObject（"Microsoft.XMLHTTP"）;
}catch（e）{}
}
}
if（!
http_request）{//异常，创建对象实例失败
window.alert（"不能创建XMLHttpRequest对象实例."）;
returnfalse;
}
http_request.onreadystatechange=processRequest;
//确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open（"GET",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==""）{
window.alert（"Theusernamecannotbenull!
"）;
f.username.focus（）;
returnfalse;
}
else{
send_request（'check1.jsp?
username='+username）;
}
}
UserName:
所有的JS都跟上一个例子一样，不同的只是对返回值的操作，这次是用alert来显示：
alert（http_request.responseText）;
我们来看处理逻辑JSP:
<%@pagecontentType="text/html;charset=gb2312"language="java"errorPage=""%>
<%
Stringusername=request.getParameter（"username"）;
if（"educhina".equals（username））out.print（"用户名已经被注册，请更换一个用户名。
"）;
elseout.print（"用户名尚未被使用，您可以继续。
"）;
%>
非常简单，先取得参数，然后作处理，最后将结果打印在out里。
我们的第三个例子仍然以这个唯一性校验为例子，这次结合Struts开发框架来完成AJAX的开发。
四、基于Struts的AJAX
首先，我们仍然是对Struts应用来做配置，仍然是在struts-config,xml文件里做配置，如下：
scope="request"path="/ajax/check">
跟普通的Struts应用的配置一样，只是没有ActionForm的配置。
下面是Action类：
packagecom.ajax;
importjava.io.PrintWriter;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
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;
/**
*@authorAdministrator
*
*TODOTochangethetemplateforthisgeneratedtypecommentgoto
*Window-Preferences-Java-CodeStyle-CodeTemplates
*/
publicclassCheckActionextendsAction
{
publicfinalActionForwardexecute（ActionMappingmapping,ActionFormform,
HttpServletRequestrequest,
HttpServletResponseresponse）
throwsException
{
System.out.println（"haha..............................."）;
Stringusername=request.getParameter（"username"）;
System.out.println（username）;
Stringretn;
if（"educhina".equals（username））retn="Can'tusethesamenamewiththeolduse,plsselectadifference...";
elseretn="congraducation!
youcanusethisname....";
PrintWriterout=response.getWriter（）;
out.write（retn）;
out.close（）;
returnmapping.findForward（"success"）;
}
publicstaticvoidmain（String[]args）
{
}
}
我们可以看到里面的逻辑跟上例中Servle
升级会员 