一、Ajax简介
Adaptive Path公司的Jesse James Garrett这样定义Ajax:
Ajax不是一种技术。实际上,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
1.基于CSS标准的表示;
2.使用Document Object Model进行动态显示和交互;
3.使用XMLHttpRequest与服务器进行异步通信;
4.使用JavaScript绑定一切。
Ajax= Asynchronous JavaScript + XML
二、常用的几种Ajax框架
1.DWR ----
http://getahead.ltd.uk/dwr/ 2.JSon-Rpc ----
http://oss.metaparadigm.com/jsonrpc/ 3.echo2 ----
http://www.nextapp.com/platform/echo2/echo/ 4.backbase ----
http://www.backbase.com 右边网址有具体的说明:
http://www.51cto.com/html/2005/1222/15373.htm三、DWR使用说明。
示例:在页面中做个进度条,点击“install”按钮,进度条开始递增。进度数据是从后台获取。
1.配置DWR环境。
在Eclipse中新建一个Web Project(MyEclipse\J2ee Projects\Web Project),引入dwr-0.9.2b.jar包,修改WEB-INF\web.xml文件,
配置dwr-invoker servlet。如下:
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>uk.ltd.getahead.dwr.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>
2.编写递增类Progress。此类只有一个方法getProgress,获取递增的数据。如下:
package dwr.sample;
import java.io.BufferedReader;
import java.io.FileReader;
public class Progress {
public int getProgress(int nowProgress){
int nowValue=nowProgress+1;
return nowValue;
}
}
3.配置dwr.xml文件。此文件和web.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="ProgressBar" >
<param name="class" value="dwr.sample.Progress"/>
<include method="getProgress"/>
</create>
</allow>
</dwr>
4.编写index.htm文件。
a、引入js文件。首先引入dwr自己的两个js文件:
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
在dwr.xml中我们配置了一个名为"ProgressBar"的create 。dwr会在dwr/interface下产生一个ProgressBar.js文件。
在ProgressBar.js文件中,有一个javascript对象:ProgressBar,ProgressBar对象完成了和后台javabean:dwr
.sample.Progress的匹配。引入ProgressBar.js文件:
<script src='dwr/interface/ProgressBar.js'></script>
b. 编写显示进度的HTML文本:
<TABLE style="width:700;height="50" border="1" >
<TR>
<td>
<TABLE border="0" style="width:0%;height:100%" id="ProgressBar">
<TR>
<td bgcolor="#000099"> </td>
</TR>
</TABLE>
</td>
</tr>
</TABLE>
<br>
<!--点击Install,进度条开始跑动 -->
<input type="button" value="Install" onclick="doProgress()">
c. 编写doProgress函数
function doProgress(){
//获取当前进度条的值,按百分比计算
var width=$("ProgressBar").style.width;
//去掉进度条值后面的"%"
var scaleWidth=width.substring(0,width.length-1);
//当进度条值为100的时候,停止跑动
if(scaleWidth!=100){
//调用ProgressBar.js中的ProgressBar.getProgress函数
ProgressBar.getProgress(scaleWidth,updateProgress);
//说明:javabean:Progress方法getProgress,其实它只有一个输入参数,一个返回参数。而javascript的ProgressBar.getProgress方法有两个参数。dwr在mapping方法的时候,对于返回值,它采用的是回调函数的方式。所以对于ProgressBar.getProgress方法的第二个参数是一个函数指针。这里是updateProgress函数。
}
}
function updateProgress(progress){
//设置进度条的值
$("ProgressBar").style.width=progress+"%";
//进度条继续跑动
doProgress();
}