如何在GWT中使用XMLHttpRequest? [英] How to use XMLHttpRequest in GWT?
问题描述
XMLHttpRequest是从GWT客户端进行HTTP调用的替代方法，并允许控制请求/响应的所有方面.但是如何使用呢? javadoc地址: http://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/class-use/XMLHttpRequest.html
XMLHttpRequest is an alternative for HTTP calls from GWT client side and allows the control over all aspects of requests/responses. But how to use it? javadoc address: http://www.gwtproject.org/javadoc/latest/com/google/gwt/xhr/client/class-use/XMLHttpRequest.html
推荐答案
您没有提到您使用的GWT版本，所以我假设是最新版本.表示2.8.2或更高版本.
You haven't mentioned what GWT version you use, so I assume the latest one. It means 2.8.2 or newer.
如上面的注释中所述，Elemental2是正确的方法.我会解释一下.
As it is mentioned in comments above, Elemental2 is the right way. I will explain it a bit.
如果您考虑的是面向未来的实现(意识到GWT3/J2CL新方法)，请不要使用旧版GWT东西.这意味着请使用elemental2.dom.XMLHttpRequest而不是com.google.gwt.xhr.client.XMLHttpRequest(您提到的那个).如果可能，请不要使用gwt-user依赖项，因为它会被弃用(如果尚未使用).
If you think about future-proof implementation (being aware of GWT3/J2CL new approach), please do not use legacy GWT stuff. It means please use elemental2.dom.XMLHttpRequest instead of com.google.gwt.xhr.client.XMLHttpRequest (the one mentioned by you). Please do not use gwt-user dependency if possible, as it will be deprecated (if it is not already).
Elemental2是一个开源项目，可在此处找到: https://github.com/google/elemental2 .它是新GWT"的基础库.为了将现有GWT2.x项目更容易地迁移到GWT3.x，旧"项目的一部分gwt-user当前正在使用JsInterop技术移植到新方法中，并提到了Elemental2.所以肯定要走Elemental2.
The Elemental2 is an opensource project available here: https://github.com/google/elemental2. It is kind of a base library for the "new GWT". For easier migration of existing GWT2.x projects to GWT3.x, a part of the "old" gwt-user is currently being ported to the new approach using JsInterop technique and mentioned Elemental2. So definitely Elemental2 is the way to go.
如果有关新的JsInterop方法，该规范还不够丰富，但是目前您至少会找到一些介绍:
The specification is not yet that rich if about the new JsInterop approach, but at the moment you will find some introduction at least: http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJsInterop.html
请在本文中找到XMLHttpRequest的示例:
http://www.g-widgets.com /2016/09/09/gwt-http-requests-alternatives/
Please find an example for XMLHttpRequest in this article:
http://www.g-widgets.com/2016/09/09/gwt-http-requests-alternatives/
如果您查找示例，那么一种好方法是通过以下方式在Github网站上进行搜索:
If you look for examples, also a good way is to search this on the Github site this way: 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.
One of the results will lead you to the very interesting project (you have the preview of the future GWT now):
https://github.com/gwtproject/gwt-http. It is
a future-proof port of the legacy com.google.gwt.http.HTTP GWT module. It will help to migrate GWT2.x projects to GWT3.x.
When you look to the test package, you will find some examples: https://github.com/gwtproject/gwt-http/tree/master/src/test/java/org/gwtproject/http/client . So this is finally the answer to your question: "how to use it?" :-)
Gist的XMLHttpRequest(使用Elemental2)的其他示例来源:
An additional examples source for XMLHttpRequest (using Elemental2) from Gist: https://gist.github.com/search?utf8=%E2%9C%93&q=elemental2.dom.XMLHttpRequest. This is probably even better for start, as they are short and clear.
Elemental2使您可以对本机浏览器的API进行类型检查访问.因此，如果您熟悉浏览器的API，即使基于某些本机JavaScript示例，您也应该能够实现您的东西.请考虑新的GWT，例如关于类型安全的JavaScript(此外，性能非常好且经过优化).使用JsInterop可以创建绑定，因此它与TypeScript的绑定类似.因此，实际上，您可以直接处理浏览器的API，而无需任何GWT特定的内容.
The Elemental2 gives you a type checked access to native browser's API. So if you are familiar with browser's API, you should be able to implement your stuff, even based on some native JavaScript example. Please think about the new GWT like about type safe JavaScript (in addition very performant and well optimized). With JsInterop you create bindings, so it is something similar to bindings for TypeScript. So in fact you have a possibility to deal directly with browser's API, without anything GWT specific.
用XMLHttpRequest进行交易有点低.
您还可以使用该库. Github搜索结果之一将带您到该存储库: https://github.com/ibaca/autorest-streaming-example ，它是有趣的REST库的示例: https://github. com/intendia-oss/autorest .一种现代的，反应式的，可与Observables，RxJava等一起使用.
该库使用JsInterop，并且也已迁移到Elemental2，使它成为GWT3/J2CL就绪的文件，请参见更改:
You have also a possibility to use the library. One of Github search results will lead you to this repository: https://github.com/ibaca/autorest-streaming-example which is an example for interesting REST library: https://github.com/intendia-oss/autorest. A modern and reactive one, works with Observables, RxJava and so on.
This library uses JsInterop and is also migrated to Elemental2 what makes it GWT3/J2CL ready, please see the change: https://github.com/intendia-oss/autorest/commit/58516802cd42134544e6e3787207b5431fae94b5 .
使用我为您提供的Github搜索查询，现在您可以找到XMLHttpRequest的更多代码示例.因此，请看一下并找到最能满足您需求的产品.
With the Github search query I provided you, now you are able to find even more code examples for XMLHttpRequest. So please just have a look and find the best one for your needs.
一种替代方法是使用框架，例如RedHat的Errai: http://erraiframework.org/.它可以帮助您以不同的抽象级别处理许多问题.
An alternative approach would be to use a framework, for instance Errai from RedHat: http://erraiframework.org/. It helps you to deal with many problems at a different abstraction level.
我认为您现在有一些学习参考.
I think now you have some references to study.
考虑现代Web应用程序时，我宁愿考虑使用Fetch API而不是XMLHttpRequest.现在，所有现代浏览器都本机实现fetch()功能.那不是解决问题的最好方法吗?
fetch()是基于Promise的机制，允许您发出与XMLHttpRequest类似的网络请求. Promise和Fetch由Elemental2处理.然后，您可以或多或少地从Java代码中使用它，就像在Mozilla的示例中一样.
When think about the modern web application, I would rather think about the Fetch API instead of XMLHttpRequest. All modern browsers now implement the fetch() function natively. Isn't it the best way for solving your issue then?
The fetch() is a Promise-based mechanism that allows you to make network requests similar to XMLHttpRequest. Promises and Fetch are handled by Elemental2. Then you can use it from your Java code more or less in similar way like in Mozilla's examples.
在此处了解有关Fetch API的更多信息:
Read more about the Fetch API here:
https://developers.google. com/web/updates/2015/03/introduction-to-fetch
https://codepen.io/aderaaij/post/提取数据
https://fetch.spec.whatwg.org/
此外，正如您所见，这并不是什么新鲜事物.
如果是关于较旧的浏览器，则polyfill将模拟缺少的功能: https://github.com/github/fetch .
What more, this is nothing new as you see.
If about the older browsers a polyfill will emulate the missing function: https://github.com/github/fetch.
如果有例子，我在Github上看不到太多: https://github .com/search?utf8 =％E2％9C％93& q = elemental2.dom.DomGlobal + fetch& type = Code ，但至少要包含一些内容.
If about examples, I don't see that much on Github: https://github.com/search?utf8=%E2%9C%93&q=elemental2.dom.DomGlobal+fetch&type=Code, but at least something.
Fetch API似乎是该问题的最新解决方案.
The Fetch API seems to be the most current solution to the problem.
请使用Elemental2找到一个非常简单的fetch()示例.
Please find a very simple fetch() example using Elemental2.
导入部分:
import static elemental2.dom.DomGlobal.fetch;
import static elemental2.dom.DomGlobal.console;
import elemental2.dom.Response;
然后在您的代码中使用:
Then use in your code:
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;
});
因此，您应该可以看到以下内容:
As a result you should be able to see something like this:
{"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 .
You can further convert the result to Java object using a technique called JsInterop DTOs. If you are interested, please find some information here: 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方法一起使用.
If you sadly prefer to use the old GWT, so <= 2.7, then I think you can search for some examples on Github using similar search query, but for this legacy com.google.gwt.xhr.client.XMLHttpRequest. I this case I would also suggest you to not do stuff so low level, but use a library like https://github.com/reinert/requestor (which is unfortunately discontinued and development has stopped on GWT 2.7, but for this GWT version it is probably the best choice). But again please do not go this way and use GWT >= 2.8.2 with Elemental2/JsInterop approach instead.
这篇关于如何在GWT中使用XMLHttpRequest?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
