如何在GWT中使用XMLHttpRequest？

Posted 2021-05-05

XMLHttpRequest是来自GWT客户端的HTTP调用的替代方案，允许控制请求/响应的所有方面。但是怎么用呢？ javadoc地址：http://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/class-use/XMLHttpRequest.html

答案

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

Elemental2 is the way to go

正如上面的评论中提到的，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，“旧”gwt-user的一部分目前正在使用JsInterop技术移植到新方法并提到Elemental2。所以绝对Elemental2是要走的路。

Elemental2 and JsInterop in general

关于新的JsInterop方法，规范还不够丰富，但目前你会发现至少有一些介绍：http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJsInterop.html

Examples

请在本文中找到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。这开始可能更好，因为它们很短且清晰。

What Elemental2 is?

Elemental2为您提供了对本机浏览器API的类型检查访问。因此，如果您熟悉浏览器的API，即使基于一些本机javascript示例，您也应该能够实现您的内容。请考虑新的GWT类似于类型安全的JavaScript（此外非常高效和优化）。使用JsInterop可以创建绑定，因此它类似于TypeScript的绑定。所以事实上你有可能直接处理浏览器的API，没有任何特定的GWT。

Libraries? More examples...?

处理XMLHttpRequest有点低。

您也可以使用该库。 Github搜索结果之一将引导您访问此存储库：https://github.com/ibaca/autorest-streaming-example，这是有趣的REST库的示例：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/。它可以帮助您在不同的抽象级别处理许多问题。

我想现在你有一些参考学习。

On the other hand it's 2018, so why not the Fetch API?

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

在这里阅读更多关于Fetch API的信息：

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
• https://developers.google.com/web/updates/2015/03/introduction-to-fetch
• https://codepen.io/aderaaij/post/fetching-data-with-fetch
• https://fetch.spec.whatwg.org/

更重要的是，这并不像你看到的那样新鲜。如果关于旧浏览器，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":"[e-mail]","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对象。如果您有兴趣，请在此处找到一些信息：https://stackoverflow.com/a/50565283/5394086。

Not recommended approach

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