AJAX实例入门-文档-文档资料.docx
AJAX实例入门网友评论0条 转载到博客2007-7-7 15:59:22来源：本站整理顶一下最大的网站源码资源下载站，.一、开门见山这些时间，瞎子也看得见，AJAX正大踏步的朝我们走来。不管我们是拥护 也好，反对也罢，还是视而不见，AJAX像一阵潮流，席转了我们所有的人。关于AJAX的定义也好，大话也好，早有人在网上发表了汗牛充栋的文字, 在这里我也不想照本宣科。只想说说我感觉到的一些优点，对于不对，大家也可以和我讨论：首先是异步交互，用户感觉不到页面的提交，当然也不等待页面返回。这是 使用了 AJAX技术的页面给用户的第一感觉。其次是响应速度快，这也是用户强烈体验。然后是与我们开发者相关的，复杂UI的成功处理，一直以来，我们对B/S 模式的UI不如C/S模式UI丰富而苦恼。现在由于AJAX大量使用JS,使得复杂 的UI的设计变得更加成功。最后，AJAX请求的返回对象为XML文件，这也是一个潮流，就是WEB SERVICE潮流一样。易于和WEB SERVICE结合起来。好了，闲话少说，让我们转入正题吧。我们的第一个例子是基于Servlet为后台的一个web应用。二、基于 Servlet 的 AJAX这是一个很常见的UI,当用户在第一个选择框里选择ZHEJIANG时，第二 个选择框要出现ZHEJIANG的城市；当用户在第一个选择框里选择JIANGSU时; 第二个选择框里要出现JIANGSU的城市。 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);)</script><body><form name=,forml" action="" method="post">User Name:<input type="text" name="username" value=""> <input type="button" name="check" value="check" onClick="userCheck()"><input type="submit" name="submit" value="submit"></form></body></html>我们可以看到，JSP基本是一样的，除了要发送的url： ajax/check.do?username=,+usernameo最后，我们来看一个基于Struts和AJAX的复杂一些的例子，如果不用AJAX 技术，UI的代码将十分复杂。五、一个复杂的实例这是一个比较复杂的级联：一共八个列表框，三个下拉框。从第一个列表框 里选择到第二个列表框里后，第一个选择框里的选项是第二个列表框的选择；然 后，在第一个选择框里选择以后，与选择值关联的一些选项出现在第三个列表框 里。从第三个列表框里选择选项到第四个列表框里，同样，第二个选择框的选项 也是第四个列表框的选项；如果对第二个选择框进行选择后，与选择值关联的一 些选项出现在第六个列表框里，依次类推这个UI的逻辑就比较复杂，但使用了 AJAX使得我们实现起来就简单多了， 这个例子我们除了使用Action类，还要用到POJO类和Business类，然后我们 扩展的话，可以通过Business类和数据库连接起来。我们还是先看配置文件：<action type="com.ajax.SelectAction"scope="request" path="/ajax/select"><forward name="success" path="/select.jsp"/></action>然后看看Action类：/*/* Title : Base Diet Class* Description : here Description is the function of class, here maybe multi rows* Copyright: Copyright (c) 2004* ©company Freeborders Co., Ltd.* 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.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 mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response)throws Exceptionresponse.setContentTypeCtext/xml");response.setHeaderC'Cache-Contror*, "no-cache");String type = request.getParameter("type");String id = request.getParameter("id");System.out.println(id);StringBuffer sb=new StringBuffer("<select>");sb.append(,<type>,'+type4-,</type>n);List list = new SelectBusiness().getData(id);for(int i=O;i<list.size();i+)SelectForm sei = (SelectForm)list.get(i);sb.append("<text>"+sel.getText()+"</textxvalue>"4-sel.getVal ue()+,</value>");)sb.append("</select>");PrintWriter out=response.getWriter();out.write(sb.toString();out.close();System.out.println(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 SelectFormprivate 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 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* /public class SelectBusinesspublic List getData(String id)ArrayList list = new ArrayList();for(int i=l;i<6;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部分：使用JavaScript和搜百度: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的技巧和诀窍热门文章 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 <%page language="java" contentType="text/html;charset=gb2312“ errorPage二error. jsp，%><jsp:useBean id二get scope二page" class=，com. tecpenguin, conndb. ConnMySQL"></jsp:useBean><html> <head><meta http-equiv二Content-Type“ content二text/html; charset=gb2 312><link rel=stylesheet“ type="text/css href二style.css><title></title><script languagc=z，Javascript/z><! / load htmlarca_editor_url = /z. /editor/；/ URL to htmlarea filesvar win_ie_ver = parseFloat (navigator. appVersion. split (Z，MSIEZ，) ID;if (navigator. userAgent. indexOf MacJ)>= 0) win ie_ver = 0; if (navigator. 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 (，<scr， + ' ipt src='+_editor_url+ ' editor, js')；document, write(, language二Javascript></scr' + ' ipt>'); else document, write (? <scr，ipt>function editor_generate() return false; </scr, +f ipt>>); / ></script><style type="text/css><! .stylel (font-size: 36px;color: #FF0000;font-weight: bold;font-family: 长城行楷体；.style2 font-size: 14px;color: #FF0000;font-weight: bold;)></style></head><body><center><br><brXfont color二red>添加新文章</font><table><fonn name="form' method="post" action="insert.jsp><tr><td><p align=/，left，><font size="2>标题：</font><input type="input“ name="title“ size=38"></pX/tdX/tr><tr><td><p align="left'Xfont size="2>作者：</font><input type="input“ name=author“ size=14></p></td></tr></p><tr bgcolor=#FFFFFF><td align=centerXdiv align="leftXbr>0»n clasgJslylV/音息内容<AprMdivX/td><tr> <td> <div align="left")textarea ro«s=2r na+'txtocnteit" co但，83，></textarea><br><script language二javascript> editor generate(J txtcontent,);</script></div></td></tr><tr> <td><p align=/，left，> ftnbsp; &n bsp; <input type="submit“ name="Submit“ value二提交 <input type="submit“ name="Submit2 value二取消)</p></td></tr></form></table></center></center></body></html> 这是插入数据库 insert, jsp<%page language二java contentType=zztext/html; charset=gb2312 "%><jsp:useBean id二gel“ scope二page" class二com. leepenguin, conndb. ConnMySQL，z>/jsp:useBean)<jsp:useBean id="time" scope="page" class="com. tecpenguin, connd b. Timezz></jsp:useBean><%String date=time. date ();String title=new StringCrequest. getParameter("title"). getBytes (IS08859)；String author=new StringCrequest. getParameter (，author，/). getByte s(IS08859);String text=new String (request. getParameter (，txtcontent，/). getBy tes(TS08859_l)；get. conndbO ;get. stmt=get. con. createStatement (); Stringsql="insert into cjs_news(date, title, author, text) values (' +date+'，' +title+'，+author+'，+text+，) ； get. rs=get. stmt. executeQuery (sql);%>首先，我们来看配置文件web.xml,在里面配置一个servlet,跟往常一样:<web-app version="2.4"xmlns=""xmlns:xsi=""xsi:schemaLocation=" ">< servlet ><servlet-name>SelectCityServlet</servlet-name><servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class></servlet><servlet-mapping><servlet-name>SelectCityServlet</servlet-name><url-pattern>/servlet/SelectCityServlet</url-pattem></servlet-mapping></web-app>然后，来看我们的JSP文件：<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html><head><title>MyHtml.html</title><meta http-equiv="keywords" content="keywordlzkeyword2,keyword3"><meta http-equiv="description" content="this is my page"><!-<link rel="stylesheet" type="text/css" href ="./styles.css">-></head>< script type="text/javascript">function getResult(stateVal) var url = "servlet/SelectCityServlet?state="4-stateVal;if (window.XMLHttpRequest) req = new XMLHttpRequest。；else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");)if(req)req.open("GET"zurlz true);req.onreadystatechange = complete;req.send(null);<% out. print In (输入新闻成功!请等待三秒钟！ );response. setHeader("Refresh”, 2;URL;edit. jsp)；%>这是文章管理部分controtxt. jsp <%page language二java contentType=zztext/html; charset=gb2312 “ errorPage=z，error. jsp，%><jsp:useBean id=gel scope二page class二com. leepenguin, connd b. ConnMySQL></jsp:useBean><%get. conndbO ;get. stmt = get. con. createStatement ();get. rs = get. stmt. executeQuery(select * from cjs. news order by id desc");%Xbr><br><br><brXbr><center><font color二rcd size=2>文章管理页面</font><br><table border=3><tr><td align=center”)文章标题</tdXtd>日期</tdXtd>作者</tdX td align二center”>点击删除/tdXtd align二center”)点击修改</td> </tr><%int i=0;while (get. rs. next ()(i=+i;%><tr ><td><%=get. rs. getString(，title，)%X/td><td><%=get. rs. getSt ring(，date，)%X/td><tdX%=get. rs. getString(，author，/)%X/td> <td><a href=z，delte. jsp?id=<%=get. rs. getString(id")%>”>点击删除</a></td><td><a href=z，change. jsp?id=<%=get. rs. getString(id)%>>点 击修改 </aX/tdX/tr><%) %> </table> 删除文章del. jsp <%page language二java" contenlType=z，text/htnil ;charset=gb2312z，%> <jsp:useBcan id二get scope=page class=com. teepenguin. conndb. ConnMySQL，z></jsp:useBean><%String id = new String (request. getParameter (z/id，/);get. conndbO ;String sql 二delete from cjs_ news where id ='+id+“'"get.stmt. executeUpdate(sql);%><center>操作成功，本页将在3秒后自动返回。</center><meta http-equiv=refresh content = "3;URL=controtext. jsp”> <%get. stmt, close ();get. con. close (); %>修改文章change, jsp <%page language二java contentType=z，text/html ;charset=gb2312，z%> <jsp:useBean id二get scope二page" class=z，com. tecpenguin, conndb. ConnMySQL，/ ></jsp:useBean><%get. conndbO ;String id=new String (request. getParameter (，id，/);get. rs = get. stmt. executeQuery(select * from cjs_news where id='+id+' )；get. rs. next ();%><head><meta http-equiv=Content-Type“ content二text/html; charset=gb2 312><1 ink rel=stylesheet“ type=text/css“ href二style.css”><title></title><script language=z，Javascript/z><! / load htmlarea_editor_url = "./editor/ URL to htmlarea f ilesvar win_ie_ver = parseFloat(navigator. appVersion. split(MSIE) 1)；if (navigator. userAgent. indexOf (* Mac5)>= 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 (, <scrJ + ' ipt sre =''+_editor_url+ 'editor, js”document, write (* languageiJavascriptX/scr' + ' ipt>'); else document. write (, <scr，+, ipt>function editor_generate () return false; </scr'+'ipt>') ; / ></script><style type=，text/css，><! .stylel font-size: 36px;color: #FF0000;font-weight: bold;font-family: 长城行楷体；).style2 font-size: 14px;color: ttFFOOOO;font-weight: bold;)></style></head><form name二form" method="post" action=，dochange. jsp><input lype=hidden name=id value=，<%=get. rs. getString(，/id，)%>，> <p align二leftXfont size=2">标题:/fontXinput type二input name="title“ value=断get. rs. getString(title)%>></p><p alignleftXfont size=2>作者:</font<input type二inp ut name="author“ size=14 value=/，<%=get. rs. getString(author )>></p> </tr><tr bgcolor二#FFFFFF”><td al igTFcente/'Xdiv ajgn=eftXbr>0eti class=stylg>(言息内容</率nMHivX/td><td> <div align="left")<tcxtarca ro后22" nairtxtocntcnt ools=，83，><%=get. rs. getString(，/text，)%>/</textarea><br><script language="javascript”) editor_generate (, txtcontent，);</script> </div></td></tr><p align=1cft> & nbsp; &nb sp; <input type="submit“ name="Submit" value二提交 <input type="reset“ name二Submit2 value=取消)</p></form>dochange. jsp <%page language二java contentType=/，text/html; charset=gb2312 <jsp:useBean id二get scope二page“ class=com. tecpenguin, conndb.ConnMySQLz，></jsp:useBean><%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 (request. 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 =req.responseXML.getElementsByTagName("city");file:/alert(city.length);var str=new Array();for(var i=O;i<city.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;i<str.length;i+) sel.optionssel.options.length=new Option(stri,stri) )</script><body><select name="state" onChange="getResult(this.value)"><option value="">Select</option>><option value="zj">ZEHJIANG</option>><option value="zs">JIANGSU</option>></select><select id="city"><option value="">CITY</option></select></body></html>第一眼看来，跟我们平常的JSP没有两样。仔细一
