AJAX实例入门.docx
《AJAX实例入门.docx》由会员分享,可在线阅读,更多相关《AJAX实例入门.docx(22页珍藏版)》请在冰豆网上搜索。
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)
{
}
}
我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。
最后,我