什么是 AJAX？

Web 应用程序的标准模型是这样的：您从服务器获得一个屏幕的文本和字段，您填写一些字段，当您单击一个按钮时，浏览器将您键入的数据发送到服务器（等待），服务器处理它（等待），并发送回一个答案（等待），您的浏览器显示该答案，然后循环重新开始。这是迄今为止 Web 应用程序最常见的操作方式，您必须习惯这些延迟。没有任何事情是立即发生的，因为每个需要来自服务器的数据的答案都需要一个往返过程。

AJAX（异步 JavaScript 和 XML）是一种技术，它允许 Web 应用程序在后台（异步地）与 Web 服务器通信，以与其交换（发送或接收）数据。这消除了在每次操作或用户点击后重新加载整个页面的要求。因此，使用 AJAX 提高了交互水平，消除了等待页面重新加载的时间，并实现了增强的功能。一个良好编程的应用程序会在您做其他事情时在后台发送请求，因此您不必盯着空白屏幕或旋转的沙漏光标。这是 AJAX 首字母缩略词的异步部分。

AJAX 首字母缩略词的下一部分是 JavaScript。JavaScript 允许 Web 页面包含一个程序，这个程序允许 Web 页面如前所述连接到服务器。然而，这不仅仅是拥有 JavaScript 的问题，还取决于它在浏览器中是如何实现的。Firefox 和 Internet Explorer 都提供 AJAX 访问，但存在一些差异，因此程序员在进行连接时必须考虑到这些差异。数据通常使用 XMLHttpRequest 检索，但其他技术也是可能的，例如使用 iframes。

最后，AJAX 首字母缩略词的最后一部分是 XML。XML 是一种标准的标记语言，用于共享和传递信息。正如我们所见，用于发出 Web 服务请求的 DOM API 的名称是 XMLHttpRequest，最有可能的是，最初的意图是使用 XML 作为在浏览器和服务器之间交换数据的协议。然而，AJAX 中的 X 和 XMLHttpRequest 中的 XML 都不意味着您必须使用 XML；可以使用任何数据协议，包括没有协议。

JSON（JavaScript 对象表示法）经常被使用；它比 XML 更轻量级，正如您可能从其名称中猜到的那样，它通常更适合 JavaScript。参见图 3 中的一些实际 JSON 代码；请记住，它不是为了让人类清楚易懂，而是为了紧凑且易于机器理解。

AJAX 包含了一些存在已有一段时间的基本技术，AJAX 术语本身是在 2005 年由 Jesse Garrett 创建的。GWT 使用 AJAX 允许客户端程序以完全透明的方式与服务器通信或在其上执行过程。当然，您也可以显式地使用 AJAX 来实现您可能有的任何特殊目的。

• Java 开发工具包 (JDK)，以便您可以编译和测试 Java 应用程序；还包括更多工具。

• Java 运行时环境 (JRE)，包括 Java 虚拟机 (JVM) 和生产和开发环境所需的所有类库。

• 一个开发环境——Google 自己的开发人员使用 Eclipse，因此您可能也想效仿。或者，您可以安装 GWT4NB 并进行一些调整和修改，并使用 NetBeans，另一个流行的开发环境。

• 当您开发应用程序时，GWT 在托管模式下运行，并提供一个 Web 浏览器（和一个嵌入式 Tomcat Web 服务器），这使您可以像最终用户看到的那样测试您的 Java 应用程序。请注意，您将能够使用您的开发套件的交互式调试功能，因此您可以忘记在 JavaScript 代码中放置 alert() 命令。

• 为了帮助您构建界面，有一个 Web 界面库，它允许您创建和使用 Web 浏览器小部件，例如标签、文本框、单选按钮等等。您将使用这些小部件进行 Java 编程，编译过程会将它们转换为等效的 HTML 小部件。

• 由于在客户端浏览器中运行的是 JavaScript，因此需要一个 Java 模拟库，它提供最常见的 Java 标准类的 JavaScript 等效实现。请注意，并非所有 Java 都可用，并且对您可以使用的类有所限制。如果您想使用不可用的类，您可能必须自己编写代码。截至 1.5 版本，GWT 涵盖了 JRE 的大部分内容。此外，截至 1.5 版本，GWT 支持使用 Java 5。

• 最后，为了部署您的应用程序，有一个 Java 到 JavaScript 的编译器（转换器），您将使用它来生成最终的 Web 代码。当然，您稍后需要将生成的代码、JavaScript、HTML 和 CSS 放在您的 Web 服务器上。

