ajax与dwr
简介:
DWR是一个开源的类库,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码（javascript）使用运行在WEB服务器上的JAVA函数(远程服务),就像它就在浏览器里一样.
它包含两个主要的部分:
1、一个运行在服务器端的java servlet，它处理请求并向浏览器发回响应 (javaservlet类)
2、运行在浏览器端的javascript，它发送请求而且还能动态更新网页。 (jsp页面，里面包含js代码)
工作原理:
DWR 工作原理是通过动态把 Java 类生成为 Javascript。它的代码就像 Ajax 魔法一样，你感觉调用就像发 生在浏览器端，但是实际上代码调用发生在服务器端，DWR 负责数据的传递和转换。它的优点在于不需要任何的网页浏览器插件就能运行在网页上。
Java 从根本上讲是同步机制，然而 AJAX 却是异步的。所以你调用远程方法时，当数据已经从网络上返回 的时候，你要提供有反调 （callback） 功能的 DWR。
Hello World:
一、引入开发所依赖的jar包
dwr.jar，然后将它放在你 webapp 的 WEB-INF/lib 目录下
二、配置web.xml文件
<servlet>
<servlet-name>dwr-invoker</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-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
增加dwr.xml配置文件:
在 web.xml 的同一目录下，创建 dwr.xml，并且将要被调用的 java 类写入其中
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="service">
<param name="class" value="helloWorld.Service" />
</create>
</allow>
</dwr>
编写 service :
package helloWorld;
public class Service {
public String sayHello(String yourName) {
//可以是访问数据库的复杂代码
return "Hello World " + yourName;
}
}
Jsp中调用 :
一、引入js
<script type='text/javascript' src='js/util.js'></script>
<script type='text/javascript' src='js/engine.js'></script>
<script type='text/javascript' src='dwr/interface/service.js'>
二、页面中调用
<script type="text/javascript">
function firstDwr(){
service.sayHello("Jorwen",callBackHello);
}
function callBackHello(data){
alert(data);
}
</script>
<init>标签:
可以定义Creator 、Converter
<allow>标签 :
定义了 DWR 能够创建和转换的类
<allow>
<create creator="..." javascript="..." scope="...">
<param name="..." value="..." />
<auth method="..." role="..." />
<exclude method="..." />
<include method="..." />
</create>
...
</allow>
属性:
creator 创造器
常见的有：new spring 等
Javascript
在浏览器里给你创建的对象命名
scope
和定义在 servlet 的 scope 一样大的范围，它允许你指定哪个 bean 是可以获得的。选项可以是：application, session, request 和 page。
Param
被用来指定创造器的其他参数，每种构造器各有不同
属性:
include 和 exclude 元素
允许一个创造器去限制进入类的方法。一个创造器必须指定 include 列表或 exclude 列表之一。如果是 include 列表则暗示默认的访问策略是"拒绝"，include 中的每个方法就是允许访问的方法；如果是 exclude 列表则暗示默认的访问策略是"允许"，exclude 中的每个方法就是拒绝访问的方法
Converter转换器:
你不需要在 dwr.xml 中<allow>部分的<convert>中定义。它们默认支持。
所有主要的类型，boolean, int , double 等等。
包装类，Boolean, Integer 等等。
java.lang.String java.util.Date 和 java.sql.Times，java.sql.Timestamp。
数组(存放以上类型的)
集合类型 (List, Set, Map, Iterator 等等) (存放以上类型的)
DOM 对象(来自于 DOM, XOM, JDOM 和 DOM4J)
Bean和对象转换器:
BeanConverter 和 JavaBeans 规范
用于被 BeanConverter 转换的 Bean 必须符合 JavaBeans 的规范，有 getter 和 setter，setter 有一个参数，并且这个 参数的类型是 getter 的返回类型。setter 应该返回 void，getter 应该没有任何参数。setter 没有重载。 以上这些属于常识。就在 eclipse 里自动为每个属性添加 setter，getter 那种类型，如果你用的不是 JavaBean，那么你应该用 ObjectConverter.
<signatures>标签 :
DWR 使用反射机制在转换过程中找到它应该使用的类型。有时候类型的信息无法获得，在这种情况下你要 在此处用方法签名给予暗示。
回调处理:
简单的回调函数
Remote.getData（…,回调函数）
使用缩减格式
Remote.getData （…,function(str){alert(str);}）
调用元数据对象
Remote.getData(…, {
callback:function(str) { alert(str); }
});
常用选项索引:
Timeout
设定超时时长，单位 ms
errorHandler
当出了什么问题时的动作
Callback
调用成功以后的要执行的回调函数，应该只有一个参数：远程 调用得到的数据
exceptionHandler
远程调用失败的动作，一般是服务端异常或者数据转换问题。
AJAX历史:
Ajax 并不是一项新的技术，由dhtml css js xmlhttprequest 技术集成 ,该 项技术应用最早见于对新浪、搜狐等大网站上新闻、天气信息的抓取，主要就是我们说的新闻小偷，主要使用xmlhttprequest的数据读取功能。
AJAX前景非常乐观，可以提高系统性能，优化用户界面。方便与现有技术结合 ，实现RIA（富客户）功能。
ria rich Internet apllication
extjs
flex
silverlight
xmlhttpreqeust 在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0[3]的一部分。部分观察家认为，Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。
Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》（作者：Jesse James Garrett）一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。
Ajax概述
:
Ajax: 异步JavaScript和XML
特点：异步、JavaScript、XML
借助异步JavaScript实现浏览器与服务器之间的异步交互，无需重载整个页面，解析和处理XML文档
Ajax相关技术:
１、JavaScript
２、XHTML可扩展的超文本标记语言 (HTML)：是HTML向XML过渡语言。
３、CSS (层叠样式表)
４、DOM (文档对象模型)
５、XML (可扩展标记语言)extensible markup language
６、XSTL (可扩展的样式表转换语言)
７、XMLHttpRequest
dtd schema .dtd .xsd
<books>
<book>
<name>jsp</name>
<author>张三</author>
</book>
</books>
--------------------------
<书籍>
<书>
</书>
</书籍>
XMLHttpRequest对象:
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然很有必要理解这个对象的详细工作机制。
jquery (js)
extjs (ui)
dwr
javascript css 跨浏览器
属性:
onreadystatechange*指定当readyState属性改变时的事件处理句柄。只写
readyState 返回当前请求的状态，只读.
responseBody 将回应信息正文以unsigned byte数组形式返回.只读
responseStream以Ado Stream对象的形式返回响应信息。只读
responseText将响应信息作为字符串返回.只读responseXML将响应信息格式化为Xml Document对象并返回，只读
status返回当前请求的http状态码.只读
statusText 返回当前请求的响应行状态，只读
onreadystatechange:
指定当readyState属性改变时的事件处理句柄
语法：
oXMLHttpRequest.onreadystatechange = funcMyHandler;
说明：
oXMLHttpRequest是XMLHttpRequest 对象
funcMyHandler是用户自定义的处理函数
readyState:
返回XMLHTTP请求的当前状态
语法
lValue = oXMLHttpRequest.readyState;
变量，此属性只读，状态用长度为4的整型表示.定义如下：
0 (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
1 (初始化)对象已建立，尚未调用send方法
2 (发送数据)send方法已调用，但是当前的状态及http头未知
3 (数据传送中)已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 (完成)数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据
status :
返回当前请求的http状态码
语法
lValue = oXMLHttpRequest.status;
常见状态码：
200 OK
404 Not Found
方法:
abort取消当前请求
getAllResponseHeaders获取响应的所有http头
getResponseHeader从响应信息中获取指定的http头
open创建一个新的http请求，并指定此请求的方法、URL以及验证信息(用户名/密码)
send发送请求到http服务器并接收回应
setRequestHeader单独指定请求的某个http头
open :
创建一个新的http请求，并指定此请求的方法、URL以及验证信息
语法：
oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数：
1、bstrMethod
http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感。
2、bstrUrl
请求的URL地址，可以为绝对地址也可以为相对地址。
3、varAsync[可选]
布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数。
4、bstrUser[可选]
如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口。
5、bstrPassword[可选]
验证信息中的密码部分，如果用户名为空，则此值将被忽略。
send :
发送请求到http服务器并接收回应
语法
oXMLHttpRequest.send(varBody);
(varBody 欲通过此请求发送的数据。 )
