ajax 테스트

jungnoeun·2022년 8월 3일
ajaxjsp
0

jsp

목록 보기
13/14

ajax 요청과 응답

요청(ajax) ->
데이터가 항상 들어오는 형식이 같으면 좋음
항상 다르면 복잡해짐
예전에는 거의 x-www-form-urlencoded로 보냈음
요즘에는 json으로 통일함

응답(ajax) ->
여러 데이터 형식으로 보낼 수 있지만 거의 json으로 통일한다.




요청&응답 형식

  1. view화면에서 KEY=VALUE데이터 전송 (GET)
    • 바디가 없고 쿼리 스트링으로 전송
  2. view화면에서 KEY=VALUE데이터 전송 (POST)
  3. view화면에서 text 데이터 요청 (POST)
  1. 응답 text/plain
  2. 응답 application/x-www-form-urlencoded
  3. 응답 apaplication/json






1 요청(GET)&응답(text)

  1. view화면에서 KEY=VALUE데이터 전송 (GET)
    • 바디가 없고 쿼리 스트링으로 전송
  2. 응답 text/plain
    일반적인 text를 받음

결과 화면 깜박임없이 (F5)없이 요청해서 통신을 함




getajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous">
  // ajax는 제이쿼리를 사용(cdn주소) 또는 다운받아서 사용도 가능 -> $사용 가능
  </script>
  
</head>
<body>
	<button onclick="getajax()">클릭</button>
	
	<script>
	// 목적: GET으로 key=value 데이터를 전송하고 응답을 text/plain을 받을 예정
		function getajax() {
			
			// 비동기 함수
			$.ajax({
				type: "GET", // type의 기본값은 GET. GET인경우 생략가능
				url: "http://localhost:8080/ajax/ajax1?username=ssar&password=1234", //contextpath가 프로젝트명이라 ajax이다.
				// data: GET은 전송할 http의 body가 없음. 그래서 data 필드가 필요없음
				// contentType: 전송할 data가 없으니까 그 data를 설명할 필드가 필요없음
				dataType: "text" // 목적: 파싱해줌. json데이터를 응답받으면 바이트스트링으로 들어옴. 응답받은 데이터는 json이 아니라 string이다. 그래서 json이 들어오면 자바스크립트 오브젝트로 파싱해줘야 함
				// dataType: 응답되는 데이터를 자바스크립트 오브젝트로 파싱하는 용도 text면 생략가능
			})
			.done(function(result) { // 응답에 따른 text결과가 function의 인자로 들어옴
				alert(result);
			}) //ajax 통신 완료후에 정상이면 done이 가지고 있는 함수 호출
			.fail(function(error) {
				
			}); // ajax 통신 완료후에 비정상이면 fail이 가지고 있는 함수 호출
		}
	
		// 위의 비동기 함수를 밑처럼 요약 가능함
		// $.ajax("주소").done(함수..)
	
	</script>
</body>
</html>



Ajax1.java(서블릿 파일)

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


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// username이랑 password를 받는다고 가정
		String username = request.getParameter("username"); //GET방식이니까 getParameter로 받을 수 있음
		String password = request.getParameter("password");
		
		System.out.println("username: " + username);
		System.out.println("password: " + password);
		
		// 응답하면 done안에 있는 함수가 실행된다.
		// PrintWrtier out에서 out.print한 것들이 done함수의 인자(result)에 꽂힌다
		PrintWriter out = response.getWriter();
		out.print("ok");
		out.flush();
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
	}

}






2 요청(POST:key&value)&응답(json)

  1. view화면에서 KEY=VALUE데이터 전송 (POST)
  2. 응답 apaplication/json 으로 받기




postajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous">
  // ajax는 제이쿼리를 사용(cdn주소) 또는 다운받아서 사용도 가능 -> $사용 가능
  </script>
  
</head>
<body>
	<button onclick="postajax()">클릭</button>
	
	<script>
	// 목적: POST으로 key=value 데이터를 전송하고 응답을 json으로 받을 예정
		function postajax() {
			
			// 비동기 함수
			$.ajax({
				type: "POST", 
				url: "http://localhost:8080/ajax/ajax1", //contextpath가 프로젝트명이라 ajax이다.
				data: "username=ssar&password=1234",
				contentType: "application/x-www-form-urlencoded", //contentType은 안줘도 됨. 브라우저에게 주는 것이 아니라 내가 받는거라 나는 이미 알고 있음 ㅋㅋ. 받는 사람이 내가 아니면(브라우저면) 줘야 함
				dataType: "json" // 목적: 파싱해줌. json데이터를 응답받으면 바이트스트링으로 들어옴. 응답받은 데이터는 json이 아니라 string이다. 그래서 json이 들어오면 자바스크립트 오브젝트로 파싱해줘야 함
				// 적는 것이 좋음. 생략하면 그냥 문자열이 결과로 나옴
			})
			.done(function(result) { // json으로 들어온 데이터를 자바스크립트 오브젝트로 바꿔서 넣어줌
				console.log(result);
			}) //ajax 통신 완료후에 정상이면 done이 가지고 있는 함수 호출
			.fail(function(error) {
				
			}); // ajax 통신 완료후에 비정상이면 fail이 가지고 있는 함수 호출
		}
	
		// 위의 비동기 함수를 밑처럼 요약 가능함
		// $.ajax("주소").done(함수..)
	
	</script>
</body>
</html>



