JS 및 HTML을 사용하여 웹 서비스 사용하기

Question

사전 웹 서비스 인 Glosbe API을 사용할 클라이언트 브라우저 인터페이스를 만들려고합니다. 사용자는 단어 또는 구를 입력 구성 요소에 입력하고 페이지를 다시로드하지 않고 제출할 수 있어야합니다. 반환 된 데이터는 의미를 찾고 읽을 수 있도록 페이지에 사용 가능한 형식으로 표시되어야합니다.

나는 이것을 Netbeans을 통해 웹 서비스를 만들어 시도했지만이 방법이 올바른지 확신 할 수 없습니다. HTML 페이지를 만들고 JavaScript를 사용하여 Glosbe를 호출하는 것처럼 간단합니까?

도움을 주시면 감사하겠습니다.

Answer 1

자바 스크립트의 XMLHTTPRequest를 사용하여 웹 서비스를 폴링 할 수 있습니다. XHR 개체는 페이지를 새로 고치지 않고 페이지를 요청하거나 양식을 제출할 수있게 해주는 훌륭한 도구입니다. 요청이 이루어지면 비동기 적으로 수행하여 페이지가 다른 이벤트와 함께 계속 처리되도록 한 다음 응답을 처리하고 HTML을 업데이트 할 수 있습니다. Google에는 XHR 객체 구현에 대한 지침과 샘플 코드와 함께 적절한 오류 처리 방법을 알려주는 많은 리소스가 있습니다.

리턴 된 데이터가 사용 가능한 형식으로 표시되는 한, 응답이 돌아올 때 JS가이를 수행해야합니다. 원하는 데이터에 대한 응답을 구문 분석하고 JS를 통해 적절한 HTML 요소를 작성하여 UI를 업데이트 할 수 있습니다.

HTML
< 입력 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 
}