JQuery 방식

• 브라우저 호환성을 고려하지 않고 간단하게 ajax를 사용할 수 있음
• script 태그로 jQuery 라이브러리 연동 후 사용 가능함

처리절차

1. url 속성을 통해 전송할 URL 주소 선언
2. data 속성을 통해 전달할 데이터 설정
3. 성공, 실패 시 처리할 로직을 함수로 선언
4. 반드시 처리할 로직을 선언

<예시>

index.JSP

<input type="text" id="message-post-2">
	<button id="send-post-2">메세지 전송</button>
	<script>
		$("#send-post-2").click(function(){
			const message1 = $("#message-post-2").val();
			
			$.ajax({
				url: "/chap03/first/message",
				type: "post",
				data: {message : message1},
				success: function(data){
					alert(data);
				},
				error: function(request, status){
					alert("code: " + request.status + "\\n"
						  + "message: " + request.responseText);
				}
			});
		});

Servlet

@WebServlet("/first/message")
public class FirstMessageAjaxServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, 
				HttpServletResponse response) throws ServletException, IOException {

String message = request.getParameter("message");
				 
		response.setCharacterEncoding("UTF-8");
		
		PrintWriter out = response.getWriter();
		out.print("I'm post!!!" + message);
		out.flush();
		out.close();
	}

<aside> 💡 Post 방식으로 한글 데이터가 넘어올 시 인코딩 하지 않아도 됨 $.ajax의 속성 중 contentType 속성은 우리가 작성하지 않아도 기본적으로 UTF-8로 인코딩되어 post 요청이더라도 이미 인코딩이 되어 넘어옴 → 인코딩을 해줘도 문제는 없음

</aside>