如何在GWT中使用XMLHttpRequest?

had*_*ifi 5 java gwt gwt-elemental gwt-2.8 gwt-jsinterop

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

Mar*_*ski 10

你没有提到你使用的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搜索,您需要登录,在其他情况下,您会看到"哇那里!你已经触发了滥用等等......")

其中一个结果将引导您进入一个非常有趣的项目(您现在可以预览未来GWT):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.所以这最终是你问题的答案:"如何使用它?" :-)

来自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.Promises和Fetch由Elemental2处理.然后,您可以像在Mozilla的示例中一样,或多或少地使用Java代码中的它.

阅读更多相关信息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;
Run Code Online (Sandbox Code Playgroud)

然后在你的代码中使用:

    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;
            });
Run Code Online (Sandbox Code Playgroud)

结果你应该能够看到这样的东西:

{"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"}}
Run Code Online (Sandbox Code Playgroud)

您可以使用名为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/ JsInteropapproach.