본문 바로가기
서버/Servlet-JSP
[Servlet-JSP] Ajax와의 통신
Hana_h 2023. 5. 18. 00:18

// Ajax, Asynchronous JavaScript and XML
    - 비동기 자바스크립트 & XML
    - 비동기 자바스크립트 통신
    > 일의 순서를 예측하기 어렵다.

    - 브라우저 <- (통신) -> 웹서버(톰캣)
    - 자바스크립트 <- (통신) -> 웹서버(톰캣)

// Ajax 구현


1. 순수 자바스크립트 버전 > 현재는 잘 안 씀
    - 서버에 데이터를 보내는 방식

    a. GET > QueryString
        ~ ajax.open('GET', 'uri?name=value');
        ~ ajax.send();

    b. POST > send할 때 데이터 넣어 전송
        ~ ajax.open('POST', 'uri');
        ~ ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        ~ ajax.send('name=value');

package com.test.ajax;

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;

@WebServlet("/ex05.do")
public class EX05 extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
      

        RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex05.jsp");
        dispatcher.forward(req, resp);

    }

}

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>
</style>
</head>
<body>

	<h1>Ajax 요청</h1>

	<div>
		<input type="button" value="확인" id="btn1">
		<hr>
		<div id="div1"></div>
	</div>
	<hr>
	
	<div>
		<input type="text" id="txt2">
		<input type="button" value="확인" id="btn2">
		<hr>
		<div id="div2"></div>
	</div>
	<hr>
	
	<div>
		<input type="text" id="txt3">
		<input type="button" value="확인" id="btn3">
		<hr>
		<div id="div3"></div>
	</div>
	<hr>
	
	<div>
		다른 작업 : <input type="text">
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#btn1').click(() => {
		
	    const ajax = new XMLHttpRequest();
	    
	    ajax.onreadystatechange = function() {
	    	if(ajax.readyState == 4 && ajax.status == 200) {
	    	    //요청한 데이터를 올바르게 수신 가능한 순간
	    	    
	    	    $('#div1').text(ajax.responseText);
	    	    //alert('*' + ajax.responseText + '*')
	    	    
	    	}
	    };
	    
	    
 	    /* ajax.open('GET', '/ajax/ex05.txt');  */
	    ajax.open('GET', '/ajax/ex05data.do');
	    
	    ajax.send(); //연결 + 접속 + 요청
	    
	});	
	
	
	$('#btn2').click(() => {
	   
	    const ajax = new XMLHttpRequest();	 
	    
	    
	    //ajax.open('GET', '/ajax/ex05data.do?txt2=' + $('#txt2').val());
	    //ajax.send();
	    
	    ajax.onreadystatechange = function() {
	      	if(ajax.readyState ==4 && ajax.status == 200) {
	      	    $('#div2').text(ajax.responseText);
	      	}  
	    };
	   
	    ajax.open('POST', '/ajax/ex05data.do');
	    
	    ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
	    
	    ajax.send('txt2=' + $('#txt2').val());
	    
	});
	
	
	$('#btn3').click(()=> {
	   
	    const ajax = new XMLHttpRequest();
	    
	    //데이터 수신
	    ajax.onreadystatechange = function() {
	      	if(ajax.readyState ==4 && ajax.status == 200) {
	      	    $('#div3').text(ajax.responseText);
	      	}  
	    };
	    
	    ajax.open('GET', '/ajax/ex05data.do?txt3='+ $('#txt3').val());
	    
	    //데이터 송신
	    ajax.send();
	    
	});
	
	
</script>
</body>
</html>

