如何在 GWT 中使用 XMLHttpRequest？

Question

XMLHttpRequest 是来自 GWT 客户端的 HTTP 调用的替代方法，允许控制 requests/responses 的所有方面。但是如何使用呢？ javadoc地址：http://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/class-use/XMLHttpRequest.html

Answer 1

您没有提到您使用的 GWT 版本，所以我假设是最新版本。这意味着 2.8.2 或更新版本。

Elemental2 是必经之路

正如上面评论中提到的，Elemental2是正确的方法。我稍微解释一下。

如果您考虑面向未来的实施（了解 GWT3/J2CL 新方法），请不要使用遗留的 GWT 内容。这意味着请使用 elemental2.dom.XMLHttpRequest 而不是 com.google.gwt.xhr.client.XMLHttpRequest （您提到的那个）。请尽可能不要使用 gwt-user 依赖项，因为它将被弃用（如果尚未弃用）。

Elemental2 是一个开源项目，可在此处获取：https://github.com/google/elemental2。它是“新 GWT”的基础库。为了更容易地将现有 GWT2.x 项目迁移到 GWT3.x，目前正在使用 JsInterop 技术将“旧”gwt-user 的一部分移植到新方法，并提到 Elemental2.所以绝对 Elemental2 是正确的选择。

一般的 Elemental2 和 JsInterop

关于新的 JsInterop 方法的规范还不是很丰富，但目前您至少会找到一些介绍：http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJsInterop.html

例子

请在本文中找到 XMLHttpRequest 的示例： http://www.g-widgets.com/2016/09/09/gwt-http-requests-alternatives/

如果您要查找示例，也可以通过以下方式在 Github 网站上进行搜索：https://github.com/search?q=elemental2.dom.XMLHttpRequest&type=Code.

（要使用 Github 搜索，您需要先登录，否则您会看到“哇哦！您触发了滥用等等......”）

其中一个结果将带您进入非常有趣的项目（您现在可以预览 GWT 的未来）： https://github.com/gwtproject/gwt-http。这是遗留 com.google.gwt.http.HTTP GWT 模块的面向未来的端口。这将有助于将 GWT2.x 项目迁移到 GWT3.x.

当您查看测试包时，您会发现一些示例：https://github.com/gwtproject/gwt-http/tree/master/src/test/java/org/gwtproject/http/client。所以这就是最终 您的问题 的答案：“如何使用它？” :-)

来自 Gist 的 XMLHttpRequest（使用 Elemental2）的额外示例 来源：https://gist.github.com/search?utf8=%E2%9C%93&q=elemental2.dom.XMLHttpRequest。这可能更适合作为开始，因为它们简短明了。

Elemental2 是什么？

Elemental2 为您提供了对本机浏览器 API 的类型检查访问权限。因此，如果您熟悉浏览器的 API，您应该能够实现您的东西，甚至可以基于一些本机 Java 脚本示例。请考虑像类型安全 JavaScript 这样的新 GWT（此外性能非常好且优化良好）。使用 JsInterop 可以创建绑定，因此它类似于 TypeScript 的绑定。所以实际上你有可能直接处理浏览器的 API，而不需要任何特定于 GWT 的东西。

图书馆？更多示例...?

对付XMLHttpRequest水平有点低

您还可以使用图书馆。 Github 个搜索结果之一会将您带到此存储库：https://github.com/ibaca/autorest-streaming-example which is an example for interesting REST library: https://github.com/intendia-oss/autorest。一个现代的和反应式的，与 Observables、RxJava 等一起工作。这个库使用 JsInterop 并且也迁移到 Elemental2 是什么让它 GWT3/J2CL 准备好了，请看变化：https://github.com/intendia-oss/autorest/commit/58516802cd42134544e6e3787207b5431fae94b5 .

通过我为您提供的 Github 搜索查询，您现在可以找到更多 XMLHttpRequest 的代码示例。所以请看看并找到最适合您的需求。

另一种方法是使用框架，例如来自 RedHat 的 Errai：http://erraiframework.org/。它可以帮助您在不同的抽象级别处理许多问题。

