如何在 GWT 中使用 XMLHttpRequest?

Posted

技术标签:

【中文标题】如何在 GWT 中使用 XMLHttpRequest?【英文标题】:How to use XMLHttpRequest in GWT? 【发布时间】:2018-08-28 12:23:05 【问题描述】:

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

【问题讨论】:

您使用哪个版本的 gwt?这是一个 Maven 项目吗? Elemental2 是要走的路 :) 【参考方案1】:

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

Elemental2 是要走的路

正如上面 cmets 中提到的,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 搜索,您需要先登录,否则您会看到“哇!您已经触发了滥用等等……”)

其中一个结果将引导您进入非常有趣的项目(您现在可以预览未来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,您应该能够实现您的东西,甚至基于一些原生 javascript 示例。请考虑一下新的 GWT,例如类型安全的 JavaScript(此外性能非常好且优化良好)。使用 JsInterop 创建绑定,因此它类似于 TypeScript 的绑定。所以实际上你有可能直接处理浏览器的 API,而不需要任何特定的 GWT。

库?更多示例...?

处理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/。它可以帮助您在不同的抽象级别处理许多问题。

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

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

在考虑现代 Web 应用程序时,我宁愿考虑 Fetch API 而不是 XMLHttpRequest。现在所有现代浏览器都原生实现了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://***.com/a/50565283/5394086。

不推荐的方法

如果您遗憾地更喜欢使用旧的 GWT,所以 https://github.com/reinert/requestor 这样的库(不幸的是,它已停止使用,并且 GWT 2.7 上的开发已经停止,但对于这个 GWT 版本,它可能是最好的选择)。但同样请不要这样做,而是使用 GWT >= 2.8.2 和 Elemental2/JsInterop 方法。

【讨论】:

我想添加 github.com/DominoKit/domino-rest 作为 elemental2 XmlHttpRequest 的简单包装器,GWT XmlHttpRequest 也已经为那些寻求轻松迁移的人移植了移植的库可以在这里找到github.com/rjeeb/gwt-xhr 只有一件事:从 v14 开始,在 Edge 中实现了 fetch API。旧版本的 Egde 或所有版本的 IE 都不支持 fetch API。 那么 polyfil 适合您。请查看上面的文本,其中的句子是:“...如果关于较旧的浏览器,polyfill 将模拟缺少的功能...”链接。 请注意,这个答案并不完全准确 - 请求者似乎再次处于积极开发中,大约 2 个月前,即 2021 年 12 月发布了 1.0.0-rc1。

以上是关于如何在 GWT 中使用 XMLHttpRequest?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 GWT 中获取最后一周的日期

如何在GWT中使用XMLHttpRequest?

如何在 GWT 中使用增量命令

如何在小工具中使用 GWT RequestFactory?

在 GWT 2.7 中使用 SuperDevMode 时如何获取完整的 StackTrace?

如何使用 GWT 的编辑器框架?