2. jQuery 버전
    ~ async: true > 비동기 (다른 작업 가능)
    ~ async: false > 동기 (결과 반환까지 대기해야 함 > 다른 작업 불가능)

    a. dataType: 'text'
        ~ resp.setContentType("text/plain");
    b. dataType: 'xml'
        ~ resp.setContentType("text/xml");
    c. dataType: 'json'
        ~ resp.setContentType("application/json");

        - 키와 값을 쌍따옴표로 표기한다. (또는 [])
        - 메서드는 표시할 수 없다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>
	
	<h1>Ajax <small>응답 데이터 형식</small></h1>
	
	<div>
	
		<h2>Text</h2>
		<input type="button" value="확인" id="btn1">
		<div id="div1"></div>
		
		<hr>
	
		<h2>XML</h2>
		<input type="button" value="확인" id="btn2">
		<div id="div2"></div>
		
		<hr>
	
		<h2>JSON(***)</h2>
		<input type="button" value="확인" id="btn3">
		<div id="div3"></div>
		
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
	
	$('#btn1').click(() => {
	    
	    $.ajax({
	       	type: 'GET',
	       	url: '/ajax/ex07data.do',
	       	data: 'type=2',
	       	dataType: 'text', 
	       	success: (result) => {
	       	   
	       	    const lines = result.split('\r\n');
	       	    
	       	    lines.forEach(line => {
	       	    	const items = line.split(',');
	       	    	
	       	    	$('#div1').append(
	       	    		`
	       	    			<div>\${items[1]} - \${items[4]}</div>
	       	    	    `	       	    	        
	       	    	);
	       	    });
	       	    
	       	},
	       	error: (a,b,c) => console.log(a,b,c)
	    });
	    
	});

	$('#btn2').click(() => {
	    
	    $.ajax({
	       	type: 'GET',
	       	url: '/ajax/ex07data.do',
	       	
	       	data: 'type=4',
	       	
	       	dataType: 'xml',
	       	
	       	success: (result) => {
	       	    
	       	    $(result).find('item').each((index, item) => {
	       	    	
	       	        $('#div2').append(
	       	            `    
	       	            <div>
	       	            	\${$(item).find('seq').text()}
	       	            	:
	       	            	 \${$(item).find('name').text()}
	       	            	:
	       	            	 \${$(item).find('address').text()}
	       	            </div>
	       	            `
	       	        );
	       	    });
	       	    
	       	    
	       	},
	       	
	       	error: (a,b,c) => console.log(a,b,c)
	       	
	    });	    
	    
	});

	$('#btn3').click(() => {
	    
	    $.ajax({
	    	
	        type: 'GET',
	        url: '/ajax/ex07data.do',	        
	        
	        data: 'type=6',
	        
	        dataType: 'json',
	        
	        success: (result)=>{
	            
	            //result = {"question":"가장 자신있는 프로그래밍 언어는?"}
	            //alert(result.question);
	            
	            $(result).each((index, item) => {
	               
	                $('#div3').append(
	                 	`
	                 		<div>\${item.seq} : \${item.name} : \${item.address}</div>	
	                	`
	                )	                
	                
	            });          
	            
	        },
	        
	        error: (a,b,c,) => console.log(a,b,c)
	        
	    });
	});

</script>
</body>
</html>

 

- 아이디 중복 검사

package com.test.ajax;

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;

@WebServlet("/ex08.do")
public class Ex08 extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        

        RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/ex08.jsp");
        dispatcher.forward(req, resp);

    }

}

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>아이디 중복검사</h1>
	
	<h3>새창 띄우기 방식</h3>
	
	<table>
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" id="id1" class="short" readonly>
				<input type="button" id="btn1" value="id 중복검사">				
			</td>
		</tr>
	</table>
	
	<div>
		다른 업무: <input type="text">
	</div>
	
	<h3>Ajax 방식</h3>
	
	<table>
		<tr>
			<th>아이디</th>
			<td>
				<input type="text" id="id2" class="short">
				<input type="button" id="btn2" value="중복검사">
				<span id="result"></span>							
			</td>
		</tr>
	</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#btn1').click(()=> {	   
	    window.open('/ajax/ex08check.do', 'idcheck', 'width=350 height=300');	    
	});
	
	$('#btn2').click(()=>{
	  
	    $.ajax({
	    
	        type: 'GET',
	        url: '/ajax/ex08data.do',
	        data: 'id=' + $('#id2').val(),
	        dataType: 'json',
	        
	        success: (result)=>{
	            
	            if(result.result == 1) {
	                $('#result').text('중복된 아이디입니다.');
	                
	            } else {
	                $('#result').text('사용 가능한 아이디입니다.');
	            }
	            
	        },
	        
	        error: (a,b,c)=>console.log(a,b,c)	    	
	    
	    });
	    
	});

