一 Ajax原理
Ajax通过其核心引擎（XMLHttpRequest）实现了浏览器客户端和服务器的异步通信功能，主要原理参考下图
（0）打开浏览器网页
（1）在浏览过程中触发事件（如：鼠标单击事件、注册时用户名输入框失去焦点事件等等）
（2）事件调用对应的JavaScript函数——ajaxfunc(){}
（3）函数中，创建并Ajax核心处理对象XMLHttpRequest对象
（4）调用了XMLHttpRequest对象的方法发送了异步请求到服务器
（5）异步请求发出——request
（6）服务器根据用户请求的url地址，根据web.xml中<servlet-mapping><servlet>的配置找到对应的servlet处理类
（7）servlet调用底层的javaBean进行详细业务的处理
（8）底层处理方法返回处理结果
（9）服务器将请求结果封装到响应response中
（10）服务器返回请求结果到浏览器
（11）根据服务器返回的处理结果，XMLHttpRequest接受数据，并调用，使用DOM动态生成具体的数据添加到当前网页中
可以看到，Ajax技术完成了浏览器客户端的异步请求的发送，在一定程度上提升了用户的感知和网页数据的健全性能
但是对于程序猿们来说，这样的实现方法不但麻烦，而且限制颇多
实现一个Ajax的异步请求，需要在web.xml中配置对应的请求映射关系，还要单独新建处理类的处理方法，在一定程度上使得项目部署的整齐性得到了考研，对于新手来说，这简直就是一种折磨，既然浏览器和服务器要进行这样的异步数据交互，为什么不能在JavaScript中可以直接调用任何一个Java类的方法来处理呢？何必要针对一个功能来的这么麻烦呢？
好吧，程序猿们是一群懒的不像话，但是又非常规范整齐并用自己的聪明才智让自己变的更懒的人，Ajax这样复杂的实现，我们写一次就够了，剩下的，就交给我们简单的操作吧。在JavaScript中直接调用Java中的方法——DWR应运而生
二Ajax升级——DWRDWR——WEB远程调用框架
三什么是DWR使用DWR之后，可以，异常处理，跨站请求伪造保护等等功能，可以和主流的框架（如Spring）整合等等特性
DWR可以根据主要的要调用的Java类动态生成JavaScript函数，在JavaScript中调用Java类的方法可以像调用JavaScript自身的方法一样方便
<servlet> <servlet-name>dwr_invoke</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr_invoke</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPEdwr PUBLIC "-//GetAheadLimited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"> <dwr> </dwr>
（1）在项目中创建普通的java类——AjaxService.java
package com.phome; public class HelloDWR { public String sayHello() { return "hello dwr!"; } }
（2）配置dwr.xml文件，在dwr.xml中的dwr节点中，插入如下的配置
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd"> <dwr> <allow> <!-- javascript属性名称，规范和要调用的Java类的名称一致 --> <!-- creator属性new，表示每次使用这个类时，new一个新的实例对象？ --> <create creator="new" javascript="HelloDWR"> <!-- name属性class表示当前参数是一个java类，value属性指定java类的全名称 --> <param value="com.phome.HelloDWR"></param> <!-- 指定客户端端可以调用的方法 --> <!--<include method=""/> --> <!-- 指定客户端不能调用的方法,和include互斥 --> <!-- <exclude method=""/> --> </create> </allow> </dwr>
（3）视图页面
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"http://www.xuebuyuan.com/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link type="text/css" href="styles.css"> --> <!-- 使用dwr框架，必须引入如下三个js文件 --> <script type="text/javascript" src="dwr/util.js"></script> <script type="text/javascript" src="dwr/engine.js"></script> <script type="text/javascript" src="dwr/interface/HelloDWR.js"></script> <script type="text/javascript"> function getInfo() { // 直接使用[java类名.方法名()]调用java类的某个方法，参数中指定方法调用完成后，要执行javascript函数 HelloDWR.sayHello(callback); } // 被指定的要调用的函数，参数data表示服务器返回的数据 function callback(data) { alert(data); document.getElementById("info").value = data; } </script> </head> <body> <input type="button" value="getinfo" /> 服务器返回的数据： <input type="text"/> </body> </html>
七 一个简单的注册账号是否可用的验证的实现
相关文章
精彩导读
热门资讯
关注我们