Ajax1.java 서블릿 파일

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


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// username이랑 password를 받는다고 가정
		String username = request.getParameter("username"); //GET방식이니까 getParameter로 받을 수 있음
		String password = request.getParameter("password");
		
		System.out.println("username: " + username);
		System.out.println("password: " + password);
		
		// 응답하면 done안에 있는 함수가 실행된다.
		// PrintWrtier out에서 out.print한 것들이 done함수의 인자(result)에 꽂힌다
		PrintWriter out = response.getWriter();
		out.print("ok");
		out.flush();
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 보낸 데이터의 타입을 확인 -> 데이터가 있으면 contentType을 확인하는게 좋음
		// String contentType = request.getContentType();
		// if(contentType == x-www-form-urlencoded이면 getParamter로 파싱하고 그게 아니면 버퍼로 읽기)
		
		
		// username이랑 password를 받는다고 가정
		String username = request.getParameter("username"); //GET방식이니까 getParameter로 받을 수 있음
		String password = request.getParameter("password");
				
		System.out.println("username: " + username);
		System.out.println("password: " + password);
		
		String jsonData = "{\"username\":\"ssar\", \"password\":\"1234\"}";
		
		// ajax에서 dataType을 안적어주고 여기서 해줘도 됨. ajax가 아니라 여기서 해주는게 맞음. ajax함수가 알아서 분석해서 json으로 바꿔보여줌 
		//response.setContentType("application/json"); // 브라우저가 응답을 받을거면 어떤 타입을 응답해주는지 말해줘야 함
		// ContentType은 자동화를 위한 것임. 내가 코드 짜는데 내가 알고 있으면 굳이 안적어도 됨
		
		PrintWriter out = response.getWriter();
		out.print("jsonData"); // 응답을 내가 받음 -> 폼태그로 요청했으면 브라우저가 받음
		out.flush();
		
	}

}







3 요청(POST:JSON)&응답(JSON)

요청 : json (POST)
6. 응답 apaplication/json




jsonajax.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous">
  // ajax는 제이쿼리를 사용(cdn주소) 또는 다운받아서 사용도 가능 -> $사용 가능
  </script>
  
</head>
<body>
	<button onclick="jsonajax()">클릭</button>
	
	<script>
	// 목적: POST으로 key=value 데이터를 전송하고 응답을 json으로 받을 예정
		// 보낼 데이터
		
		var data= {
			username: "ssar",
			password: "1234"
		}
	
		console.log(data);
		// var jsonData = JSON.stringify(data);
		// JSON.stringify() - 자바스크립트 오브젝트를 JSON으로 변경. 진짜 JSON타입이 아니라 JSON처럼 생긴 문자열이 됨
		// JSON.parse() - JSON을 자바스크립트 오브젝트로 변경
		
		function jsonajax() {
			
			// 비동기 함수
			$.ajax({
				type: "POST", 
				url: "http://localhost:8080/ajax/ajax2", //contextpath가 프로젝트명이라 ajax이다.
				// data: ' "username: " '+username+ ', "password : " ' +password+ '', // 이렇게 보낼 수 있지만 변수 매핑하기가 힘듬 그리고 변수는 무조건 string이어야 해서 비효율적
				data: JSON.stringify(data) , 
				contentType: "application/json", 
				dataType: "json" // 목적: 파싱해줌. json데이터를 응답받으면 바이트스트링으로 들어옴. 응답받은 데이터는 json이 아니라 string이다. 그래서 json이 들어오면 자바스크립트 오브젝트로 파싱해줘야 함
				// 응답해줄때 서버쪽에서 contentType을 알려주지만 안알려줄 수도 있으니 적어줌
			})
			.done(function(result) { // json으로 들어온 데이터를 자바스크립트 오브젝트로 바꿔서 넣어줌
				console.log(result);
				console.log(result.username);
			}) //ajax 통신 완료후에 정상이면 done이 가지고 있는 함수 호출
			
		}
	
	
	</script>
</body>
</html>



Ajax2.java 서블릿 파일

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


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// json으로 받아서 request.getParamter로 받을 수 없다.
		// 그래서 버퍼로 읽어야 한다.
		BufferedReader br = request.getReader(); // http body 데이터 순수하게 읽기- 파싱안함(request.getParameter는 순수하게 읽은 것이 아니라 파싱해서 읽음)
		String requestData = br.readLine(); // 한번에 읽음
		System.out.println(requestData); // json형식으로 들어옴 -> 파싱해서 js오브젝트로 만들어야 함
		
		// 파싱과정
		// DTO를 사용한다.
		// gson.fromJson() => json을 자바 오브젝트로
		// gson.toJson() => 자바 오브젝트를 json으로  
		Gson gson = new Gson();
		UserDto userDto = gson.fromJson(requestData, UserDto.class); // requestData가 UserDto클래스에 꽂힌다.
		
		System.out.println(userDto);
		
		
		// 응답
		User user = new User();
		user.setId(1);
		user.setUsername("love");
		user.setPassword("1234");
		user.setPhone("0102222");
		
		String userJson = gson.toJson(user);
		System.out.println("userJson" + userJson);
		response.setContentType("application/json; charset=utf-8"); // 여기에 한글들어오면 깨져서 charset=utf-8을 적어줘야 한다. 
		PrintWriter out = response.getWriter(); // ajax에 응답해야지 html에 응답하면 안된다. => 의미가 없다.
		out.print(userJson); //json으로 응답해야 함(스프링은 알아서 필터가 json으로 바꿔서 던져줌) -> 여기서는 직접해야 함
		out.flush();
	}

}



UserDto.java

public class UserDto {
	private String username;
	private String password;
	
	
	@Override
	public String toString() {
		return "UserDto [username=" + username + ", password=" + password + "]";
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	
}



User.java

public class User {
	// 그냥 유저 모델
	private int id;
	private String username;
	private String password;
	private String phone;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	
}
profile
jungnoeun
개발자
이전 포스트

비동기와 동기의 데이터 읽기

다음 포스트

리다이렉션 방법

0개의 댓글