我想现在你有一些参考资料可以研究了。

另一方面，现在是 2018 年，为什么不使用 Fetch API？

在考虑现代 Web 应用程序时，我宁愿考虑 Fetch API 而不是 XMLHttpRequest。所有现代浏览器现在都在本机实现 fetch() 功能。这不是解决问题的最佳方法吗？ fetch() 是一种基于 Promise 的机制，允许您发出类似于 XMLHttpRequest 的网络请求。 Promises 和 Fetch 由 Elemental2 处理。然后你可以从你的 Java 代码中或多或少地使用它，就像在 Mozilla 的例子中一样。

在此处阅读有关 Fetch API 的更多信息：

此外，如您所见，这并不是什么新鲜事。如果关于较旧的浏览器，polyfill 将模拟缺少的功能：https://github.com/github/fetch.

关于示例，我在 Github 上看不到那么多： https://github.com/search?utf8=%E2%9C%93&q=elemental2.dom.DomGlobal+fetch&type=Code，但至少有些东西。

Fetch API 似乎是该问题的最新解决方案。

请使用 Elemental2 找到一个非常简单的 fetch() 示例。

导入部分：

import static elemental2.dom.DomGlobal.fetch;
import static elemental2.dom.DomGlobal.console;
import elemental2.dom.Response;

然后在你的代码中使用：

    fetch("https://randomuser.me/api/?gender=female&results=1")
            .then(Response::json)
            .then(data -> {
                console.log(Global.JSON.stringify(data));
                return null;
            }).
            catch_(error -> {
                console.log(error);
                return null;
            });

因此，您应该能够看到类似这样的内容：

{"results":[{"gender":"female","name":{"title":"mrs","first":"caroline","last":"coleman"},"location":{"street":"3703 new road","city":"swansea","state":"leicestershire","postcode":"ZH67 0YS","coordinates":{"latitude":"14.7870","longitude":"-107.8990"},"timezone":{"offset":"-6:00","description":"Central Time (US & Canada), Mexico City"}},"email":"caroline.coleman@example.com","login":{"uuid":"25357d90-cce4-4fe6-a3db-8ab77c0272ba","username":"smallpeacock582","password":"citizen","salt":"VX3s05Ah","md5":"84649cce1db8c6f2cbe33098221aa570","sha1":"005abf7d2ca0ff5b1a0bfd6dcee6d4860ef6e75d","sha256":"caadff0a16e27b0d9893aea483aedc7cf7c4707096c33a58acf44336bb2b54be"},"dob":{"date":"1978-03-14T15:47:16Z","age":40},"registered":{"date":"2013-08-10T19:09:41Z","age":5},"phone":"015396 74385","cell":"0726-723-103","id":{"name":"NINO","value":"JA 32 24 22 P"},"picture":{"large":"https://randomuser.me/api/portraits/women/45.jpg","medium":"https://randomuser.me/api/portraits/med/women/45.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/45.jpg"},"nat":"GB"}],"info":{"seed":"98f4f4a344470fbd","results":1,"page":1,"version":"1.2"}}

您可以使用称为 JsInterop DTO 的技术将结果进一步转换为 Java 对象。如果您有兴趣，请在此处查找一些信息： .

不推荐的方法

如果您遗憾地更喜欢使用旧的 GWT，所以 <= 2.7，那么我认为您可以使用类似的搜索查询在 Github 上搜索一些示例，但对于这个遗留的 com.google.gwt.xhr.client.XMLHttpRequest。在这种情况下，我还建议你不要做这么低级别的事情，而是使用像 https://github.com/reinert/requestor 这样的库（不幸的是，它已经停止并且在 GWT 2.7 上已经停止开发，但是对于这个 GWT 版本，它可能是最好的选择).但再次请不要走这条路，而是使用 GWT >= 2.8.2 和 Elemental2/JsInterop 方法。

如何在 GWT 中使用 XMLHttpRequest？

How to use XMLHttpRequest in GWT?

java

gwt

gwt-elemental

gwt-2.8

gwt-jsinterop