第8章Ajax初步重点.ppt

不同的浏览器对Ajax有不同的支持方法，而对于Web服务器来说没有任何变化，因为浏览器和服务器之间的这个通道依然是基于HTTP请求和响应的，浏览器正常的请求和Ajax请求对于Web服务器来说没有任何区别。如图8.5所示说明了Ajax的请求和响应过程。 1．数据验证 在填写表单内容时，有时需要保证数据的唯一性（如新用户注册时填写的用户名），因此必须对用户输入内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将整个页面提交到服务器端进行验证，整个过程不仅时间长，且给服务器造成不必要的负担；第二种是对第一种方式的改进，用户通过单击相应的验证按钮，打开新窗口查看验证结果。但是这需要新开一个浏览器窗口或对话框，还需要编写相应的专门验证页面，既耗费系统资源，又耗费人力，而且如果这样的验证多了，系统还显得臃肿。 2．按需取数据 分类树或树形结构在Web应用系统中使用非常普遍。以前每次对分类树的操作都会引起页面刷新，用户需要等待一段刷新的时间。为此，一般不采用每次调用后台的方式，而是一次性将分类结构中的数据全部读取出来并写入数组，然后根据用户的操作需求，用JavaScript来控制节点的呈现。这样虽然解决了响应速度慢、需要刷新页面的问题，并且避免向服务器频繁发送请求，但是如果用户不对分类树进行操作，或者只对分类树中的一部分数据进行操作，那么读取的数据就会成为垃圾资源。 3．自动更新页面 在Web应用中有很多数据变化十分迅速，如股市、天气预报等。在Ajax技术出现之前，用户为了及时了解相关的内容必须不断手动刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能。这种做法显然可以达到目的，但如果有一段时间网页内容没有发生任何变化，用户并不知道，仍然不断地刷新页面，或用户手动刷新太久失去了耐心，放弃刷新页面，很有可能在此时有新消息出现，这样就错过了得知消息的机会。 【例8.2】DWR框架应用。 开发一个使用DWR的Java EE项目，步骤如下。 ① 创建Java EE项目，命名为AjaxDwr。 ② 添加DWR的Jar包。 ③ 修改项目的web.xml文件，添加Servlet映射。 在项目的web.xml文件中加入下面的代码。 ④ 创建dwr.xml文件。 在项目的WEB-INF文件夹下创建dwr.xml部署描述文件，其代码如下： !DOCTYPE dwr PUBLIC -//GetAhead Limited//DTD Direct Web Remoting 1.0//EN http://www.getahead.ltd.uk/dwr/dwr10.dtd dwr allow create creator=new javascript=AjaxDate param name=class value=java.util.Date/ /create /allow /dwr 该配置还可以在create元素下加入include标记，指明要公开给JavaScript的方法。例如加入： include method=toString 这表明公开Date的toString方法。 ⑤ 使用JavaScript远程调用Java类方法。 编写index.jsp文件如下： %@ page language=java pageEncoding=UTF-8% html head titleDWR应用/title script language=javascript src=dwr/interface/AjaxDate.js/script script language=javascript src=dwr/engine.js/script script language=javascript src=dwr/util.js/script script language=javascript function doTest() { AjaxDate.toString(load); } !--获取当前时间 -- function load(data) { window.alert(现在时间是：+data); } /script /head body input type=button value=查询现在时间 onClick=doTest() /body /html ⑥ 部署运行。 部署运行，单击【查询现在时间】按钮，看到如图8.6所示的界面。 8.1 Ajax概述 8.2 JavaScript基础 8.3 Ajax基础应用 8.4 开源Aj