</script>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>아이디 중복검사</h1>
	
	<form action="/ajax/ex08check.do" method="GET">
	<table>
		<tr>
			<th>아이디</th>
			<td><input type="text" id="id" name="id" class="short" required value="${id}"></td>
			<td><input type="submit" value="중복검사"></td>
		</tr>
	</table>
	</form>
	
	<div id="result">
		<c:if test="${result == 1}">
		이미 사용중인 아이디입니다.
		</c:if>
		<c:if test="${result == 0}">
		사용 가능한 아이디입니다.
		</c:if>
	</div>
	
	<hr>
	
	<div>
		<input type="button" value="사용하기" id="btn1" disabled>	
		<input type="button" value="창닫기" id="btn2">
	</div>	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#btn1').click(()=>{
	    
	    opener.document.getElementById('id1').value = '${id}';
	    window.close();
	    
	});

	$('#btn2').click(()=>{
	    window.close();
	});
	
	<c:if test="${result == 1}">
		$('#btn1').attr('disabled', true);
	</c:if>
	<c:if test="${result == 0}">
		$('#btn1').attr('disabled', false);
	</c:if>

</script>
</body>
</html>

- 데이터 전송 방법
        1. Object 
        2. QueryString > serialize() > 권장x
             - name 속성 필수!
        3. JSON
            ~ JSON.stringify(객체) > 객체 배열을 json 형식으로 변환
            ~ JSONParser parser = new JSONParser(); > JSON 포맷의 문자열을 자바 오브젝트로 변환
            ~ JSONObject obj = (JSONObject)parser.parse(JSON 포맷의 문자열); > JSON Object을 자바 오브젝트로 변환

 

- Object

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>Ajax</h1>
	
	<form id="form1">
		<div>
			<input type="text" name="txt1" id="txt1" value="강아지">
		</div>
		<div>
			<input type="text" name="txt2" id="txt2" value="고양이">
		</div>
		<div>
			<input type="text" name="txt3" id="txt3" value="토끼">
		</div>
		<div>
			<input type="text" name="txt4" id="txt4" value="사자">
		</div>
		<div>
			<input type="text" name="txt5" id="txt5" value="호랑이">
		</div>
		<div>
			<input type="submit" value="보내기" id="btn1">
		</div>
	</form>
	
	<hr>
	
	<div>
		<input type="button" value="가져오기" id="btn2">
	</div>
	<div id="result" class="panel" title="result"></div>
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#form1').submit(()=>{
	    
	    //객체를 data에 바로 전송	    
	    $.ajax({
	    	type: 'GET',
	    	url: '/ajax/ex10data.do',
	    	data: {
		        txt1: $('#txt1').val(),
		        txt2: $('#txt2').val(),
		        txt3: $('#txt3').val(),
		        txt4: $('#txt4').val(),
		        txt5: $('#txt5').val()
		    },
	    	success: (result)=>{},
	    	error: (a,b,c)=>console.log(a,b,c)
	    });
	    
	    event.preventDefault();
	    return false;
	    
	});
	
</script>
</body>
</html>

- QueryString > serialize()

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>Ajax</h1>
	
	<form id="form1">
		<div>
			<input type="text" name="txt1" id="txt1" value="강아지">
		</div>
		<div>
			<input type="text" name="txt2" id="txt2" value="고양이">
		</div>
		<div>
			<input type="text" name="txt3" id="txt3" value="토끼">
		</div>
		<div>
			<input type="text" name="txt4" id="txt4" value="사자">
		</div>
		<div>
			<input type="text" name="txt5" id="txt5" value="호랑이">
		</div>
		<div>
			<input type="submit" value="보내기" id="btn1">
		</div>
	</form>
	
	<hr>
	
	<div>
		<input type="button" value="가져오기" id="btn2">
	</div>
	<div id="result" class="panel" title="result"></div>
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#form1').submit(()=>{
		
	    //쿼리 스트링 더 간편하게 전송(input 태그의 name이 꼭 있어야 함)
	    //alert($('#form1').serialize());
	    
	    $.ajax({
	    	type: 'GET',
	    	url: '/ajax/ex10data.do',
	    	data: $('#form1').serialize(),
	    	success: (result)=>{},
	    	error: (a,b,c)=>console.log(a,b,c)
	    });
	    
	    event.preventDefault();
	    return false;
	    
	});
	
