jQuery

[jQuery] 21장 Ajax를 이용한 페이지 예제

반응형

 

예제

 

 

Eclipse를 사용하며 프로젝트를 진행한다.

 

 

  • get 방식

 

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input value="저스티스타이탄">
	<input type="button" value="get">
	<div></div>
	
<script>
	"use strict";
	
	let v_btns = document.querySelectorAll('[type=button]');
	let v_disp = document.querySelector('div');
	
	v_btns[0].addEventListener('click', function() {
		
		let textVal = document.querySelector('input').value;
		
		// AJAX문법
		// 객체 생성은 각 함수마다 하나씩 정의해서 사용하고 전역으로 공통사용하지 않음(충돌위험성 높아짐)
		// 1. XMLHttpRequest()객체 생성
		let req = new XMLHttpRequest();
		
		// 2. open(설정) - url test.jsp
		req.open('get', 'test.jsp?senData='+textVal);
		
		// 4. onreadystatechange - readyState, status - responseText
		req.onreadystatechange = function(){
			if(req.readyState == 4 && req.status == 200) {
				console.log("응답 확인 >> ", req.responseText);
				v_disp.innerHTML = req.responseText;
			}
		}
		
		// 3. send()
		req.send();
	});
</script>

</body>
</html>

 

 

test.jsp

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

<%
	String data = request.getParameter("senData"); // get key
%>

<h4 style='color: red;'>응답 데이터: <%= data%></h4>

 

결과 화면1 : get 버튼 클릭 시

 

 

 

  • post 방식

 

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input value="저스티스타이탄">
	<input type="button" value="post">
	<div></div>
	
<script>
	"use strict";
	
	let v_btns = document.querySelectorAll('[type=button]');
	let v_disp = document.querySelector('div');
	
	// post
	v_btns[0].onclick = function(){
		
		let data = document.querySelector('input').value;
		
		let ajax = new XMLHttpRequest();
		ajax.open('post', 'test.jsp');
		ajax.addEventListener('readystatechange', function(){
			if(this.readyState == 4 && this.status == 200) {
				console.log("post response : ", this.responseText);
			}
		});
		ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;');
        
 		// 데이터 '전달하는' 위치에서 인코딩 처리 >> 받는 곳에서 인코딩 처리 하지 않아도 됨
// 		ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;charset=utf-8;');
		ajax.send("imkey=" + data); // urlencoded형식(key=value)으로 
	};
	
</script>

</body>
</html>

 

 

test.jsp

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

<%
	request.setCharacterEncoding("UTF-8"); // post로 데이터를 '전달받는' 위치에서 인코딩 처리하기
	
	// post의 경우 get과 달리 인코딩 처리를 하지 않아 한글이 깨짐 > 인코딩 처리해줘야 함
	String data = request.getParameter("imkey"); // post key
%>

<h4 style='color: red;'>응답 데이터: <%= data%></h4>

 

결과 화면2

 

 

 

서블릿 이용한 예제

 

 

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input value="저스티스타이탄">
	<input type="button" value="get">
	<input type="button" value="post">
	<div></div>
	
<script>
	"use strict";
	
	let v_btns = document.querySelectorAll('[type=button]');
	let v_disp = document.querySelector('div');
	
	v_btns[0].addEventListener('click', function() {
		
		let textVal = document.querySelector('input').value;
		
		// 1. XMLHttpRequest()객체 생성
		let req = new XMLHttpRequest();
		
		// 2. open(설정) - url test.jsp		
		// content-root유무에 따라 접근 경로 path를 다르게 작성해야 함 - [(context-root)/urlPatten]
		req.open('get', '/webPro/Ajax?senData='+textVal);
		
		// 4. onreadystatechange - readyState, status - responseText
		req.onreadystatechange = function(){
			if(req.readyState == 4 && req.status == 200) {
				console.log("응답 확인 >> ", req.responseText);
				v_disp.innerHTML = req.responseText;
			}
		}
		
		// 3. send()
		req.send();
	});
	
	// post
	v_btns[1].onclick = function(){
		
		let data = document.querySelector('input').value;
		
		let ajax = new XMLHttpRequest();
		ajax.open('post', 'test.jsp');
		ajax.addEventListener('readystatechange', function(){
			if(this.readyState == 4 && this.status == 200) {
				console.log("post response : ", this.responseText);
 				v_disp.innerHTML = req.responseText.replace('\n','<br>');
			}
		});
		ajax.setRequestHeader('content-type','application/x-www-form-urlencoded;');

		ajax.send("imkey=" + data);
	};
	
