第十一章增强的Ajax门户：.ppt

1、第十一章:增强的Ajax Web门户,构建Ajax门户 实现登录框架 创建动态窗口 记住窗口的状态 修改库的代码,概述,门户为用户在单个页面上获得大量信息提供了一条容易的途径，用户无须到很多地址得到他们所需要的信息。 本章主要将Ajax功能加入门户中，用来改善用户体验，特别是用户如何登录系统以及系统如何记住用户的详细信息这两个方面。,11.1正在进化的门户,1、传统门户 2、拥有丰富的用户界面的门面,1、传统门户,2、拥有丰富的用户界面的门面,11.2使用Java的Ajax门户的架构,为了向多个用户提供高度可定制的Ajax门户，需要有客户端的代码、服务器端的代码和数据库。 客户端处理用户与窗口

2、的交互，如拖、放和使用Ajax向服务器发送等。 服务器要处理用户的会话，将数据传输会客户端，并且与数据库交互。 数据库在一张表中保存用户的登录名和密码，在另一张表中保存门户中窗口的元数据。,架构,初始登录：根据数据库验证用户的身份信息。 与窗口进行动态交互： 与DHTML元素交互，将数据返回给客户端。,11.3 Ajax登录,需要完成的第一个操作是访问门户的登录过程。为了完成这个工作，创建数据库表、用来处理请求的服务器代码，以及获取来自用户的登录信息并且处理请求的客户端代码。 第一是在数据库中设计用户表。,11.3.1 用户表,11.3.2 服务器端的代码-Java实现,在用户登录时，客户端的

3、代码向服务器发送一个请求，在请求中传递用户的身份信息。 服务器端截取这个请求，并确定发送到服务器的身份信息是否正确，如果身份正确，就开始创建用户窗口，如果用户不正确，就给客户端页面发回一个出错信息。,因为是采用Java进行开发，所以使用一个Servlet过滤器来保护所有与服务器的交互。 过滤器就是可以分配到一个或多个资源上的一段逻辑，以便在请求到达目的Servlet之前能够改变这个请求的处理流程。 代码见LoginFilter.java User.java,11.3.3登录端登陆框架,第一部分：可视化部分：用户可以查看并与之交互。 第二部分：Ajax或JavaScript代码，用来发送到服务器

4、，并且处理服务器的响应。 eval():将传递给它的字符串作为JavaScript来执行。,1 HTML布局 2、JavaScript登录代码,见Portal.htm,11.4实现DHTML窗口,Ajax门户又一个丰富的用户界面，允许用户将窗口的大小设置为想要的宽度和高度。当用户改变了这些设置时，可以使用Ajax与服务器进行交互，将用户的设置作为数值保存在数据库中。 为了实现这个功能，需要开发数据库保存窗口的属性，如hight,width,position. 服务器端的代码需要者受这些窗口的属性值并更新数据库。,11.4.1门户窗口的数据库,在数据表中每一行记录了用户拥有的门户中的每一个窗口，

5、当用户登录后，从这张数据表中获取上次退出时的窗口大小和位置。每当用户作了一些改动，这些数值都会更新，这样在用户以后再次访问时还能看到相同的布局。,11.4.2门户窗口的服务器端代码,假设登录请求已经通过了安全过滤器，下一步就是为已经通过身份验证的用户检索门户窗口的列表，并且发送回JavaScript高速浏览器需要显示什么，此处定义一个PortalWindow对象，来表示数据库中的一行记录。 见PortalWindow.java,出了获取方法，还要为对象提供设置方法，因为作为对用户事件作出的响应，需要动态更新这些对象。 用户登录时请求的URL，映射到一个Serlet，这个Serlet会为用户检索

6、所有的门户窗口，并发送回JavaScript指令。 如SelectServlet.java,11.4.3添加外部的Js库,使用JSWindow.js文件，该文件中包含了生成窗口中的元素所需的全部的JavaScript DOM方法，该库还将一些事件处理函数应用在窗口对象上，以便能够使用拖放功能。 见AJAXWindow.js AJAXWindow.CSS,11.5添加Ajax自动保存功能,使用Ajax可以实现一种自动保存功能，该功能可以由任意事件来触发，而用户完全不知道发生了什么事情。通常用户不用点击按钮来强制发送一个到服务器的回送。 此处使用结束拖拽的onmouseup事件和改变窗口大小事件来

7、触发自动保存,1、为加入Ajax功能修改DHTML,document.onmouseup = function() bDrag = false; bResize = false; intLastX = -1; document.body.style.cursor = default; if(elemWin ,2、获得活动元素的属性,用户移动了元素或改变了元素大小之后，必须使用新的参数来更新服务器的参数。,11.5.2自动保存信息到数据库,1、客户端：静悄悄的发送请求,2、服务器：从客户端收集信息,从表单提交中提取数值，并根据这些数值执行SQL查询，并且更新数据库中的记录来保存新信息。见UpdateServlet.java,Ajax书籍推荐,1、Ajax模式与最佳实践 2、征服AjaxDojo、Prototype、 script.aculo.us框架解析与实例 3、 Ajax实战：实例详解,后续课程,1、