DWR让Ajax如此简单(2)

DWR让Ajax如此简单(2)

http://www.51cto.com 2005-11-18 17:18 作者:Cloves Carneiro;simmone 出处:www.javaworld.com <script language="javascript" src="DWR让Ajax如此简单(2)_51CTO_COM--中国最大的网络技术网站_files/count.php" type="text/javascript"></script>

调试页   现在你必须让DWR知道通过XMLHttpRequest对象，什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中，定义了DWR允许你从网页中调用的对象。从设计上讲，DWR允许访问所有公布类的公共方法，但在我们的例子中，我们只允许访问几个方法。下面是我们示例的配置文件: <dwr> <allow> <convert converter="bean" match="dwr.sample.Apartment"/> <create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO"> <include method="findApartments"/> <include method="countApartments"/> </create> </allow> </dwr> 上面的文件实现了我们例子中的两个目标。首先，<convert>标记告诉DWR将dwr.sample.Apartment对象的类型转换为联合数组，因为，出于安全的原因，DWR默认的不会转换普通bean。第二，<create>标记让DWR暴露出dwr.sample.ApartmentDAO类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定义。我们必须注意<include>标记，它指明了dwr.sample.ApartmentDAO类的哪些方法可用。 HTML/JSP代码 配置完成后，你就可以启动你的Web应用了，这时DWR会为从你的HTML或Java服务器端页面(JSP)上调用所需方法作好准备，并不需要你创建JavaScript文件。在search.jsp文件中， 我们必须增加由DWR提供的JavaScript接口，还有DWR引擎，加入以下三行到我们的代码中:   <script src='dwr/interface/ApartmentDAO.js'></script> <script src='dwr/engine.js'></script> <script src='dwr/util.js'></script> 我们注意到当用户改变搜索标准时，这是Ajax在示例程序中的首次应用;正如他所看到的，当标准改变时，可用的公寓数量被更新了。我创建了两个JavaScript函数:当某一个选择下拉框中的值变化时被调用。ApartmentDAO.countApartments()函数是最重要的部分。最有趣的是第一个参数, loadTotal()函数，它指明了当接收到服务端的返回时DWR将会调用的JavaScript方法。loadTotal于是被调用来在HTML页面的 中显示结果。下面是在这个交互场景中所使用到的JavaScript函数:   function updateTotal() { $("resultTable").style.display = 'none'; var bedrooms = document.getElementById("bedrooms").value; var bathrooms = document.getElementById("bathrooms").value; var price = document.getElementById("price").value; ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price); } function loadTotal(data) { document.getElementById("totalRecords").innerHTML = data; } 很明显，用户想看到符合他的搜索条件的公寓列表。那么，当用户对他的搜索标准感到满意，并且总数也是有效的话，他会按下显示结果的按纽，这将会调用updateResults() JavaScript方法: function updateResults() { DWRUtil.removeAllRows("apartmentsbody"); var bedrooms = document.getElementById("bedrooms").value; var bathrooms = document.getElementById("bathrooms").value; var price = document.getElementById("price").value; ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price); $("resultTable").style.display = ''; } function fillTable(apartment) { DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]); } updateResults()方法清空了存放搜索返回结果的表域，从用户界面上获取所需参数，并且将这些参数传给DWR创建的ApartmentDAO对象。然后数据库查询将被执行，fillTable()将会被调用，它解析了DWR返回的对象(apartment)，然后将其显示到页面中(apartmentsbody)。 安全因素 为了保持示例的简要，ApartmentDAO类尽可能的保持简单，但这样的一个类通常有一组设置方法来操作数据，如insert(), update()和delete()。DWR暴露了所有公共方法给所有的HTML页面调用。出于安全的原因，像这样暴露你的数据访问层是不明智的。开发者可以创建一个门面来集中所有JavaScript函数与底层业务组件之间的通信，这样就限制了过多暴露的功能。 结论 这篇文章仅仅让你在你的项目中使用由DWR支持的Ajax开了个头。DWR让你集中注意力在如何提高你的应用的交互模型上面，消除了编写和调试JavaScript代码的负担。使用Ajax最有趣的挑战是定义在哪里和如何提高可用性。DWR负责了操作Web页面与你的Java对象之间的通信，这样就帮助你完全集中注意力在如何让你的应用的用户界面更加友好。