使用JS和HTML使用Web服务

Question

我正在创建一个客户端浏览器界面，该界面将使用字典Web服务Glosbe API。用户应该能够在输入组件中输入一个词或一个词组并提交它，而无需重新加载页面。返回的数据需要以可用格式显示在页面上，以便他们能够查找和读取含义。

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

任何帮助将不胜感激。

Answer 1

您可以使用JavaScript中的XMLHTTPRequest来轮询Web服务。 XHR对象非常适合允许您向页面发出请求或提交表单而无需刷新页面。请求发出后，可以异步完成，以便页面可以继续处理其他事件，然后处理响应并更新HTML。谷歌上有大量的资源可以指导你实施一个XHR对象和适当的错误处理以及示例代码。只要返回的数据以可用的格式显示，当响应返回时，这将需要由JS完成。您可以解析所需数据的响应，并通过JS构建适当的HTML元素来更新您的UI。

HTML
< INPUT TYPE = '文本' ID = '字' >
<输入类型= '布通' 的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 
}