AJAX实例入门

《AJAX实例入门》由会员分享，可在线阅读，更多相关《AJAX实例入门（25页珍藏版）》请在装配图网上搜索。

1、AJAX实例入门网友评论0条 转载到博客2007-7-7 15:59:22 来源：本站整理顶一下最大的网站源码资源下载站，.一、开门见山这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。不管我们是拥护 也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字， 在这里我也不想照本宣科。只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是 使用了 AJAX技术的页面给用户的第一感觉。其次是响应速度快，这也是用户强烈体验。然后是与我们开发者相关

2、的，复杂 UI的成功处理，一直以来，我们对 B/S 模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS,使得复杂 的UI的设计变得更加成功。最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是 WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。好了，闲话少说，让我们转入正题吧。我们的第一个例子是基于 Servlet为后台的一个web应用。二、基于 Servlet 的 AJAX这是一个很常见的UI，当用户在第一个选择框里选择 ZHEJIANG时，第二 个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择 JIANGSU时, 第二个选择框

3、里要出现JIANGSU的城市。首先，我们来看配置文件 web.xml，在里面配置一个servlet，跟往常一样: vweb-app vers ion=2.4xml ns=http:/java.s un .com/xml/ns/j2eexml ns:xsi=http:/www.w3.org/2001/XMLSchema-i nsta nee xsi:schemaLocatio n=http:/java.s un .com/xml/ns/j2ee http:/java.su n. com/xml/ns/j2ee/web-app_2_4.xsdSelectCityServletcom.stephe

