为了使用户能更清楚地理解用GWT开发Ajax应用与用传统的Javascript开发Ajax应用的不同，文章的这一部分将简要介绍如何利用Javascript对象进行Ajax应用的开发。
大家都知道Ajax技术中的一个核心对象是XMLHttpRequest对象，这个对象支持异步请求，所谓异步请求既是当客户端发送一个请求到服务器的时候，客户端不必一直等待服务器的响应。这样就不会造成整个页面的刷新，给用户带来更好的体验。而当服务器端响应返回时，客户端利用一个Javascript函数对返回值进行处理，以更新页面上的部分元素的值。
由于在IE和其他浏览器上声称XMLHttpRequest对象的方法不一样，所以我们用Javascript创建XMLHttpRequest对象的时候必须区分不同的浏览器。创建一个XMLHttpRequest对象的方法如清单2 中的代码所示。
清单2：创建XMLHttpRequest对象
1 function createObject(){
2 try {
3 xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
4 } catch (e1) {
5 try {
6 xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
7 } catch (e2) {
8 xmlHttpRequest = false;
9 }
10 }
11 if (!xmlHttpRequest) {
12 xmlHttpRequest = new XMLHttpRequest();
13 }
14 return xmlHttpRequest;
16 }
|
在创建好XMLHttpRequest对象之后，来看一下如何与server端进行异步的交互。清单3中列出了与服务器段进行交互的代码
清单3：与服务器端进行交互
1 function ajaxSample() {
2 var xmlHttpRequest = createObject();
3 var url = "/sampleServlet?userName=Jason";
4 xmlHttpRequest.open("GET", url, true);
5 xmlHttpRequest.onreadystatechange = updatePage;
6 xmlHttpRequest.send(null);
7 }
|
这段代码演示了如何与服务器端进行交互的过程。程序的第2行首先获得一个XMLHttpRequest对象，程序的第三行指定了服务器端响应客户端的请求的地址。程序的第4行利用XMLHttpRequest对象打开一个连接，第一个参数指定用GET方法传递参数，第二个参数指定了接受请求的URL，在我们的例子中是一个Servlet，最后一个参数设置成true意味着将要发出的请求是一个异步的请求。程序的第5行指定了回调函数，也就是当服务器端返回结果后执行哪个Javascript函数。
这一部分对如何利用Javascript进行Ajax开发作了一个简要的介绍，下面我们将详细介绍如何利用GWT进行Ajax应用的开发。
  |
