使用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 
}