JavaScript

[JavaScript] Ajax

퓨어맨 2022. 5. 31. 14:04 
package com.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

@WebServlet("/ex01Ajax")
public class ex01Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// 웹페이지에 출력해줘야 ajax로 데이터를 보내줄 수 있다.
		
		// 1. 인코딩
		response.setCharacterEncoding("UTF-8");
		response.setContentType("text/html; charset=UTF-8");
		
		// 2. PrintWriter객체 생성
		PrintWriter out = response.getWriter();
		
		// 3. 웹페이지에 출력
		out.print("재우");

	}

}

ex01Ajax.java 파일 실행 결과

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button>Ajax 요청해보기</button>
	 <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
	 		integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
	 		crossorigin="anonymous"></script>
	 <script>
	 	// 1. 버튼을 클릭했을 때
	 	$('button').on('click',function(){
		 	// 2. ex01Ajax 서블릿 파일로 데이터를 요청
			$.ajax({
				// 요청할 서버의 url
				url : 'ex01Ajax',
				success : function(res){
					// res --> 서버페이지에서 받아온 결과값
					console.log(res)
				},
				error : function(){
					alert('요청실패!')
				}
				
			});
		 	
	 	})
	 	
	 </script>
	 
</body>
</html>

ex01Ajax.html 실행 결과