본문으로 건너뛰기

5회차

정보

네이버 부스트코스 풀스택 강좌 듣기 (1강, AJAX)

Ajax (XMLHTTPRequest 통신)​

  • 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받으려는 목표를 가짐

    • 리액트에서는 axios를 사용함

  • Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터가 존재

  • 하지만, 일반적으로 사용이 편리한 JSON포맷으로 데이터를 주고 받습니다

실행코드​

아래 방법은 XMLHTTPRequest 객체를 사용하는 표준방법입니다.

function ajax(data) {
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", function () {
    console.log(this.responseText);
  });
  oReq.open("GET", "http://www.example.org/getData?data=data"); //parameter를 붙여서 보낼수있음.
  oReq.send();
}

  • XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보냅니다.

  • 요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백함수가 실행됩니다.

  • 콜백함수가 실행될 때는 이미 ajax함수는 반환하고 콜스택에서 사라진 상태입니다.

  • 이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직 입니다.

Servlet과 JSP연동​

  • Servlet은 프로그램 로직이 수행되기에 유리하다.

  • IDE 등에서 지원을 좀 더 잘해준다.

  • JSP는 결과를 출력하기에 Servlet보다 유리하다. 필요한 html문을 그냥 입력하면 됨.

  • 프로그램 로직 수행은 Servlet에서, 결과 출력은 JSP에서 하는 것이 유리하다.

  • Servlet과 JSP의 장단점을 해결하기 위해서 Servlet에서 프로그램 로직이 수행되고, 그 결과를 JSP에게 포워딩하는 방법이 사용되게 되었다. 이를 Servlet과 JSP연동이라고 한다.

실습코드​

LogicServlet.java

package examples;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/\*\*

- Servlet implementation class LogicServlet
  \*/
  @WebServlet("/LogicServlet")
  public class LogicServlet extends HttpServlet {
  private static final long serialVersionUID = 1L;

      /**
       * @see HttpServlet#HttpServlet()
       */
      public LogicServlet() {
          super();
          // TODO Auto-generated constructor stub
      }

      /**
       * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
       */
      protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
          int v1 = (int)(Math.random() * 100) + 1;
          int v2 = (int)(Math.random() * 100) + 1;
          int result = v1 + v2;

          request.setAttribute("v1", v1);
          request.setAttribute("v2", v2);
          request.setAttribute("result", result);

          RequestDispatcher requestDispatcher = request.getRequestDispatcher("/result.jsp");
          requestDispatcher.forward(request, response);
      }

}

result.jsp​

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
EL표기법으로 출력합니다.<br>
${v1} + ${v2} = ${result} <br><br>

스클립틀릿과 표현식을 이용해 출력합니다.<br>
<%
int v1 = (int)request.getAttribute("v1");
int v2 = (int)request.getAttribute("v2");
int result = (int)request.getAttribute("result");
%>

<%=v1%> + <%=v2 %> = <%=result %>

</body>
</html>

결과​

노트
  • 네이버 부스트 풀스택 강좌 듣기 (1강)