如何在 GWT 中使用 XMLHttpRequest？

2024-01-16

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

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

Elemental2 是正确的选择

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

如果您考虑面向未来的实施（意识到GWT3/J2CL新方法），请不要使用遗留的 GWT 东西。这意味着请使用elemental2.dom.XMLHttpRequest代替com.google.gwt.xhr.client.XMLHttpRequest（你提到的那个）。请不要使用gwt-user如果可能的话，依赖项，因为它将被弃用（如果还没有）。

The Elemental2是一个开源项目，可以在这里找到：https://github.com/google/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 http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJsInterop.html

Examples

请找一个例子XMLHttpRequest在本文中：http://www.g-widgets.com/2016/09/09/gwt-http-requests-alternatives/ http://www.g-widgets.com/2016/09/09/gwt-http-requests-alternatives/

如果您寻找示例，一个好方法是在 Github 网站上搜索：.

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

其中一个结果将引导您进入非常有趣的项目（您可以预览未来GWT now): https://github.com/gwtproject/gwt-http https://github.com/gwtproject/gwt-http。这是传统的面向未来的端口com.google.gwt.http.HTTPGWT 模块。它将有助于将 GWT2.x 项目迁移到 GWT3.x。

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

额外的例子来源XMLHttpRequest (using Elemental2）来自要点：。这可能更适合开始，因为它们简短而清晰。

元素2是什么？

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

图书馆？更多例子...？

处理XMLHttpRequest就是水平有点低。

您还可以使用该图书馆。 Github 搜索结果之一将引导您访问此存储库：https://github.com/ibaca/autorest-streaming-example https://github.com/ibaca/autorest-streaming-example这是一个有趣的 REST 库的示例：https://github.com/intendia-oss/autorest https://github.com/intendia-oss/autorest。一种现代的、反应式的，可以与 Observables、RxJava 等一起使用。这个库使用JsInterop并且也迁移到Elemental2是什么让它GWT3/J2CL准备好了，请查看更改：https://github.com/intendia-oss/autorest/commit/58516802cd42134544e6e3787207b5431fae94b5 https://github.com/intendia-oss/autorest/commit/58516802cd42134544e6e3787207b5431fae94b5 .

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

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

我想现在你已经有了一些可供学习的参考资料。

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

当考虑现代 Web 应用程序时，我宁愿考虑Fetch API代替XMLHttpRequest。现在所有现代浏览器都实现了fetch()原生运行。那么这不是解决你的问题的最好方法吗？这fetch()是一种基于 Promise 的机制，允许您发出类似于XMLHttpRequest。 Promise 和 Fetch 由 Elemental2 处理。然后，您可以在 Java 代码中以与 Mozilla 示例中类似的方式或多或少地使用它。

阅读更多关于Fetch API here:

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

更重要的是，正如您所见，这并不是什么新鲜事。如果对于较旧的浏览器polyfill将模拟缺失的功能：https://github.com/github/fetch https://github.com/github/fetch.

如果要举例的话，我在 Github 上看不到太多：，但至少有一些东西。

The 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":"[email protected] /cdn-cgi/l/email-protection","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 https://stackoverflow.com/a/50565283/5394086 .

不推荐的方法

如果您遗憾地更喜欢使用旧的 GWT，所以 https://github.com/reinert/requestor（不幸的是，它已停产，并且 GWT 2.7 的开发也已停止，但对于这个 GWT 版本来说，它可能是最好的选择）。但再次请不要走这条路并使用 GWT >= 2.8.2Elemental2/JsInterop相反。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)