一、Ajax簡(jiǎn)介
Adaptive Path公司的Jesse James Garrett這樣定義Ajax：
Ajax不是一種技術(shù)。實(shí)際上，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：
1.基于CSS標(biāo)準(zhǔn)的表示；
2.使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；
3.使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；
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 右邊網(wǎng)址有具體的說(shuō)明：
http://www.51cto.com/html/2005/1222/15373.htm三、DWR使用說(shuō)明。
示例：在頁(yè)面中做個(gè)進(jìn)度條，點(diǎn)擊“install”按鈕，進(jìn)度條開(kāi)始遞增。進(jìn)度數(shù)據(jù)是從后臺(tái)獲取。
1.配置DWR環(huán)境。
在Eclipse中新建一個(gè)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.編寫(xiě)遞增類(lèi)Progress。此類(lèi)只有一個(gè)方法getProgress，獲取遞增的數(shù)據(jù)。如下：
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.編寫(xiě)index.htm文件。
a、引入js文件。首先引入dwr自己的兩個(gè)js文件：
<script src='dwr/engine.js'></script>
<script src='dwr/util.js'></script>
在dwr.xml中我們配置了一個(gè)名為"ProgressBar"的create 。dwr會(huì)在dwr/interface下產(chǎn)生一個(gè)ProgressBar.js文件。
在ProgressBar.js文件中，有一個(gè)javascript對(duì)象：ProgressBar，ProgressBar對(duì)象完成了和后臺(tái)javabean：dwr
.sample.Progress的匹配。引入ProgressBar.js文件：
<script src='dwr/interface/ProgressBar.js'></script>
b. 編寫(xiě)顯示進(jìn)度的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>
<!--點(diǎn)擊Install,進(jìn)度條開(kāi)始跑動(dòng) -->
<input type="button" value="Install" onclick="doProgress()">
c. 編寫(xiě)doProgress函數(shù)
function doProgress(){
//獲取當(dāng)前進(jìn)度條的值，按百分比計(jì)算
var width=$("ProgressBar").style.width;
//去掉進(jìn)度條值后面的"%"
var scaleWidth=width.substring(0,width.length-1);
//當(dāng)進(jìn)度條值為100的時(shí)候，停止跑動(dòng)
if(scaleWidth!=100){
//調(diào)用ProgressBar.js中的ProgressBar.getProgress函數(shù)
ProgressBar.getProgress(scaleWidth,updateProgress);
//說(shuō)明：javabean:Progress方法getProgress，其實(shí)它只有一個(gè)輸入?yún)?shù)，一個(gè)返回參數(shù)。而javascript的ProgressBar.getProgress方法有兩個(gè)參數(shù)。dwr在mapping方法的時(shí)候，對(duì)于返回值，它采用的是回調(diào)函數(shù)的方式。所以對(duì)于ProgressBar.getProgress方法的第二個(gè)參數(shù)是一個(gè)函數(shù)指針。這里是updateProgress函數(shù)?！?br /> }
}
function updateProgress(progress){
//設(shè)置進(jìn)度條的值
$("ProgressBar").style.width=progress+"%";
//進(jìn)度條繼續(xù)跑動(dòng)
doProgress();
}