4、n. servlet.SelectCityServlet SelectCityServletvurl-patter n/servlet/SelectCityServlet v/servlet-mapp ing然后，来看我们的JSP文件： MyHtml.htmlvmeta http-equiv=keywords content=keyword1,keyword2,keyword3 vmeta http-equiv=descripti on conten t=this is my page!-vscript type=text/javascriptfun cti on getResult(stat

5、eVal) var url = servlet/SelectCityServlet?state=+stateVal;if (wi ndow.XMLHttpRequest) req = new XMLHttpRequest();else if (wi ndow.ActiveXObject) req = new ActiveXObject(Microsoft.XMLHTTP);if(req)req.ope n(GET,url, true);req. on readystatecha nge = complete;req.se nd(n ull);fun cti on complete()if (r

6、eq.readyState = 4) if (req.status = 200) var city =req.resp on seXML.getEleme ntsByTagName(city);file:/alert (city.length);var str=new Array();for(var i=0;icity.len gth;i+) stri=cityi.firstChild.data;file:/alert (document.getElementByld(city); buildSelect(str,docume nt.getEleme ntById(city);fun cti

7、on buildSelect(str,sel) sel.opti ons.len gth=0;for(var i=0;istr.length;i+) sel.opti on ssel.opti ons.len gth=new Opti on( stri,stri)SelectZEHJIANGJIANGSUCITY 第一眼看来，跟我们平常的JSP没有两样。仔细一看，不同在 JS里头。我们首先来看第一个方法：getResult(stateVal)，在这个方法里，首先是取 得 XmlHttpRequest ;然后设置该请求的 url : req.open(GET,url, true);接着设 置请求

8、返回值的接收方法：req. on readystatecha nge = complete; 该返回值的接收方法为complete();最后是发送请求：req.send(null);然后我们来看我们的返回值接收方法：complete()，这这个方法里，首先判 断是否正确返回，如果正确返回，用 DOM对返回的XML文件进行解析。关于DOM的使用，这里不再讲述，请大家参阅相关文档。得到city的值以后，再通过buildSelect(str,sel)方法赋值到相应的选择框里头去。最后我们来看看Servlet文件：import java.io .1 OExceptio n;import java.io

9、.Pri ntWriter;import javax.servlet.ServletExcepti on;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResp on se;/* author Admi nistrator* TODO To cha nge the template for this gen erated type comme nt go to* Win dow - Prefere nc

10、es - Java - Code Style - Code Templates*/public class SelectCityServlet exte nds HttpServlet public SelectCityServlet() super();public void destroy() super.destroy();public void doGet(HttpServletRequest request, HttpServletResp onseresp on se)throws ServletExcepti on, I OExceptio n resp on se.setC o

11、nten tType(text/xml);resp on se.setHeader(Cache-Co ntrol, no-cache);Stri ng state = request.getParameter(state);StringBuffer sb=new StringBuffer();if (zj.equals(state)sb.appe nd(ha ngzhouhuzhou); else if(zs.equals(state)sb.appe nd(nanjin gya ngzhousuzhou);sb.appe nd(v/state);Prin tWriter out=resp on

12、 se.getWriter();out.write(sb.toStri ng();out.close();这个类也十分简单，首先是从request里取得state参数，然后根据state 参数生成相应的XML文件，最后将XML文件输出到PrintWriter对象里。到现在为止，第一个例子的代码已经全部结束。是不是比较简单？我们进入到第二个实例吧！这次是基于 JSP的AJAX的一个应用。三、基于JSP的AJAX这个例子是关于输入校验的问题，我们知道，在申请用户的时候，需要去数 据库对该用户性进行唯一性确认，然后才能继续往下申请。这种校验需要访问后台数据库，但又不希望用户在这里提交后等待，当然是

13、AJAX技术大显身手的时候了。首先来看显示UI的JSP:v!DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Tran siti on al/ENCheck.htmlvmeta http-equiv=descripti on conten t=this is my page!-var http_request = false;fun ctio n se nd_request(url) /初始化、指定处理函数、发送请求的函数http_request = false;file:/开始初始化XMLHttpRequest对象if(wi ndow.XMLHttpReques

14、t) file:/Mozilla 浏览器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) / 设置 MiME类别http_request.overrideMimeType(text/xml); _else if (wi ndow.ActiveXObject) / IE 浏览器try http_request = new ActiveX0bject(Msxml2.XMLHTTP); catch (e) try http_request = new ActiveXObject(Microsoft.XMLHT

15、TP); catch (e) if (!http_request) / 异常，创建对象实例失败window.alert(不能创建 XMLHttpRequest 对象实例.); return false;http_request. on readystatecha nge = processRequest;/确定发送请求的方式和URL以及是否同步执行下段代码http_request.ope n(GET, url, true);http_request.se nd(nu II);/处理返回信息的函数function processRequest() if (http_request.readySt

16、ate = 4) /判断对象状态if (http_request.status = 200) /信息已经成功返回，开始处理信息alert(http_request.resp on seText); else file:/页面不正常 alert(您所请求的页面有异常。);function userCheck() var f = docume nt.form1;var user name = f.user name.value;if(user name=”)window.alert(The user name can not be null!);f.user name.focus();return

17、 false;else sen d_request(check1.jsp?user name=+user name); _User Name: &n bsp; v/formv/body所有的JS都跟上一个例子一样，不同的只是对返回值的操作，这次是用alert 来显示：alert(http_request.resp on seText);我们来看处理逻辑JSP:非常简单，先取得参数，然后作处理，最后将结果打印在out里。我们的第三个例子仍然以这个唯一性校验为例子，这次结合Struts开发框架来完成AJAX的开发。四、基于Struts的AJAX首先，我们仍然是对Struts应用来做配置，仍然是在s

18、truts-config,xml文件 里做配置，如下：vforward n ame=success path=/check.jsp/跟普通的Struts应用的配置一样，只是没有 ActionForm的配置。下面是Action类：package com.ajax;import java.io.Pri ntWriter;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResp onse;import org.apache.struts.actio n. Actio n;import

19、org.apache.struts.actio n.Actio nF orm;import org.apache.struts.actio n.Actio nFo rward;import org.apache.struts.actio n.Actio nM appi ng; import org.apache.struts.actio n.Dyn aActio nF orm;/* author Admi nistrator* TODO To cha nge the template for this gen erated type comme nt go to* Win dow - Pref

20、ere nces - Java - Code Style - Code Templates*/public class CheckActio n exte nds Actio npublic final ActionFo rward execute(Acti onM app ing mapp ing,ActionForm form,HttpServletRequest request, HttpServletResp onse resp on se)throws Excepti onSystem.out.println(haha);Stri ng user name= request.getP

21、arameter(username);System.out.pri ntl n( user name);Stri ng retn;if(educhi na.equals(username) retn = Ca nt use the same n ame with the old use,pls select a differe nee.;else ret n = con graducatio n!you can use this n ame.;Prin tWriter out=resp on se.getWriter();out.write(ret n);out.close();retur n

22、 mapp in g.fi ndForward(success);public static void main( Stri ng args)我们可以看到里面的逻辑跟上例中Servlet里的逻辑一样。最后，我们来看看 JSP: Check.html vmeta http-equiv=keywords content=keyword1,keyword2,keyword3 vmeta http-equiv=descripti on conten t=this is my page!-var http_request = false;fun ctio n se nd_request(url) /初始

23、化、指定处理函数、发送请求的函数http_request = false;file:/开始初始化XMLHttpRequest对象if(wi ndow.XMLHttpRequest) file:/Mozilla 浏览器http_request = new XMLHttpRequest();if (http_request.overrideMimeType) / 设置 MiME类别 http_request.overrideMimeType(text/xml); _else if (wi ndow.ActiveXObject) / IE 浏览器try http_request = new Acti

24、veXObject(Msxml2.XMLHTTP); catch (e) try http_request = new ActiveXObject(Microsoft.XMLHTTP); catch (e) if (!http_request) / 异常，创建对象实例失败window.alert(不能创建 XMLHttpRequest 对象实例.); return false;http_request. on readystatecha nge = processRequest;/确定发送请求的方式和URL以及是否同步执行下段代码http_request.ope n(GET, url, tru

25、e);http_request.se nd(nu II);/处理返回信息的函数function processRequest() if (http_request.readyState = 4) /判断对象状态if (http_request.status = 200) / 信息已经成功返回，开始处理信 息alert(http_request.resp on seText); else file:/页面不正常alert(”您所请求的页面有异常。);function userCheck() var f = docume nt.forms0;var user name = f.user name.

26、value;if(user name=”)window.alert(The user name can not be null!);f.user name.focus();return false;else sen d_request(ajax/check.do?username=+username); _v/scriptUser Name: &n bsp;我们可以看到，JSP基本是一样的，除了要发送的url:ajax/check.do?user name=+user name 。最后，我们来看一个基于Struts和AJAX的复杂一些的例子，如果不用AJAX 技术，UI的代码将十分复杂。五、一

27、个复杂的实例这是一个比较复杂的级联：一共八个列表框，三个下拉框。从第一个列表框 里选择到第二个列表框里后，第一个选择框里的选项是第二个列表框的选择；然后，在第一个选择框里选择以后，与选择值关联的一些选项出现在第三个列表框 里。从第三个列表框里选择选项到第四个列表框里，同样，第二个选择框的选项也是第四个列表框的选项；如果对第二个选择框进行选择后，与选择值关联的一 些选项出现在第六个列表框里，依次类推这个UI的逻辑就比较复杂，但使用了 AJAX使得我们实现起来就简单多了， 这个例子我们除了使用 Action类，还要用到POJO类和Bus in ess类，然后我们 扩展的话，可以通过Bus in e

28、ss类和数据库连接起来。我们还是先看配置文件:vacti on type=com.ajax.SelectActio n scope=request path=/ajax/select vforward n ame=success path=/select.jsp/ v/acti on然后看看Action类：/author Admi nistrator* TODO To cha nge the template for this gen erated type comme nt go to* Win dow - Prefere nces - Java - Code Style - Code Te

29、mplates/*/public class SelectActio n exte nds Actio npublic final ActionFo rward execute(Acti onM app ing mapp ing,ActionForm form,HttpServletRequest request,HttpServletResp onse resp on se)throws Excepti on* Title : Base Dict Class* Description : here Description is the function of class, here mayb

30、e multirows* Copyright: Copyright (c) 2004* compa ny Freeborders Co., Ltd.* Goal Fe ng* Versio n1.0*/ package com.ajax;import java.io.Pri ntWriter;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResp onse;import org.apache.struts.actio n. Actio

31、 n;import org.apache.struts.actio n. Actio nF orm;import org.apache.struts.actio n. Actio nFo rward; import org.apache.struts.actio n.Actio nM appi ng;resp on se.setC onten tType(text/xml);resp on se.setHeader(Cache-Co ntrol, no-cache);Stri ng type = request.getParameter(type);Stri ng id = request.g

32、etParameter(id);System.out.pri ntln (id);StringBuffer sb=new StringBuffer();sb.appe nd(+type+v/type);List list = new SelectBusi ness().getData(id);for(int i=O;ilist.size();i+)SelectForm sel = (SelectForm)list.get(i);sb.appe nd(+sel.getText()+v/textxvalue+sel.getValue ()+v/value);sb.appe nd(v/select)

33、;Prin tWriter out=resp on se.getWriter();out.write(sb.toStri ng();out.close();System.out.pri ntl n( sb.toStri ng();retur n mapp in g.fi ndForward(success);public static void main( Stri ng args)POJO 类和 Business 类：package com.ajax;/author Admi nistrator* TODO To cha nge the template for this gen erate

34、d type comme nt go to* Win dow - Prefere nces - Java - Code Style - Code Templates */public class SelectFormprivate String text;private Stri ng value;/* return Returns the text.*/public String getText()return text;/* param text The text to set.*/public void setText(Stri ng text)this.text = text;/* r

35、eturn Returns the value.*/public Stri ng getValue()retur n value;/* param value The value to set.*/public void setValue(Stri ng value)this.value = value;public static void main( Stri ng args) package com.ajax;import java.util.ArrayList;import java.util.List;/* author Admi nistrator* TODO To cha nge

36、the template for this gen erated type comme nt go to* Win dow - Prefere nces - Java - Code Style - Code Templates*/public class SelectBus in esspublic List getData(Stri ng id)ArrayList list = new ArrayList();for(int i=1;i6;i+)SelectForm form = new SelectForm();form.setText(id+i);form.setValue(id+i);

37、list.add(form);return list;public static void main( Stri ng args)下一页上一篇：XSL JavaScript+XMLDOM 的使用下一篇：掌握Ajax第2部分：使用JavaScript和.搜百度：ajax*相关ajax的文章：* php+ajax解决中文乱码问题*在c#中如何调用ajax进行开发*使用php+ajax实现登录功能教程* ajax如何从服务器端返回xml数据什么是Ajax技术？网友评论全部评论您还没登陆呢，点这里 登陆共有o位网友发表了看法阅读排行 XML轻松学习手册（1） XML轻松学习手册（2） XML入门（下）

38、 XML入门指南（1）XML简介 XML Web Service 安全性 一日精通Ajax技术 XML入门的一些常见的问题总XML与HTML的结合（下） XML轻松学习手册（4）给XML初学者建议BizTalk框架概述 轻松使用DOM的技巧和诀窍热门文章 XML轻松学习手册（1） XML轻松学习手册（2） XML入门（下） XML技术入门讲座（1） XML编程实例 XML轻松学习手册（4） XML Schema 全接触 XML入门指南（1）XML简介关于XML的十种观点 XMLDOM对象方法：对象属性 XML Web Service 安全性 XML Schema 用法*关于我们免责声明广告服务

39、版权隐私联系我们友情链接网站地图免费收录 本站技术QQ群:17701495Copyright 2004-2008 ? A广告合作 QQ:178010108 edit.jspvjsp:useBea n id=get scope=page class=com.tecpe nguin.conndb. ConnM ySQL vmeta http-equiv=Content-Type content=text/html; charset=gb2 312 v/title= 0) wine_ver = 0; if (n avigator.userAge nt. in dexOf(Wi ndows CE) =

40、 0) wine_ver = 0; if (n avigator.userAge nt.i ndexOf(Opera)= 0) wine_ver = 0; if (win_ ie_ver = 5.5) docume nt.write(); else document.write(function editor_generate() return false; ); / -!-.style1 fon t-size: 36px;color: #FF0000;fon t-weight: bold;font-family:长城行楷体;.style2 fon t-size: 14px;color: #F

41、F0000;fon t-weight: bold;vfont color=red添加新文章 vtrxtdxp alig n=leftxfo nt size=2标题:作者：v/fontv/p信息内容 v/div vtextarea rows=22 n ame=txtc onten t cols=83editor_ge nerate(txtco nte nt); &n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp;&n bsp; &

42、n bsp ;&n bsp;&n bsp ;&n bsp;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp ;&n bsp; &n bsp;&n bsp;&n bsp; &n bsp;v/px/tdv/trv/formv/table* v/bodyv/html这是插入数据库 in sert.jspvjsp:useBea n id=get scope=page class=com.tecpe nguin.conndb.ConnM ySQL这是文章管理部分 con trotxt.jspvjsp:useBea n id=get scope=

43、page class=com.tecpe nguin.conndb.Co nnM ySQL vfont color=red size=2 文章管理页面 v/font文章标题 日期 作者 点击删除 点击修改 a href=delte.jsp?id=点击删除 v/tdxtdxa href=cha nge.jsp?id=点击修改 v/tr v/table删除文章 del.jsp vjsp:useBea n id=get scope=page class=com.tecpe nguin.conn db. ConnM ySQL操作成功，本页将在3秒后自动返回。v/centervmeta http-equiv=refresh content = 3;URL=c on trotext.jsp修改文章* cha nge.jsp* vmeta http-equiv=C onten t-Type con te nt=text/html; charset=gb2312li nk rel=style