AJAX实例入门-文档-文档资料.docx

《AJAX实例入门-文档-文档资料.docx》由会员分享，可在线阅读，更多相关《AJAX实例入门-文档-文档资料.docx（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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时; 第二个选择框里要出现JIA

3、NGSU的城市。 else file:页面不正常alert(您所请求的页面有异常。);)function userCheck() var f = document.forms0;var username = f.username.value;if(username=) window.alert(The user name can not be null!);f.username.focus();return false;)else send_request(ajax/check.do?username=+username);)User Name: 我们可以看到，JSP基本是一样的，除

4、了要发送的url： ajax/check.do?username=,+usernameo最后，我们来看一个基于Struts和AJAX的复杂一些的例子，如果不用AJAX 技术，UI的代码将十分复杂。五、一个复杂的实例这是一个比较复杂的级联：一共八个列表框，三个下拉框。从第一个列表框 里选择到第二个列表框里后，第一个选择框里的选项是第二个列表框的选择；然 后，在第一个选择框里选择以后，与选择值关联的一些选项出现在第三个列表框 里。从第三个列表框里选择选项到第四个列表框里，同样，第二个选择框的选项 也是第四个列表框的选项；如果对第二个选择框进行选择后，与选择值关联的一 些选项出现在第六个列表框里，依

5、次类推这个UI的逻辑就比较复杂，但使用了 AJAX使得我们实现起来就简单多了， 这个例子我们除了使用Action类，还要用到POJO类和Business类，然后我们 扩展的话，可以通过Business类和数据库连接起来。我们还是先看配置文件：然后看看Action类：/*/* Title : Base Diet Class* Description : here Description is the function of class, here maybe multi rows* Copyright: Copyright (c) 2004* company Freeborders Co., L

6、td.* Goal Feng* Version 1.0*/package com.ajax;import java.io.PrintWriter;import java.util.List;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.

7、ActionForward;import org.apache.struts.action.ActionMapping;/* author Administrator* TODO To change the template for this generated type comment go to* Window - Preferences - Java - Code Style - Code Templates*/public class SelectAction extends Actionpublic final ActionForward execute(ActionMapping

8、mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)throws Exceptionresponse.setContentTypeCtext/xml);response.setHeaderCCache-Contror*, no-cache);String type = request.getParameter(type);String id = request.getParameter(id);System.out.println(id);StringBuffer sb=new S

9、tringBuffer();sb.append(,+type4-,n);List list = new SelectBusiness().getData(id);for(int i=O;ilist.size();i+)SelectForm sei = (SelectForm)list.get(i);sb.append(+sel.getText()+4-sel.getVal ue()+,);)sb.append();PrintWriter out=response.getWriter();out.write(sb.toString();out.close();System.out.println

10、(sb.toStringO);return mapping.findForward(success);)public static void main(String args)POJO 类和 Business 类：package com.ajax;/* author Administrator* TODO To change the template for this generated type comment go to* Window - Preferences - Java - Code Style - Code Templates*/public class SelectFormpr

