解析Google Web Toolkit开发Ajax(4)

.编译应用程序

在代码开发完成后，我们可以双击工程里面的DemoClient-compile.cmd批处理文件来将我们开发出来Java文件编译成Javascript和HTML。编译后的文件将存放在工程的根目录下面的www子目录中。

8.运行程序

编译好程序后，我们会发现生成了一个名字为DemoClient.html的HTML文件，双击这个文件，程序的运行结果如图六所示:



图六:程序运行结果

在这一部分，我们主要讨论了如何将UI组件添加到Web页面中，而这些组件如何与远程服务器进行异步的交互将在下面的章节中进行讨论。

用Javascript开发Ajax应用

为了使用户能更清楚地理解用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应用的开发。