</script>

</body>
</html>

 

 

2. open(설정)에서의 /webPro/Ajax?senData= 부분 경로 확인

더보기
프로젝트에서 오른쪽 마우스 클릭 > Properties

 

Web Project Settings > Context root 부분의 경로 확인

 

 

Ajax.java

package ajax;

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("/Ajax")
public class Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Ajax() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String param = request.getParameter("senData");
		System.out.println("넘어온 데이터>>>>>>>>>>> " + param);
		
		response.setCharacterEncoding("utf-8");
		
		// 응답데이터 생성은 대부분 text(html)로 작성하며, 데이터는 바이너리기반/텍스트기반 스트림으로 작성
		PrintWriter wrt = response.getWriter();
		wrt.write(65); // A / 인수를 단일문자로 해석
		wrt.write(97); // a
		wrt.print(97); // 97 / 인수를 문자열로 변환
		wrt.write("전달하는 정보 >> " + param); // 요청 위치로 보내줄 응답 생성
		
	}

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

	}

}

 

결과 화면3-1 : get 버튼 클릭 시

 

결과 화면3-2

 

 

 

json  형식으로 응답정보 보내기

 

 

  • get 방식

 

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input value="저스티스타이탄">
	<input type="button" value="get">
	<input type="button" value="post">
	<div></div>
	
<script>
	"use strict";
	
	let v_btns = document.querySelectorAll('[type=button]');
	let v_disp = document.querySelector('div');
	
	v_btns[0].addEventListener('click', function() {
		
		let textVal = document.querySelector('input').value;
		
		// 1. XMLHttpRequest()객체 생성
		let req = new XMLHttpRequest();
		
		// 2. open(설정) - url test.jsp
		req.open('get', '/webPro/Ajax?senData='+textVal);
		
		// 4. onreadystatechange - readyState, status - responseText
		req.onreadystatechange = function(){
			if(req.readyState == 4 && req.status == 200) {
				let jsonObj = JSON.parse(req.responseText);
				console.log( "응답 확인 >> ", jsonObj);

				v_disp.innerHTML = "value정보만 >>> " + jsonObj.abc;
			}
		}
		
		// 3. send()
		req.send();
	});
	
</script>

</body>
</html>

 

 

Ajax.java

package ajax;

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("/Ajax")
public class Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Ajax() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String param = request.getParameter("senData");
		System.out.println("넘어온 데이터>>>>>>>>>>> " + param);
		
		response.setCharacterEncoding("utf-8");
		
		// 응답데이터 생성은 대부분 text(html)로 작성하며, 데이터는 바이너리기반/텍스트기반 스트림으로 작성
		PrintWriter wrt = response.getWriter();
		
		// JSON형태의 응답정보 보내기
		wrt.write("{\"abc\":\""+ param +"\"}");
	}

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

	}

}

 

결과 화면4 : get 버튼 클릭시

 

 

  • post 방식

 

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input value="저스티스타이탄">
	<input type="button" value="get">
	<input type="button" value="post">
	<div></div>
	