包

使用 GWT 需要学习几个包。最重要的包是

您可以在线找到有关这些包和其他包的信息，网址为 google-web-toolkit.googlecode.com/svn/javadoc/1.5/index.html。

列表 1. 项目必须手动创建，在 Eclipse 外部，然后导入到其中。

# cd
# md examplefiles
# cd examplefiles
# ~/bin/gwt/projectCreator -eclipse exampleproject
Created directory ~/examplefiles/src
Created directory ~/examplefiles/test
Created file ~/examplefiles/.project
Created file ~/examplefiles/.classpath

# ~/bin/gwt/applicationCreator -eclipse exampleproject \
       com.kereki.client.example
Created directory ~/examplefiles/src/com/kereki
Created directory ~/examplefiles/src/com/kereki/client
Created directory ~/examplefiles/src/com/kereki/public
Created file ~/examplefiles/src/com/kereki/example.gwt.xml
Created file ~/examplefiles/src/com/kereki/public/example.html
Created file ~/examplefiles/src/com/kereki/client/example.java
Created file ~/examplefiles/example.launch
Created file ~/examplefiles/example-shell
Created file ~/examplefiles/example-compile

同源策略

同源策略 (SOP) 是一种安全限制，它基本上阻止从特定来源加载的页面访问来自不同来源的页面。来源是指三元组：协议 + 主机 + 端口。在 http://www.mysite.com:80/some/path/to/a/page 中，协议是 http，主机是 www.myhost.com，端口是 80。SOP 将允许访问来自 http://www.mysite.com:80 的任何文档，但不允许访问 https://www.mysite.com:80/something（不同的协议）、http://dev.mysite.com:80/something（不同的主机）或 http://www.mysite.com:81/something（不同的端口）。

为什么这是一个好主意？如果没有它，来自特定来源的 JavaScript 可能可以访问来自另一个来源的数据并秘密地操纵它。这将是终极网络钓鱼。您可能正在查看一个合法的、有效的、真实的页面，但它可能受到第三方的监视。有了 SOP，您可以确定您正在查看的任何内容都是由真实来源发送的。不可能有来自其他来源的任何代码。

当然，对于 GWT 来说，这是一个有点麻烦的事情，因为它意味着客户端应用程序不能简单地连接到任何其他服务器或 Web 服务以从中获取数据。至少有两种方法可以解决这个问题：一种特殊的、更简单的方法，只允许获取 JSON 数据，或者一种更复杂的解决方案，这意味着编码服务器端代理。您的客户端调用代理，代理调用服务。这两种解决方案都在 Google Web Toolkit 应用程序 一书中进行了解释（请参阅“资源”）。在本文中，我们使用 JSON 方法，您可以在 www.gwtsite.com/code/webservices 找到源代码。

简单的 JSON 方法需要一个特殊的回调例程，这可能是一个障碍。然而，许多站点都实现了这一点，包括 Amazon、Digg、Flickr、GeoNames、Google、Yahoo! 和 YouTube，并且该方法正在流行，因此您很可能能够找到一个合适的服务。

列表 2. JSONRequest 类的源代码

package com.kereki.client;
public class JSONRequest {
    public static void get(String url,
                           JSONRequestHandler handler) {
        String callbackName = "JSONCallback"+handler.hashCode();
        get(url+callbackName, callbackName, handler);
    }

    public static void get(String url, String callbackName,
                           JSONRequestHandler handler) {
        createCallbackFunction(handler, callbackName);
        addScript(url);
    }

    public static native void addScript(String url) /*-{
        var scr = document.createElement("script");
        scr.setAttribute("language", "JavaScript");
        scr.setAttribute("src", url);
        document.getElementsByTagName("body")[0].appendChild(scr);
    }-*/;

    private native static void createCallbackFunction(
                                   JSONRequestHandler obj,
                                   String callbackName) /*-{
        tmpcallback = function(j) {
            obj.@com.kereki.client.JSONRequestHandler::
                onRequestComplete(
                    Lcom/google/gwt/core/client/JavaScriptObject;)(j);
        };
        eval( "window." + callbackName + "=tmpcallback" );
    }-*/;
}

请注意，最后两个方法是用 JavaScript 而不是 Java 编写的；JavaScript 代码写在 Java 注释中。JavaScript 中的特殊 @id... 语法用于从 JavaScript 访问 Java 方法和字段。当应用程序编译时，此语法由 GWT 转换为正确的 JavaScript。有关更多信息，请参阅 GWT 文档。

