java - 如何在GWT中使用XMLHttpRequest？

Question

XMLHttpRequest是从GWT客户端进行HTTP调用的替代方法，它可以控制请求/响应的所有方面。但是如何使用呢？
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，当前使用gwt-user技术和提到的JsInterop将“旧” 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搜索，您需要登录，否则，您将看到“哇!您触发了滥用等等……”)
结果之一将带您进入一个非常有趣的项目(您现在可以预览 future 的GWT):
https://github.com/gwtproject/gwt-http。它是
旧版com.google.gwt.http.HTTP GWT模块的面向 future 的端口。这将有助于将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，即使基于某些 native JavaScript示例，您也应该能够实现您的东西。请考虑新的GWT，例如关于类型安全的JavaScript(此外，性能非常好且经过优化)。使用JsInterop可以创建绑定(bind)，因此它类似于TypeScript的绑定(bind)。因此，实际上，您可以直接处理浏览器的API，而无需任何GWT特定的内容。
图书馆？更多示例...？
处理XMLHttpRequest有点低级。
您也可以使用该库。 Github搜索结果之一将带您进入该存储库:https://github.com/ibaca/autorest-streaming-example，这是有趣的REST库的示例:https://github.com/intendia-oss/autorest。一种现代的，响应式(Reactive)的，可与Observables，RxJava等一起使用。
该库使用了JsInterop，并且也迁移到了Elemental2，这使得GWT3/J2CL可以使用，请参见更改:https://github.com/intendia-oss/autorest/commit/58516802cd42134544e6e3787207b5431fae94b5。
通过我为您提供的Github搜索查询，现在您可以找到XMLHttpRequest的更多代码示例。因此，请看一下并找到最能满足您需求的产品。
一种替代方法是使用框架，例如RedHat的Errai:http://erraiframework.org/。它可以帮助您以不同的抽象级别处理许多问题。
我想现在您有一些学习引用。
另一方面是2018年，为什么不提取API？
考虑现代Web应用程序时，我宁愿考虑使用Fetch API而不是XMLHttpRequest。现在，所有现代浏览器都 native 实现fetch()函数。那不是解决问题的最好方法吗？fetch()是基于Promise的机制，可让您发出类似于XMLHttpRequest的网络请求。 Promise和Fetch由Elemental2处理。然后，您可以或多或少地从Java代码中使用它，就像在Mozilla的示例中一样。
在此处阅读有关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":"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对象。如果您有兴趣，请在这里找到一些信息: https://stackoverflow.com/a/50565283/5394086。
不推荐的方法
如果您不幸地更喜欢使用旧的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方法一起使用。