﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-nbtymm-随笔分类-Ajax技术</title><link>http://www.blogjava.net/nbtymm/category/11238.html</link><description>&lt;/br&gt;&lt;a href="http://www.fastonlineusers.com"&gt;&lt;b&gt;&lt;font color=red&gt;共有&lt;script src=http://fastonlineusers.com/online.php?d=bluedavy.blogjava.net&gt;&lt;/script&gt;人在同时阅读此Blog&lt;/font&gt;&lt;/b&gt;&lt;/a&gt;</description><language>zh-cn</language><lastBuildDate>Wed, 28 Feb 2007 18:01:05 GMT</lastBuildDate><pubDate>Wed, 28 Feb 2007 18:01:05 GMT</pubDate><ttl>60</ttl><item><title>DWR让AJAX如此简单(转) </title><link>http://www.blogjava.net/nbtymm/archive/2006/07/20/59163.html</link><dc:creator>nbt</dc:creator><author>nbt</author><pubDate>Thu, 20 Jul 2006 04:38:00 GMT</pubDate><guid>http://www.blogjava.net/nbtymm/archive/2006/07/20/59163.html</guid><wfw:comment>http://www.blogjava.net/nbtymm/comments/59163.html</wfw:comment><comments>http://www.blogjava.net/nbtymm/archive/2006/07/20/59163.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/nbtymm/comments/commentRss/59163.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/nbtymm/services/trackbacks/59163.html</trackback:ping><description><![CDATA[
		<div class="postTitle">
				<font color="#000080">作者:Cloves Carneiro;</font>
				<a href="http://www.matrix.org.cn/user.shtml?username=simmone" target="_new">
						<font color="#000080">simmone </font>
				</a>
				<br />
				<font color="#000080">原文地址:</font>
				<a href="http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html" target="_new">
						<font color="#000080">http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html </font>
				</a>
				<br />
				<font color="#000080">中文地址:</font>
				<a href="http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html" target="_new">
						<font color="#000080">http://www.matrix.org.cn/resource/article/43/43926_DWR_AJAX.html </font>
				</a>
				<br />
				<font color="#000080">关键词： DWR AJAX<br /><br /><br /><b><span style="FONT-SIZE: 16px">概述</span></b><br /><br />这篇文章阐述了使用开源项目DWR(直接Web远程控制)和AJAX(异步JavaScript和XML)的概念来提高Web应用的可用性。作者一步步来展示DWR如何使得AJAX的应用既简单又快捷。（1600字;2005年6月20日） <br /><br />AJAX，或者说是异步JavaScript和XML，描述了一种使用混合了HTML(或XHTML)和层叠样式表作为表达信息,来创建交互式的Web应用的开发技术;文档对象模型（DOM），JavaScript,动态地显示和与表达信息进行交互;并且，XMLHttpRequest对象与Web服务器异步地交换和处理数据。<br /><br />因特网上许多例子展示了在一个HTML文件内部使用XMLHttpRequest与服务器端进行交互的必要的步骤。当手工地编写和维护XMLHttpRequest代码时，开发者必须处理许多潜在的问题，特别是类似于跨浏览器的DOM实现的兼容性这样的问题。这将会导致在编码和调试Javascript代码上面花费数不清的时间，这显然对开发者来说很不友好。<br /><br />DWR(直接Web远程控制)项目是在Apache许可下的一个开源的解决方案，它供给那些想要以一种简单的方式使用AJAX和XMLHttpRequest的开发者。它具有一套Javascript功能集，它们把从HTML页面调用应用服务器上的Java对象的方法简化了。它操控不同类型的参数，并同时保持了HTML代码的可读性。<br /><br />DWR不是对一个设计的插入，也不强迫对象使用任何种类的继承结构。它和servlet框架内的应用配合的很好。对缺少DHTML编程经验的开发者来说，DWR也提供了一个JavaScript库包含了经常使用的DHTML任务，如组装表，用item填充select下拉框，改变HTML元素的内容，如&lt;div&gt;和&lt;span&gt;<br />DWR网站是详尽的并且有大量的文档，这也是这篇文章的基础。一些例子用来展示DWR如何使用和用它的库可以完成什么样的工作。<br /><br />这篇文章让读者看到了一个使用了DWR的Web应用是如何一步步建立的。我会展示创建这个简单的示例应用的必要的细节，这个应用是可下载的并且可以在你的环境中布署来看看DWR如何工作。<br />注意：找到有关AJAX的信息并不困难;网页上有几篇文章和博客的条目涵盖了这个主题，每一个都试图指出和评论这个概念的不同的方面。在资源部分，你会找到一些有趣的指向示例和文章的链接，来学习AJAX的更多的内容。<br /><br /><b><span style="FONT-SIZE: 16px">示例应用</span></b><br />这篇文章使用的示例应用模拟了多伦多的一个公寓出租搜索引擎。用户可以在搜索前选择一组搜索标准。为了提高交互性，AJAX中以下两种情况下使用：<br />·应用通告用户配合他的选择会返回多少搜索结果。这个数字是实时更新的-使用AJAX-当用户选择的卧室和浴室的数量，或者价格范围变化时。当符合标准的搜索结果没有或太多时，用户就没有必要点击搜索按纽。<br />·数据库查询并取回结果是由AJAX完成的。当用户按下显示结果按钮时，数据库执行搜索。这样，应用看起来更具响应了，而整个页面不需要重载来显示结果。<br /><br /><b><span style="FONT-SIZE: 16px">数据库</span></b><br />我们使用的数据库是HSQL，它是一种占用资源很小的Java SQL数据库引擎，可以不需要安装和配置的与Web应用捆绑在一起。一个SQL文件被用来在Web应用的上下文启动时创建一个内存中的表并添加一些记录。<br /><br /><b><span style="FONT-SIZE: 16px">Java类</span></b><br />应用包含了两个主要的类叫Apartment和ApartmentDAO。Apartment.java类是一个有着属性和getter/setter方法的简单的Java类。ApartmentDAO.java是数据访问类，用来查询数据库并基于用户的搜索标准来返回信息。ApartmentDAO类的实现的直接了当的;它直接使用了Java数据库联接调用来得到公寓的总数和符合用户请求的可用公寓的列表。<br /><br /><b><span style="FONT-SIZE: 16px">DWR配置和使用</span></b><br />设置DWR的使用是简单的：将DWR的jar文件拷入Web应用的WEB-INF/lib目录中，在web.xml中增加一个servlet声明，并创建DWR的配置文件。DWR的分发中需要使用一个单独的jar文件。你必须将DWR servlet加到应用的WEB-INF/web.xml中布署描述段中去。<br /></font>
		</div>
		<div class="postText">
				<pre class="overflow">
						<font color="#000080">    &lt;servlet&gt;<br />        &lt;servlet-name&gt;dwr-invoker&lt;/servlet-name&gt;<br />        &lt;display-name&gt;DWR Servlet&lt;/display-name&gt;<br />        &lt;description&gt;Direct Web Remoter Servlet&lt;/description&gt;<br />        &lt;servlet-class&gt;uk.ltd.getahead.dwr.DWRServlet&lt;/servlet-class&gt;<br />        &lt;init-param&gt;<br />            &lt;param-name&gt;debug&lt;/param-name&gt;<br />            &lt;param-value&gt;true&lt;/param-value&gt;<br />        &lt;/init-param&gt;<br />    &lt;/servlet&gt;<br /><br />    &lt;servlet-mapping&gt;<br />        &lt;servlet-name&gt;dwr-invoker&lt;/servlet-name&gt;<br />        &lt;url-pattern&gt;/dwr/*&lt;/url-pattern&gt;<br />    &lt;/servlet-mapping&gt;</font>
				</pre>
				<br />
				<br />
				<font color="#000080">一个可选的步骤是设置DWR为调试模式—象上面的例子那样—在servlet描述段中将debug参数设为true。当DWR在调试模式时，你可以从HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上，它显示了对象的公共方法。所列方法可以从页面中调用，允许你，第一次，运行服务器上的对象的方法。下图显示了调试页的样子:<br /><br /><img onmouseover="javascript:imgShowTip(this);" style="DISPLAY: inline" onclick="javascript:imgClick(this);" alt="image" src="http://www.matrix.org.cn/resource/upload/forum/2005_11_07_000336_lrylCwRMxo.jpg" onload="javascript:imgLoad(this);" border="0" /><br />调试页<br /><br />现在你必须让DWR知道通过XMLHttpRequest对象，什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中，定义了DWR允许你从网页中调用的对象。从设计上讲，DWR允许访问所有公布类的公共方法，但在我们的例子中，我们只允许访问几个方法。下面是我们示例的配置文件:<br /></font>
				<pre class="overflow">
						<font color="#000080">&lt;dwr&gt;<br />    &lt;allow&gt;<br />        &lt;convert converter="bean" match="dwr.sample.Apartment"/&gt;<br />        &lt;create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO"&gt;<br />            &lt;include method="findApartments"/&gt;<br />            &lt;include method="countApartments"/&gt;<br />        &lt;/create&gt;<br />    &lt;/allow&gt;<br />&lt;/dwr&gt;</font>
				</pre>
				<br />
				<br />
				<font color="#000080">上面的文件实现了我们例子中的两个目标。首先，&lt;convert&gt;标记告诉DWR将dwr.sample.Apartment对象的类型转换为联合数组，因为，出于安全的原因，DWR默认的不会转换普通bean。第二，&lt;create&gt;标记让DWR暴露出dwr.sample.ApartmentDAO类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定义。我们必须注意&lt;include&gt;标记，它指明了dwr.sample.ApartmentDAO类的哪些方法可用。<br /><br /><b><span style="FONT-SIZE: 16px">HTML/JSP代码</span></b><br />配置完成后，你就可以启动你的Web应用了，这时DWR会为从你的HTML或Java服务器端页面(JSP)上调用所需方法作好准备，并不需要你创建JavaScript文件。在search.jsp文件中， 我们必须增加由DWR提供的JavaScript接口，还有DWR引擎，加入以下三行到我们的代码中：<br /><br /></font>
				<pre class="overflow">
						<font color="#000080">  &lt;script src='dwr/interface/ApartmentDAO.js'&gt;&lt;/script&gt;<br />  &lt;script src='dwr/engine.js'&gt;&lt;/script&gt;<br />  &lt;script src='dwr/util.js'&gt;&lt;/script&gt;</font>
				</pre>
				<br />
				<br />
				<font color="#000080">我们注意到当用户改变搜索标准时，这是AJAX在示例程序中的首次应用;正如他所看到的，当标准改变时，可用的公寓数量被更新了。我创建了两个JavaScript函数：当某一个选择下拉框中的值变化时被调用。ApartmentDAO.countApartments()函数是最重要的部分。最有趣的是第一个参数, loadTotal()函数，它指明了当接收到服务端的返回时DWR将会调用的JavaScript方法。loadTotal于是被调用来在HTML页面的&lt;div&gt;中显示结果。下面是在这个交互场景中所使用到的JavaScript函数:<br /><br /></font>
				<pre class="overflow">
						<font color="#000080">function updateTotal() {<br />    $("resultTable").style.display = 'none';<br />    var bedrooms = document.getElementById("bedrooms").value;<br />    var bathrooms = document.getElementById("bathrooms").value;<br />    var price = document.getElementById("price").value;<br />    ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);<br />}<br /><br />function loadTotal(data) {<br />    document.getElementById("totalRecords").innerHTML = data;<br />}</font>
				</pre>
				<br />
				<br />
				<font color="#000080">很明显，用户想看到符合他的搜索条件的公寓列表。那么，当用户对他的搜索标准感到满意，并且总数也是有效的话，他会按下显示结果的按纽，这将会调用updateResults() JavaScript方法：<br /><br /></font>
				<pre class="overflow">
						<font color="#000080">function updateResults() {<br />    <br />    DWRUtil.removeAllRows("apartmentsbody");<br />    var bedrooms = document.getElementById("bedrooms").value;<br />    var bathrooms = document.getElementById("bathrooms").value;<br />    var price = document.getElementById("price").value;<br />    ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);<br />    $("resultTable").style.display = '';<br />}<br /><br />function fillTable(apartment) {<br />    DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);<br />}</font>
				</pre>
				<br />
				<br />
				<font color="#000080">updateResults()方法清空了存放搜索返回结果的表域，从用户界面上获取所需参数，并且将这些参数传给DWR创建的ApartmentDAO对象。然后数据库查询将被执行，fillTable()将会被调用，它解析了DWR返回的对象(apartment)，然后将其显示到页面中(apartmentsbody)。<br /><br /><b><span style="FONT-SIZE: 16px">安全因素</span></b><br />为了保持示例的简要，ApartmentDAO类尽可能的保持简单，但这样的一个类通常有一组设置方法来操作数据，如insert(), update()和delete()。DWR暴露了所有公共方法给所有的HTML页面调用。出于安全的原因，像这样暴露你的数据访问层是不明智的。开发者可以创建一个门面来集中所有JavaScript函数与底层业务组件之间的通信，这样就限制了过多暴露的功能。<br /><br /><b><span style="FONT-SIZE: 16px">结论</span></b><br />这篇文章仅仅让你在你的项目中使用由DWR支持的AJAX开了个头。DWR让你集中注意力在如何提高你的应用的交互模型上面，消除了编写和调试JavaScript代码的负担。使用AJAX最有趣的挑战是定义在哪里和如何提高可用性。DWR负责了操作Web页面与你的Java对象之间的通信，这样就帮助你完全集中注意力在如何让你的应用的用户界面更加友好，<br />我想感谢Mircea Oancea和Marcos Pereira,他们阅读了这篇文章并给予了非常有价值的返匮。<br /><br /><b>资源</b><br />·javaworld.com:</font>
				<a href="http://www.javaworld.com/" target="_new">
						<font color="#000080">javaworld.com </font>
				</a>
				<br />
				<font color="#000080">·Matrix-Java开发者社区:</font>
				<a href="http://www.matrix.org.cn/" target="_new">
						<font color="#000080">http://www.matrix.org.cn/ </font>
				</a>
				<br />
				<font color="#000080">·onjava.com:</font>
				<a href="http://www.onjava.com/" target="_new">
						<font color="#000080">onjava.com </font>
				</a>
				<br />
				<font color="#000080">·下载示例程序的全部源码:</font>
				<a href="http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war" target="_new">
						<font color="#000080">http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war </font>
				</a>
				<br />
				<font color="#000080">·DWR: http://www.getahead.ltd.uk/dwr/index.html<br />·HSQL:http://hsqldb.sourceforge.net/<br />·AJAX的定义:http://en.wikipedia.org/wiki/AJAX<br />· “AJAX:通向Web应用的新途径": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385.php<br />· “非常动态的Web界面” Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html<br />·XMLHttpRequest &amp; AJAX 工作范例: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples<br />· “可用的XMLHttpRequest实践” Thomas Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/<br />·"XMLHttpRequest使用导引" Thomas Baekdal (Baekdal.com,  2005.2):http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/<br />·AJAX实质:http://www.ajaxmatters.com/<br /><br />(看完后个人感觉：有了DWR就JAVA开发而言，完全可以与AJAX匹敌啦，省了在JS上对XMLHTTP以及对DOM的处理，不可以避免地在后台对应的IO处理；然后就DWR来说，它增加了对XML中对应的配置--在开源框架中似乎一直不曾停止过。还有对一些DWR自有用法如DWRUtil.addRows得参考其相关文档---当然这样的功能我们自己也可以用JS来解决，并且它显然很实用。add by jkallen)</font>
		</div>
<img src ="http://www.blogjava.net/nbtymm/aggbug/59163.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/nbtymm/" target="_blank">nbt</a> 2006-07-20 12:38 <a href="http://www.blogjava.net/nbtymm/archive/2006/07/20/59163.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>将Ajax包装成对象使用</title><link>http://www.blogjava.net/nbtymm/archive/2006/06/09/51728.html</link><dc:creator>nbt</dc:creator><author>nbt</author><pubDate>Fri, 09 Jun 2006 08:50:00 GMT</pubDate><guid>http://www.blogjava.net/nbtymm/archive/2006/06/09/51728.html</guid><wfw:comment>http://www.blogjava.net/nbtymm/comments/51728.html</wfw:comment><comments>http://www.blogjava.net/nbtymm/archive/2006/06/09/51728.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/nbtymm/comments/commentRss/51728.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/nbtymm/services/trackbacks/51728.html</trackback:ping><description><![CDATA[
		<p>
				<font color="#000000">
						<font face="Arial">   Ajax目前是社区内最热门的话题之一了，最近在我们的项目中用了大量的Ajax，现在把我们的使用方法在这儿写出来，希望大家能指教。<br /><br />因为要用到Ajax就肯定要用到XMLHttpRequest对象，但由于不同的浏览器版本，相应的生成它的方法也有所不同，所以我们不得不对浏览器的版本进行判断，试想，如果我们要在很多地方都要写那些繁琐的代码会觉的很麻烦，代码的重用也很低，所以我们写一个Ajax的对象。代码如下：<br /><br /><strong><font style="BACKGROUND-COLOR: #ffffff" color="#008000">//*********************************************************<br />// 目的：    AJAX类<br />// 输入：    无<br />// 返回：    返回XMLHttp对象<br />// 例子：    var myConn = new XHConn();<br />//<br />//           if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");<br />//<br />//           var fnWhenDone = function (oXML) { alert(oXML.responseText); };<br />//<br />//           myConn.connect("mypage.php", "POST", "foo=bar&amp;baz=qux", fnWhenDone);<br />//<br />//*********************************************************<br />function XHConn()<br />{<br />  var xmlhttp = false, bComplete = false;<br />  try <br />  { <br />   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); <br />  }<br />  catch (e) <br />  { <br />   try <br />   { <br />    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); <br />   }<br />    catch (e) <br />    { <br />    try <br />    { <br />     xmlhttp = new XMLHttpRequest(); <br />    }<br />    catch (e) <br />    { <br />     xmlhttp = false; <br />    }<br />   }<br />  }<br />  if (!xmlhttp) return null;<br />  this.connect = function(sURL, sMethod, sVars, fnDone)<br />  {<br />    if (!xmlhttp) return false;<br />    bComplete = false;<br />    sVars = (sVars == '') ? Math.random() : sVars + "&amp;" + Math.random();<br />    sMethod = sMethod.toUpperCase();</font></strong></font>
				</font>
				<font style="BACKGROUND-COLOR: #ffffff">
						<font color="#008000">
								<strong>
								</strong>
						</font>
				</font>
		</p>
		<p>
				<font color="#000000">
						<font face="Arial">
								<strong>
										<font style="BACKGROUND-COLOR: #ffffff" color="#008000">    try <br />    {<br />      if (sMethod == "GET")<br />      {<br />        xmlhttp.open(sMethod, sURL+"?"+sVars, true);<br />        xmlhttp.setRequestHeader("Content-Type", "text/html;charset=GB2312");<br />        sVars = "";<br />      }<br />      else<br />      {<br />        xmlhttp.open(sMethod, sURL, true);<br />        xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");<br />        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");<br />      }<br />      xmlhttp.onreadystatechange = function()<br />      {<br />        if (xmlhttp.readyState == 4 &amp;&amp; !bComplete)<br />        {<br />          bComplete = true;<br />          fnDone(xmlhttp);<br />        }<br />      };<br />      <br />      xmlhttp.send(sVars);<br />    }<br />    catch(z) <br />    { <br />     return false; <br />    }<br />    return true;<br />  };<br />  <br />  return this;<br />}<br /></font>
								</strong>
								<br />
								<br />通过这个对象，我们把那些繁琐的代码都封装到里面，这样大大提高了代码的重用性，每次要用Ajax时我们只需要在我们的页面上 new一个XHConn()对象就行了，然后通过调用它的方法connect（sURL, sMethod, sVars, fnDone）就可以和服务器进行异步交互了。</font>
				</font>
		</p>
<img src ="http://www.blogjava.net/nbtymm/aggbug/51728.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/nbtymm/" target="_blank">nbt</a> 2006-06-09 16:50 <a href="http://www.blogjava.net/nbtymm/archive/2006/06/09/51728.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>掌握Ajax- 第一部分：Ajax简介(转IBM开发者)</title><link>http://www.blogjava.net/nbtymm/archive/2006/05/18/46797.html</link><dc:creator>nbt</dc:creator><author>nbt</author><pubDate>Thu, 18 May 2006 05:51:00 GMT</pubDate><guid>http://www.blogjava.net/nbtymm/archive/2006/05/18/46797.html</guid><wfw:comment>http://www.blogjava.net/nbtymm/comments/46797.html</wfw:comment><comments>http://www.blogjava.net/nbtymm/archive/2006/05/18/46797.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/nbtymm/comments/commentRss/46797.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/nbtymm/services/trackbacks/46797.html</trackback:ping><description><![CDATA[&nbsp;&nbsp;&nbsp;&nbsp; 摘要: Ajax 				由				HTML				、				JavaScript™ 				技术、				DHTML 				和				DOM 				组成，这一杰出的方法可以将笨拙的				Web 				界面转化成交互性的				Ajax 				应用程序。本文的作者是一位				Ajax 				专家，他演示了这些技术如何协同工作		...&nbsp;&nbsp;<a href='http://www.blogjava.net/nbtymm/archive/2006/05/18/46797.html'>阅读全文</a><img src ="http://www.blogjava.net/nbtymm/aggbug/46797.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/nbtymm/" target="_blank">nbt</a> 2006-05-18 13:51 <a href="http://www.blogjava.net/nbtymm/archive/2006/05/18/46797.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>