</script>
</body>
</html>

- JSON

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>Ajax</h1>
	
	<form id="form1">
		<div>
			<input type="text" name="txt1" id="txt1" value="강아지">
		</div>
		<div>
			<input type="text" name="txt2" id="txt2" value="고양이">
		</div>
		<div>
			<input type="text" name="txt3" id="txt3" value="토끼">
		</div>
		<div>
			<input type="text" name="txt4" id="txt4" value="사자">
		</div>
		<div>
			<input type="text" name="txt5" id="txt5" value="호랑이">
		</div>
		<div>
			<input type="submit" value="보내기" id="btn1">
		</div>
	</form>
	
	<hr>
	
	<div>
		<input type="button" value="가져오기" id="btn2">
	</div>
	<div id="result" class="panel" title="result"></div>
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>

	$('#form1').submit(()=>{
	    
	    //JSON 전송
	    const obj = {
	        txt1: $('#txt1').val(),
	        txt2: $('#txt2').val(),
	        txt3: $('#txt3').val(),
	        txt4: $('#txt4').val(),
	        txt5: $('#txt5').val()
	    };
	    
	    $.ajax({
	    	type: 'POST', // JSON으로 보낼 때는 GET 불가
	    	url: '/ajax/ex10data.do',	    	
	    	contentType: 'application/json', //클라이언트 -> 서버
	    	//dataType: 'json', //서버 -> 클라이언트
	    	data: JSON.stringify(obj),
	    	success: (result)=>{},
	    	error: (a,b,c)=>console.log(a,b,c)
	    });
	    
	    event.preventDefault();
	    return false;
	    
	});
	
</script>
</body>
</html>

- 데이터 수신(json)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://me2.do/5BvBFJ57">
<style>

</style>
</head>
<body>

	<h1>Ajax</h1>
	
	<form id="form1">
		<div>
			<input type="text" name="txt1" id="txt1" value="강아지">
		</div>
		<div>
			<input type="text" name="txt2" id="txt2" value="고양이">
		</div>
		<div>
			<input type="text" name="txt3" id="txt3" value="토끼">
		</div>
		<div>
			<input type="text" name="txt4" id="txt4" value="사자">
		</div>
		<div>
			<input type="text" name="txt5" id="txt5" value="호랑이">
		</div>
		<div>
			<input type="submit" value="보내기" id="btn1">
		</div>
	</form>
	
	<hr>
	
	<div>
		<input type="button" value="가져오기" id="btn2">
	</div>
	<div id="result" class="panel" title="result"></div>
	

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>	
	
	$('#btn2').click(()=>{
		
	    $.ajax({
			type: 'GET',
			url: '/ajax/ex10data.do',
			
			dataType: 'json',
	    	success: (result)=>{
	    	   //$('#result').append('<div>' + result.seq + '</div>');
	    	   // $('#result').append('<div>' + result.question + '</div>');
	    	   
	    	   $(result).each((index, item)=>{
	    	       $('#result').append('<div>' + item.name + '')	    	       
	    	       $('#result').append('<div>' + item.age + '')	    	       
	    	       $('#result').append('<div>' + item.address + '')	    	       
	    	       $('#result').append('<hr>')    	       
	    	   })
	    	},
	    	error: (a,b,c)=>console.log(a,b,c)
			
	    });	
	});

</script>
</body>
</html>

 

'서버 > Servlet-JSP' 카테고리의 다른 글

[Servlet-JSP] Reload  (1) 2023.05.17
MVC, JSP model  (0) 2023.05.08
[Servlet-JSP] 포워딩(Forwarding)  (0) 2023.02.05
[Servlet-JSP] URL 패턴, FrontController 패턴, Command 패턴  (0) 2023.01.29
[Servlet-JSP] EL(Expression Language)  (0) 2023.01.23

'서버/Servlet-JSP' Related Articles

티스토리툴바