AJAX实例入门.docx
- 文档编号:7423355
- 上传时间:2023-01-23
- 格式:DOCX
- 页数:22
- 大小:25.22KB
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=" 然后,来看我们的JSP文件: DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
--
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]) } } 第一眼看来,跟我们平常的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(" }elseif("zs".equals(state)){ sb.append(" } 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">
--
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里的逻辑一样。 最后,我
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AJAX 实例 入门