javascript에서 Java Servlet 호출

javascript에서 Java Servlet 호출

이 질문에는 이미 답변이 있습니다.

서블릿과 에이잭스는 어떻게 사용해야 하나요? (7개의 답변)

닫힘1년 전.

MVC 디자인 패턴으로 웹 어플리케이션을 만들려고 합니다.GUI 부분은 JavaScript를 사용하고 싶습니다.또한 컨트롤러의 Java Servlet도 마찬가지입니다.

저는 자바스크립트를 사용한 적이 없기 때문에 자바스크립트에서 자바서블릿을 호출하는 방법과 서블릿에서 응답을 얻는 방법을 알아내는 데 어려움을 겪고 있습니다.

누가 나 좀 도와줄래?

그럼 서블릿으로 에이잭스 호출을 하겠다는 거야?그러기 위해서는 JavaScript에 오브젝트가 필요합니다.다음은 Firefox와 호환되는 예입니다.

<script>
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            var data = xhr.responseText;
            alert(data);
        }
    }
    xhr.open('GET', '${pageContext.request.contextPath}/myservlet', true);
    xhr.send(null);
</script>

그러나 이것은 매우 상세하고 실제로 크로스브라우저 호환성이 없습니다.Ajaxical 요청을 실행하고 HTML DOM 트리를 통과하는 최상의 크로스브라우저 호환 방법은 jQuery를 사용하는 것을 권장합니다.위의 내용을 jQuery로 다시 씁니다.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $.get('${pageContext.request.contextPath}/myservlet', function(data) {
        alert(data);
    });
</script>

어느 쪽이든 서버상의 Servlet은 다음 중 하나에 매핑되어야 합니다.url-pattern의/myservlet(기호에 맞게 변경할 수 있습니다) 적어도 다음과 같이 구현하고 응답에 데이터를 기록하십시오.

String data = "Hello World!";
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(data);

이것은 보여 줄 것이다.Hello World!JavaScript 경보에 표시됩니다.

물론 를 사용할 수도 있지만, 그 후에는'POST'에xhr.open()또는 사용$.post()대신$.get()jQuery로 지정합니다.

그런 다음 HTML 페이지에 데이터를 표시하려면 HTML DOM을 조작해야 합니다.예를 들면,

<div id="data"></div>

응답 데이터를 표시하는 HTML에서는, 다음의 조작을 실시할 수 있습니다.alert(data)첫 번째 예:

document.getElementById("data").firstChild.nodeValue = data;

jQuery 예에서는 이를 보다 간결하고 적절하게 수행할 수 있습니다.

$('#data').text(data);

한 단계 더 나아가 보다 복잡한 데이터를 전송하기 위해 쉽게 액세스할 수 있는 데이터 형식을 원합니다.일반적인 형식은 XML 및 JSON입니다.자세한 예시는 서블릿 및 Ajax 사용 방법을 참조하십시오.

이 코드는 AJAX를 사용하여 텍스트를 HTML5 문서에 동적으로 인쇄합니다(Ajax 코드는 인터넷 예약 및 WWW(Deitel)와 유사합니다).

Javascript 코드:

var asyncRequest;    
function start(){
    try
    {
        asyncRequest = new XMLHttpRequest();
        asyncRequest.addEventListener("readystatechange", stateChange, false);
        asyncRequest.open('GET', '/Test', true);    //   /Test is url to Servlet!
        asyncRequest.send(null);
    }
    catch(exception)
   {
    alert("Request failed");
   }
}

function stateChange(){
if(asyncRequest.readyState == 4 && asyncRequest.status == 200)
    {
    var text = document.getElementById("text");         //  text is an id of a 
    text.innerHTML = asyncRequest.responseText;         //  div in HTML document
    }
}

window.addEventListener("load", start(), false);

서블릿 자바 코드:

public class Test extends HttpServlet{
@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp)
    throws IOException{
        resp.setContentType("text/plain");
        resp.getWriter().println("Servlet wrote this! (Test.java)");
    }
}

HTML 문서

 <div id = "text"></div>

편집

저는 웹 프로그래밍을 처음 접했을 때 위의 답변을 썼습니다.그대로 두었습니다만, javascript 부분은 확실히 jQuery로 되어 있을 것입니다.raw javascript보다 10배는 간단합니다.

javascript 호출에 jquery를 사용하고 서비스 레이어에 jersey와 같은 JSR311을 구현하여 컨트롤러에 위임할 것을 권장합니다.

이것은 HTTP 콜의 처리와 데이터의 시리얼화에 관한 기본적인 로직 모두에 도움이 됩니다.이것은 큰 도움이 됩니다.

죄송합니다. jsp를 javascript가 아닌 jsp를 읽었습니다.다음과 같은 작업을 수행해야 합니다(이것은 상대적인 URL이며 이 javascript가 포함된 문서의 URL에 따라 다를 수 있습니다).

document.location = 'path/to/servlet';

여기서 web.xml의 servlet 매핑은 다음과 같습니다.

<servlet-mapping>
    <servlet-name>someServlet</servlet-name>
    <url-pattern>/path/to/servlet*</url-pattern>
</servlet-mapping>

   function callServlet()


{
 document.getElementById("adminForm").action="./Administrator";
 document.getElementById("adminForm").method = "GET";
 document.getElementById("adminForm").submit();

}

<button type="submit"  onclick="callServlet()" align="center"> Register</button>

var button = document.getElementById("<<button-id>>");
button.addEventListener("click", function() {
  window.location.href= "<<full-servlet-path>>" (eg. http://localhost:8086/xyz/servlet)
});

언급URL : https://stackoverflow.com/questions/3028490/calling-a-java-servlet-from-javascript