列表 3. JSONRequestHandler 类的源代码

package com.kereki.client;
import com.google.gwt.core.client.JavaScriptObject;
public interface JSONRequestHandler {
    public void onRequestComplete(JavaScriptObject json);
}

您可以在 www.gwtsite.com/code/webservices 找到此列表和前一个列表的代码。

列表 4. 主程序的源代码

package com.kereki.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.json.client.*;
import com.google.gwt.http.client.URL;
import com.kereki.client.JSONRequest;
import com.kereki.client.JSONRequestHandler;

public class example implements EntryPoint {
    public void onModuleLoad() {
        final TextBox tbSearchFor = new TextBox();

        final TextArea taJsonResult = new TextArea();
        taJsonResult.setCharacterWidth(80);
        taJsonResult.setVisibleLines(20);

        final HorizontalPanel hp1 = new HorizontalPanel();

        Button bGetNews = new Button("Get news!",
            new ClickListener() {
                public void onClick(Widget sender) {
                    JSONRequest.get(
                        "http://search.yahooapis.com/"+
                        "NewsSearchService/V1/newsSearch?"+
                        "appid=YahooDemo&query="+
                        URL.encode(tbSearchFor.getText())+
                        "&results=2&language=en"+
                        "&output=json&callback=",
                        new JSONRequestHandler() {
                            public void onRequestComplete(
                                    JavaScriptObject json) {
                                JSONObject jj= new JSONObject(json);
                                taJsonResult.setText(jj.toString());
                            };
                        }
                    );
                }
            });

        hp1.add(new Label("Search for:"));
        hp1.add(new HTML(" ",true));
        hp1.add(tbSearchFor);
        hp1.add(new HTML(" ",true));
        hp1.add(bGetNews);

        RootPanel.get().add(hp1);
        RootPanel.get().add(new HTML("<br>",true));
        RootPanel.get().add(taJsonResult);
    }
}

列表 4 中的代码显示了对单个服务的访问，但是很容易同时连接到多个来源并生成新闻混搭。

列表 5. 编译代码并将文件部署到您的服务器

# cd ~/examplefiles/
# sh ./example-compile
Output will be written into ./www/com.kereki.example
Copying all files found on public pathCompilation succeeded
# sudo cp -R ./www/com.kereki.example /srv/www/htdocs/

资源

Google Web Toolkit 应用程序，Ryan Dewsbury 著，Prentice-Hall，2008 年。

Google Web Toolkit for AJAX，Bruce Perry 著，PDF 版，O'Reilly，2006 年。

Google Web Toolkit Java AJAX 编程，Prabhakar Chaganti 著，Packt Publishing，2007 年。

Google Web Toolkit 解决方案：酷炫且有用的东西，David Geary 和 Rob Gordon 著，PDF 版，Prentice Hall，2007 年。

Google Web Toolkit 解决方案：更多酷炫且有用的东西，David Geary 和 Rob Gordon 著，Prentice Hall，2007 年。

Google Web Toolkit——消除 AJAX 的痛苦，Ed Burnett 著，PDF 版，The Pragmatic Bookshelf，2007 年。

GWT in Action：使用 Google Web Toolkit 轻松实现 AJAX，Robert Hanson 和 Adam Tacy 著，Manning，2007 年。

AJAX：Web 应用程序的新方法：www.adaptivepath.com/ideas/essays/archives/000385.php

AJAX：入门：developer.mozilla.org/en/docs/AJAX:Getting_Started

AJAX 教程：www.xul.fr/en-xml-ajax.html

Apache 2.0 开源许可证：code.google.com/webtoolkit/terms.html

Eclipse：www.eclipse.org

Google Web Toolkit：code.google.com/webtoolkit

GWT4NB，用于 GWT 与 NetBeans 协同工作的插件：https://gwt4nb.dev.java.net

Java SE（标准版）：java.sun.com/javase

Java 开发工具包 (JDK)：java.sun.com/javase/downloads/index.jsp

JSON：www.json.org

JSON：XML 的精简替代品：www.json.org/xml.html

NetBeans：www.netbeans.org

同源策略，来自维基百科：en.wikipedia.org/wiki/Same_origin_policy

Web 2.0，来自维基百科：en.wikipedia.org/wiki/Web_2

什么是 Web 2.0？，作者：Tim O'Reilly：www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

XML：www.xml.org