javascript - 使用 JS 和 HTML 使用 Web 服务

Question

我希望创建一个客户端浏览器界面，它将利用Glosbe API处的词典网络服务。 。用户应该能够在输入组件中输入单词或短语并提交，而无需重新加载页面。返回的数据需要以可用的格式显示在页面上，以便他们能够找到并读取其含义。

我尝试通过 Netbeans 创建 Web 服务，但我不确定这是否是正确的方法。是不是像创建一个 HTML 页面并使用 javascript 调用 Glosbe 的 api 一样简单？

任何帮助将不胜感激。

Answer 1

您可以使用 JavaScript 中的 XMLHTTPRequest 来轮询 Web 服务。 XHR 对象非常适合允许您向页面发出请求或提交表单，而无需刷新页面。当发出请求时，可以异步完成，以允许页面继续处理其他事件，然后处理响应并更新 HTML。 Google 上有大量资源可以指导您实现 XHR 对象和正确的错误处理以及示例代码。

至于返回的数据以可用的格式显示，这需要在响应返回时由 JS 完成。您可以解析响应中所需的数据，并通过 JS 构建适当的 HTML 元素来更新您的 UI。

HTML
<输入类型='文本'id='单词'>
<input type='button' onclick='sendMessage()'>

JS

function sendMessage()
{
 var XHRrequest=new XMLHttpRequest();
 XHRrequest.onabort = function() {
 };
 XHRrequest.onloadend = function (evt) {
 };
 XHRrequest.onreadystatechange = function() {
  if (XHRrequest.readyState == 4 && XHRrequest.status == 200) {
   //parse XHRrequest.responseText for response and build object
   //this is where you update your UI with an HTML element
  }
  else if (XHRrequest.readyState == 4 && XHRrequest.status!=0) {
   console.log("Error: returned status code " + XHRrequest.status + " " + XHRrequest.statusText + "\r\n" + XHRrequest.responseText);
   //error handling for failed response
  }
 };
 XHRrequest.ontimeout = function() {
  alert("Error: event timed out");
 };
 XHRrequest.open("POST", WEBSERVICE_URL_HERE, true);
 XHRrequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 XHRrequest.send("word="+document.getElementById('word').value); \\request data goes here
}