<script>
	"use strict";
	
	let v_btns = document.querySelectorAll('[type=button]');
	let v_disp = document.querySelector('div');
	
	v_btns[0].addEventListener('click', function() {
		
		let textVal = document.querySelector('input').value;
		
		// AJAX문법
		// 1. XMLHttpRequest()객체 생성
		let req = new XMLHttpRequest();
		
		// 2. open(설정) - url test.jsp		
		// content-root유무에 따라 접근 경로 path를 다르게 작성해야 함 - [(context-root)/urlPatten]
		req.open('get', '/webPro/Ajax?senData='+textVal);
		
		// 4. onreadystatechange - readyState, status - responseText
		req.onreadystatechange = function(){
			if(req.readyState == 4 && req.status == 200) {
				let jsonObj = JSON.parse(req.responseText);
				console.log( "응답 확인 >> ", jsonObj);

				v_disp.innerHTML = "value정보만 >>> " + jsonObj.abc;
			}
		}
		
		// 3. send()
		req.send();
	});
	
	// post
	v_btns[1].onclick = function(){
		
		let data = document.querySelector('input').value;
		
		let ajax = new XMLHttpRequest();
		ajax.open('post', '/webPro/Ajax');
		
		ajax.addEventListener('readystatechange', function(){
			if(this.readyState == 4 && this.status == 200) {
				console.log("post response : ", this.responseText);
			}
		});

		// JSON형식 데이터로 요청
		ajax.setRequestHeader('content-type','application/json;');
		ajax.send(JSON.stringify({imkey : data})); 
	};
	
</script>

</body>
</html>

 

 

Ajax.java

package ajax;

import java.io.BufferedReader;
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("/Ajax")
public class Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    public Ajax() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String param = request.getParameter("senData");
		System.out.println("넘어온 데이터>>>>>>>>>>> " + param);
		
		response.setCharacterEncoding("utf-8");
		
		// 응답데이터 생성은 대부분 text(html)로 작성하며, 데이터는 바이너리기반/텍스트기반 스트림으로 작성
		PrintWriter wrt = response.getWriter();
		
		// JSON형태의 응답정보 보내기
		wrt.write("{\"abc\":\""+ param +"\"}");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parameter = request.getParameter("imkey"); // JSON형식 데이터는 받지 못함
		System.out.println("post >>>>>>> " + parameter);
		
		request.setCharacterEncoding("utf-8");
		
		BufferedReader rd = request.getReader();
		String data = rd.readLine();
		System.out.println("데이터를 확인해보자 >> " + data);
	}

}

 

결과 화면5-1 : post 버튼 클릭시

 

결과 화면5-2

 

 

 

gson 라이브러리 사용

 

 

라이브러리 파일 lib 안에 집어 넣음

 

 

 

Ajax.java

package ajax;

import java.io.BufferedReader;
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;

import com.google.gson.JsonObject;
import com.google.gson.JsonParser;

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

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String param = request.getParameter("senData");
		System.out.println("넘어온 데이터>>>>>>>>>>> " + param);
		
		response.setCharacterEncoding("utf-8");
		
		// 응답데이터 생성은 대부분 text(html)로 작성하며, 데이터는 바이너리기반/텍스트기반 스트림으로 작성
		PrintWriter wrt = response.getWriter();
		
		// JSON형태의 응답정보 보내기
		wrt.write("{\"abc\":\""+ param +"\"}");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String parameter = request.getParameter("imkey"); // JSON형식 데이터는 받지 못함
		System.out.println("post >>>>>>> " + parameter);
		
		request.setCharacterEncoding("utf-8");
		
		BufferedReader rd = request.getReader();
		String data = rd.readLine();
		System.out.println("데이터를 확인해보자 >> " + data);

		// java에서 활용가능한 객체 형태로 변환하기 위해 gson라이브러리 사용
		JsonParser parser = new JsonParser();
		JsonObject jsonObj = (JsonObject)parser.parse(data);
		
		System.out.println(jsonObj.get("imkey").getAsString());
		
		response.setCharacterEncoding("utf-8");
		PrintWriter wrt = response.getWriter();
		wrt.print("넘어감 >> " + jsonObj.get("imkey").getAsString());
	}

}

 

결과 화면6-1

 

결과 화면6-2

 

 

반응형

'jQuery' 카테고리의 다른 글

[jQuery] 23장 fetch  (0) 2024.03.04
[jQuery] 22장 jQuery를 이용한 Ajax  (0) 2024.02.29
[jQuery] 20장 Ajax  (0) 2024.02.27
[jQuery] 19장 JSON  (1) 2024.02.27
[jQuery] 18장 콜백 함수와 체이닝, 동기와 비동기  (1) 2024.02.27

티스토리툴바