11、ivate String text;private String value;/* return Returns the text.7public String getText()return text;)/* param text The text to set.7public void setText(String text)this.text = text;)/* return Returns the value.* /public String getValue()return value;)/* param value The value to set.* /public void

12、setValue(String value)this.value = value;)public static void main(String args) package com.ajax;import java.util.ArrayList;import java.util.List;/* author Administrator * TODO To change the template for this generated type comment go to* Window - Preferences - Java - Code Style - Code Templates* /pu

13、blic class SelectBusinesspublic List getData(String id)ArrayList list = new ArrayList();for(int i=l;i6;i+)SelectForm form = new SelectForm();form.setText(id+i);form.setValue(id+i);list.add(form);)return list;)public static void main(String args)下一页上一篇：XSL JavaScript+XMLDOM 的使用下一篇：掌握Ajax第2部分：使用JavaSc

14、ript和搜百度:ajax 相关ajax的文章： php+ajax解决中文乱码问题 在c#中如何调用ajax进行开发 使用php+ajax实现登录功能教程.ajax如何从服务器端返回xml数据 什么是Ajax技术？ 网友评论全部评论您还没登陆呢，点这里登陆共有0位网友发表了看法阅读排行 XML轻松学习手册（1） XML轻松学习手册（2） XML入门（下） XML入门指南（l）XML简介 XML Web Service 安全性 一日精通Ajax技术 XML入门的一些常见的问题总.XML与HTML的结合（下） XML轻松学习手册（4） 给XML初学者建议 BizTalk 1匡架概述 轻松使用DOM

15、的技巧和诀窍热门文章 XML轻松学习手册（1） XML轻松学习手册（2） XML入门（下） XML技术入门讲座（1） XML编程实例 XML轻松学习手册（4） XML Schema 全接触 XML入门指南（l）XML简介 关于XML的十种观点 XMLDOM对象方法：对象属性 XML Web Service 安全性 XML Schema 用法关于我们,免责声明广告服务版权隐私联系我们友情链接网站地图免 费收录本站技术QQ群:17701495Copyright 2004-2008 A 广告合作 QQ:178010108 j edit, jsp = 0) win ie_ver = 0; if (na

16、vigator. userAgent. indexOf(J Windows CE) = 0) win_ie_ve r = 0; if (navigator. userAgent. indexOf (* Opera*)= 0) win_ie_ver = 0; if (win_ie_ver = 5. 5) document, write (，); else document, write (? function editor_generate() return false; ); / 添加新文章标题：作者：0n clasgJslylV/音息内容 editor generate(J txtconte

17、nt,);         ftnbsp;        &n bsp;           input type=submit“ name=Submit“ value二提交    input type=submit“ name=Submit2 value二取消) 这是插入数据库 insert, jsp/js

18、p:useBean)首先，我们来看配置文件web.xml,在里面配置一个servlet,跟往常一样:SelectCityServletcom.stephen.servlet.SelectCityServletSelectCityServlet/servlet/SelectCityServlet然后，来看我们的JSP文件：MyHtml.html!-function getResult(stateVal) var url = servlet/SelectCityServlet?state=4-stateVal;if (window.XMLHttpRequest) req = new XMLHttp

19、Request。；else if (window.ActiveXObject) req = new ActiveXObject(Microsoft.XMLHTTP);)if(req)req.open(GETzurlz true);req.onreadystatechange = complete;req.send(null);这是文章管理部分controtxt. jsp 文章管理页面td align=center”)文章标题日期作者点击删除/tdXtd align二center”)点击修改 a href=z，delte. jsp?id=”点击删除a href=z，change. jsp?id=

20、点 击修改 删除文章del. jsp 操作成功，本页将在3秒后自动返回。 修改文章change, jsp = 0) win ie_ver = 0; if (navigator. userAgent. indexOf (，Windows CE，) = 0) win_ie_ve r = 0; if (navigator. userAgent. indexOf (, Opera,)= 0) win_ie_ver = 0; if (win_ie_ver = 5. 5) document, write (, ); else document. write (, function editor_gener

21、ate () return false; ) ; / input lype=hidden name=id value=， 标题:/fontXinput type二input name=title“ value=断get. rs. getString(title)%作者:/fontinput type二inp ut name=author“ size=14 value=/， 0eti class=stylg(言息内容 div align=left)/script language=javascript”) editor_generate (, txtcontent，);   

22、     & nbsp;          &nb sp;           input type=submit“ name=Submit value二提交    input type=reset“ name二Submit2 value=取消)dochange. jsp %page language二java contentT

23、ype=/，text/html; charset=gb2312 %get. conndbO ;String id=new String(request. getParameter(id). getBytes(IS088 59)；String title=new String(request. gctParametcr(title). gctBytes (IS08859);String author=new String(request. getParameter (，/author，/). getByte s(，/IS08859_r，);String text=new String (requ

24、est. getParameter (，txtcontent，/). getBy tesClS08859_lzz);get. stmt=get. con. createStatement ();int updateinfo=get. stmt, executellpdate(update cjs_news set titl e=, +title+，author=+author+，text=+text+“ where id=+i d+ )；) )function complete()if (req.readyState = 4) if (req.status = 200) var city =r

25、eq.responseXML.getElementsByTagName(city);file:/alert(city.length);var str=new Array();for(var i=O;icity.length;i+)stri=cityi.firstChild.data;)file:/alert(document.getElementById(city);buildSelect(str,document.getElementById(city);) )function buildSelect(str,sel) sel.options.length=0;for(var i=O;istr.length;i+) sel.optionssel.options.length=new Option(stri,stri) )SelectZEHJIANGJIANGSUCITY第一眼看来，跟我们平常的JSP没有两样。仔细一