在文章的第二部分我们已经掌握了如何利用GWT创建一个工程并在工程里添加一个GWT应用程序，同样我们这一部分也需要创建一个GWT的工程，并添加一个GWT应用程序，由于默认创建的GWT程序不含有Server端的示例代码，我们必须手工加进去。我们创建好的工程GWTSample如图七所示。我们将要介绍的实例主要功能是采用异步通信的方式从服务器端取出一个字符串显示在HTML页面上。这个例子虽然简单，但却包含了如何利用GWT进行Ajax开发的主要流程。
图七：GWTSample工程结构
大家注意到我们这个工程里面有个com.sample.myProject.server包，这个包里面包含有运行在服务器端的代码。我们从客户端发送的请求也是发送到这个包里面的一个Servlet上去的。
为了进行异步调用，在Client端必须定义一个继承自接口RemoteService的接口，在我们的这个例子中，我们定义了接口SampleService，SampleService的代码如清单4所示。
1 package com.sample.myProject.client;
2 import com.google.gwt.user.client.rpc.RemoteService;
3 public interface SampleService extends RemoteService{
4 //The implementation of this method is used to return a string
5 String getString();
6 }
|
大家注意到这个接口继承自RemoteService，并且声明了一个方法getString();，这个方法会在服务器端的代码中实现。当然，大家可能现在已经意识到，这里声明的方法就是我们采用异步调用方式所能够调用的方法。
在声明完这个接口之后，我们还必须声明另外一个异步调用接口，在我们的例子中是接口SampleServiceAsync，这个接口里声明的方法名称必须与SampleService里面的相同，但是多个一个类型为AsyncCallback的参数，接口SampleServiceAsync的代码清单如清单5所示：
清单5：SampleServiceAsync代码清单
1 package com.sample.myProject.client;
2 import com.google.gwt.user.client.rpc.AsyncCallback;
3 public interface SampleServiceAsync {
4 void getString(AsyncCallback callback);
5 }
|
在客户端定义完接口之后，我们必须在服务器端实现这个接口，在我们的例子中，类SampleServiceImpl实现了接口SampleService，同时你也会注意到SampleServiceImpl也继承了类RemoteServiceServlet，而RemoteServiceServlet是HttpServlet的一个子类，这样我们的客户端的请求就可以提交到Servlet SampleServiceImpl上面。类SampleServiceImpl的代码清单如清单6所示：
清单6：SampleServiceImpl代码清单
1 package com.sample.myProject.server;
2 import com.google.gwt.user.server.rpc.RemoteServiceServlet;
3 import com.sample.myProject.client.SampleService;
4 public class SampleServiceImpl extends RemoteServiceServlet implements
5 SampleService {
6 public String getString() {
7 return "This string is from server";
8 }
9 }
|
最后我们来看一下类DemoClient，这个类和我们在第二部分创建的工程myProject中的类DemoClient是同一个类型的。只不过在我们这个工程中我们使用它来进行向server端的异步调用。清单7列出了类DemoClient的代码。
清单7：DemoClient代码清单
1 package com.sample.myProject.client;
2 import com.google.gwt.core.client.EntryPoint;
3 import com.google.gwt.core.client.GWT;
4 import com.google.gwt.user.client.rpc.AsyncCallback;
5 import com.google.gwt.user.client.rpc.ServiceDefTarget;
6 import com.google.gwt.user.client.ui.Button;
7 import com.google.gwt.user.client.ui.ClickListener;
8 import com.google.gwt.user.client.ui.Label;
9 import com.google.gwt.user.client.ui.RootPanel;
10 import com.google.gwt.user.client.ui.Widget;
/**
* This class is used to demostrate hwo to
* interact with the server client in asynchronized
* way
*/
11 public class DemoClient implements EntryPoint {
12 public void onModuleLoad() {
13 final SampleServiceAsync sampleService = (SampleServiceAsync)
14 GWT.create(SampleService.class);
15 ServiceDefTarget target = (ServiceDefTarget)sampleService;
16 String staticResponseURL = GWT.getModuleBaseURL();
17 staticResponseURL += "/getStringService";
18 target.setServiceEntryPoint(staticResponseURL);
19
20 final Label label = new Label();
21 final Button button = new Button("Get String");
22 button.addClickListener(new ClickListener() {
23 public void onClick(Widget sender) {
24 sampleService.getString(new AsyncCallback() {
25 public void onSuccess(Object result) {
26 label.setText((String) result);
27 }
28 public void onFailure(Throwable caught) {
29 label.setText(caught.getMessage());
30 }
31 });
32 }
33 });
34 RootPanel.get("1").add(button);
35 RootPanel.get("2").add(label);
36 }
37}
|
代码的第13行得到了一个实现了接口SampleServiceAsync的类的实例。第15行创建了一个ServiceDefTarget对象的一个实例，通过这个对象可以设置请求的目的地。程序的第18行设置了请求的目的地的URL，在我们的例子中是"/getStringService"，这个URL会在web.xml文件中被mapping到servlet SampleServiceImpl上。程序的22行到33行为我们添加的button设置了单击响应事件。在单击响应事件中调用sampleService的getString(AsyncCallback callback);方法。这个方法是用来进行异步的远程过程调用的(RPC).并且在实现接口AsyncCallback的代码中指定了回调函数，当远程过程调用成功后就执行onSuccess(Object result)函数，其中result中存放有从服务器端返回的结果.。在远程工程调用失败后就执行onFailure(Throwable caught)函数。程序的最后把Button组件和Label组件加到panel中。
现在我们已经完成了程序的开发，图八显示了我们程序的运行结果，在点击Button后，右边回打出一句话来，重要的是这句话是以异步的方式从服务器端取得的，不需要进行页面的刷新，怎么样，现在是不是也想用GWT进行Ajax应用开发了呢？
图八：RPC调用示例
|
本文主要对用 GWT 进行 Ajax 开发进行了比较详细的介绍，并通过与传统的Ajax开发方式进行比较，使读者能更清楚地理解它们之间的区别，最后我们可以看出用GWT进行Ajax开发可以使得程序员免受调试Javascript之苦，并且GWT自动处理了浏览器之间的兼容性问题，这些都会使得开发更加容易，快捷。因此，用GWT进行Ajax开发是一种比较好的方式。希望本文能为读者学习GWT进行Ajax的开发有所帮助。