24. jQuery Ajax

개발자 수업/JSP 2021. 12. 20. 17:10

1. Ajax 정의
    1) Asynchronus Javascript(비동기 자바스크립트) + XML의 의미
    2) 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 XML이나 JSON 데이터를 주고받는 기술
        - 기존 웹 페이지 동작
            - 요청 페이지 ---> 웹 서버
                              요청 받음
                              요청 처리
              결과 페이지 <--- HTML 생성
        - Ajax 웹 페이지 동작
            - 요청 페이지 ---> 웹 서버
                              요청 받음
                              요청 처리
                         <--- XML or JSON 생성
                    (XMLHttpRequest)

2. 제이쿼리 Ajax 사용 형식(속성들)
    - $.ajax({
        type: "post" or "get",
        async: "true" or "false",          <-- 비동기식으로 처리 여부 설정(false: 동기식으로 처리)
        url: "요청할 URL",
        data: {서버로 전송할 데이터},       <-- 서버에 요청할 때 보낼 매개변수 설정함
        dataType: "서버에서 전송받을 데이터 형식",      <-- xml, json, html, text ...
        success: {
            //정상요청, 응답시 처리구문
        },
        error: {
            //요청 및 응답 실패시(오류 발생시) 처리구문
        },
        complete: {
            //모든 작업 완료 후 처리 구문
        }
    });

3. JSON (Javascript Object Notation)
    1) name/value 쌍으로 이루어진 데이터 객체를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 데이터 형식
    2) 비동기 브라우저/서버 통신(Ajax)을 위해 XML을 대체하는 데이터 전송 형식 중 하나
    3) 자바스크립트에서 파생된 것으로 자바스크립트 구문 형식을 따르지만 프로그래밍 언어나 플랫폼에 독립적이어서 쉽게 사용 가능

4. JSON의 자료형
    1) 수(number) - 정수, 실수
    2) 문자열
    3) 배열
        - 대괄호[]로 나타냄
        - 배열의 각 요소 : 기본 자료형, 배열, 객체
        - 예) "name" : ["이순신", "신사임당"]
    4) 객체
        - 중괄호{}로 표현함
        - 예) {
                "name" : "이순신",
                "age" : 46,
                "weight" : 80
              }
    5) 배열 이름이 members이고 JSON 객체를 배열 요소로 가지는 JSON 배열
        "members" : [
            {"name" : "이순신", "age": 30, "gender" : "남", "nick" : "충무공"},
            {"name" : "이순신", "age": 30, "gender" : "남", "nick" : "충무공"},
            {"name" : "이순신", "age": 30, "gender" : "남", "nick" : "충무공"}
        ]

<%@ 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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
	<style type="text/css">
		*{box-sizing: border-box;}
		a{text-decoration: none;}
		form{
			width: 400px;
			height: 500px;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border: 1px solid rgb(89, 117, 196);
			border-radius: 10px;
		}
		input[type='text'], input[type='password']{
			width: 300px;
			height: 40px;
			border: 1px solid rgb(89, 117, 196);
			border-radius: 5px;
			padding: 0 10px;
			margin-bottom: 10px;
		}
		button{
			background-color: rgb(89, 117, 196);
			color: white;
			width: 300px;
			height: 50px;
			font-size: 17px;
			border: none;
			border-radius: 5px;
			margin: 20px 0 30px 0;
		}
		#title{
			font-size: 50px;
			margin: 40px 0 30px 0;
			
		}
	</style>
</head>
<body>
	<form action="#">
		<h3 id="title">Login</h3>
		<div id="msg">
			<c:if test="${not empty param.msg }">
				<i></i>
			</c:if>
		</div>
		<input type="text" name="id" placeholder="이메일 입력" autofocus>
		<input type="password" name="pwd" placeholder="비밀번호">
		<button>로그인</button>
		
		<div>
			<label><input type="checkbox" name="rememberId">아이디 기억</label>
			<a href="#">비밀번호 찾기</a>
			<a href="#">회원가입</a>
		</div>
	</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ajax 테스트1</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		function fn_process() {
			$.ajax({
				type: "get",			/* get 방식으로 전송 */
				dataType: "text",		/* 응답 데이터 텍스트로 지정 */
				async: false,			/* false인 경우 동기식으로 처리 */
				url: "http://localhost:8080/chap19_Ajax/ajaxLab01",		/* 전송할 서블릿 지정 */
				data: {param: "Hello, Ajax"},			/* 서버로 매개변수와 값을 설정 */
				success: function(data, textStatus) {	/* 전송과 응답이 성공했을 경우 작업 설정 */
					$('#message').append(data);
				},
				error: function(data, textStatus) {
					alert("에러가 발생했습니다.");
				},
				complete: function(data, textStatus) {
					alert("작업을 완료했습니다.");
				}
				
			});
		}
	</script>
</head>
<body>
	<input type="button" value="전송하기" onclick="fn_process()">
	<div id="message"></div>
</body>
</html>

package kr.co.ezenac.ajax01;

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;

/**
 * Servlet implementation class AjaxLab01
 */
@WebServlet("/ajaxLab01")
public class AjaxLab01 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String param = request.getParameter("param");		//ajax로 전송된 매개변수를 가져옴
		System.out.println("param = " + param);
		
		PrintWriter out = response.getWriter();
		out.print("안녕하세요. Ajax 처리 서버입니다.");			//브라우저에 응답 메세지를 보냄
	}

}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ajax 테스트2 - 도서 정보 출력</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		function fn_process() {
			$.ajax({
				type: "post",
				async: false,
				url: "http://localhost:8080/chap19_Ajax/ajaxLab02",
				dataType: "xml",								/* 데이터를 XML 형태로 받음 */
				success: function(info, textStatus) {
					$(info).find("book").each(function() {
						var title = $(this).find("title").text();	/* 전송된 XML 데이터에서 엘리먼트 이름으로 데이터를 가져옴 */
						var writer = $(this).find("writer").text();
						var image = $(this).find("image").text();		
						$("#bookInfo").append(
								"<p>" + title + "</p>" +
								"<p>" + writer + "</p>" +
								"<img src=" + image + " />"
						);
					});
				},
				error: function(info, textStatus) {
					alert("에러가 발생했습니다.");
				},
				complete: function(info, textStatus) {
					alert("작업을 완료했습니다.");
				}
				
			});
		}	
	</script>
</head>
<body>
	<div id="bookInfo"></div>
	<input type="button" value="도서정보 요청" onclick="fn_process()">
</body>
</html>

package kr.co.ezenac.ajax01;

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;

/**
 * Servlet implementation class AjaxLab01
 */
@WebServlet("/ajaxLab02")
public class AjaxLab02 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String result = "";
		
		PrintWriter out = response.getWriter();
		
		//도서정보를 XML로 작성 -> 클라이언트로 전송
		result = "<main><book>" +
				"<title><![CDATA[Great Code Vol.2 2/e]]></title>" +
				"<writer><![CDATA[랜달 하이드]]></writer>" +
				"<image><![CDATA[http://localhost:8080/chap19_Ajax/image/image1.jpg]]></image>" +
				"</book>" +
				"<book>" + 
				"<title><![CDATA[이득우의 언리얼 C++ 게임 개발의 정석]]></title>" +
				"<writer><![CDATA[이득우]]></writer>" +
				"<image><![CDATA[http://localhost:8080/chap19_Ajax/image/image2.jpg]]></image>" +
				"</book></main>";
		
		System.out.println(result);
		out.print(result);
	}

}

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ajax 테스트3 - 아이디 중복 체크</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		function fn_process() {
			var _id = $("#t_id").val();
			if(_id == '') {
				alert("ID를 입력하세요");
				return;
			}
			
			$.ajax({
				type: "post",
				async: true,
				url: "http://localhost:8080/chap19_Ajax/mem",
				dataType: "text", 
				data: {id: _id},
				success: function(data, textStatus) {
					if(data == 'usable') {
						$('#message').text("사용할 수 있는 ID입니다.")
						$('#btnDuplicate').prop("disabled", true);
					} else {
						$('#message').text("사용할 수 없는 ID입니다.")
					}
				},
				error: function(data, textStatus) {
					alert("에러가 발생했습니다."); 
				},
				complete: function(data, textStatus) {
					alert("작업을 완료했습니다.");
				}
			});
		}
	</script>
</head>
<body>
	<input type="text" id="t_id">
	<input type="button" id="btnDuplicate" value="ID 중복 체크하기" onclick="fn_process()"><br><br>
	<div id="message"></div>
</body>
</html>

package kr.co.ezenac.ajax02;

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;

/**
 * Servlet implementation class MemberServlet
 */
@WebServlet("/mem")
public class MemberServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandle(request, response);
	}

	private void doHandle(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		
		String id = request.getParameter("id");
		System.out.println("id = " + id);
		
		MemberDAO dao = new MemberDAO();
		boolean isDuplicated = dao.isDuplicated(id);
		
		if(isDuplicated == true) {
			out.print("not_usable");
		} else {
			out.print("usable");
		}
	}
}

package kr.co.ezenac.ajax02;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import javax.sql.DataSource;

public class MemberDAO {
	private Connection conn;
	private PreparedStatement pstmt;
	private DataSource dataFactory;
	
	public MemberDAO() {
		try {
			Context ctx = new InitialContext();
			Context envContext = (Context)ctx.lookup("java:/comp/env");		//JNDI에 접근하기 위해 기본경로를 지정
			//톰캣 context.xml에 설정한 name 값인 jdbc/oracle을 이용해 톰캣이 미리 연결한 DataSource를 받아옴
			dataFactory = (DataSource)envContext.lookup("jdbc/oracle");		
		} catch (NamingException e) {
			e.printStackTrace();
		}
	}
	
	public boolean isDuplicated(String id) {
		boolean result = false;
		
		try {
			conn = dataFactory.getConnection();
			String query = "SELECT DECODE(COUNT(*), 1, 'true', 'false') AS RESULT FROM T_MEMBER";
			query += " WHERE id=? ";
			
			pstmt = conn.prepareStatement(query);
			pstmt.setString(1, id);
			ResultSet rs = pstmt.executeQuery();
			
			rs.next();
			result = Boolean.parseBoolean(rs.getString("result"));
			pstmt.close();
			
		} catch(Exception e) {
			System.out.println("ID 중복 여부 체크 중 에러 발생");
		}
		
		return result;
	}
}

<%@ 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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON 테스트</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				var jsonStr = '{"name":["이순신", "신사임당", "이도"]}';		/* 이름을 저장하는 JSON 배열 */
				var jsonInfo = JSON.parse(jsonStr);			/* 제이쿼리의 JSON 함수인 parse() 메서드 -> JSON 자료형을 리턴 */
				var output = "회원 정보<br>";
				output += "----------------<br>";
				for(var i in jsonInfo.name) {				/* 배열 이름 name으로 배열 요소에 반복 변수 이용해 차례대로 접근하여 값을 가져옴 */
					output += jsonInfo.name[i] + "<br>";
				}
				$("#output").html(output);		/* 출력함 */
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">출력</a><br><br>
	<div id="output"></div>
</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">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON 테스트</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				var jsonStr = '{"age" : [22, 33, 44]}';		/* (이름이 age인) 정수형 데이터를 가지는 배열 선언 */
				var jsonInfo = JSON.parse(jsonStr);		/* parse()로 배열을 구함 */
				var output = "회원 정보<br>";
				output += "----------------<br>";
				for(var i in jsonInfo.age) {
					output += jsonInfo.age[i] + "<br>";	/* 배열 요소(나이)를 차례대로 출력함 */
				}
				$("#output").html(output);
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">출력</a><br><br>
	<div id="output"></div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON 테스트</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				var jsonStr = '{"name" : "이순신", "age" : "30", "gender" : "남자", "nickname" : "충무공"}';
				var jsonObj = JSON.parse(jsonStr);		/* parse()로 JSON 데이터를 가져옴 */
				var output = "회원 정보<br>";
				output += "----------------<br>";
				output += "이름: " + jsonObj.name + "<br>";		/* 문자열에서 JSON 객체의 속성을 가져옴 */
				output += "나이: " + jsonObj.age + "<br>";
				output += "성별: " + jsonObj.gender + "<br>";
				output += "닉네임: " + jsonObj.nickname + "<br>";
				$("#output").html(output);
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">출력</a><br><br>
	<div id="output"></div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON 테스트</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				var jsonStr = '{"members" : [{"name" : "이순신", "age" : "30", "gender" : "남자", "nickname" : "충무공"}'
										+ ', {"name" : "신사임당", "age" : "40", "gender" : "여자", "nickname" : "오만원"}]}';
				var jsonInfo = JSON.parse(jsonStr);		/* members 배열에 회원 정보를 객체의 name/value 쌍으로 저장 */
				var output = "회원 정보<br>";
				output += "----------------<br>";
				for(var i in jsonInfo.members) {
					output += "이름: " + jsonInfo.members[i].name + "<br>";	/* 각 배열 요소에 접근하여 객체의 name으로 value 출력함 */
					output += "나이: " + jsonInfo.members[i].age + "<br>";
					output += "성별: " + jsonInfo.members[i].gender + "<br>";
					output += "별명: " + jsonInfo.members[i].nickname + "<br><br><br>";
				}
				$("#output").html(output);
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">출력</a><br><br>
	<div id="output"></div>
</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" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON ajax 테스트</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				/* 전송할 회원 정보를 JSON 형식으로 만듦 */
				var _jsonInfo = '{"name" : "이순신", "age" : "30", "gender" : "남자", "nickname" : "충무공"}';
				
				$.ajax({
					type: "post",
					async: false,
					url: "${contextPath}/json",
					data: {jsonInfo: _jsonInfo},		/* 매개변수 이름 jsonInfo로 JSON 데이터를 ajax 전송 */
					success: function(data, textStatus) {
						
					},
					error: function(data, textStatus) {
						
					},
					complete: function(data, textStatus) {
						
					}
				});
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">전송</a><br><br>
	<div id="output"></div>
</body>
</html>

package kr.co.ezenac.ajax03;

import java.io.IOException;
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 org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;

/**
 * Servlet implementation class JsonServlet01
 */
@WebServlet("/json")
public class JsonServlet01 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandler(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandler(request, response);
	}

	private void doHandler(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		
		String jsonInfo = request.getParameter("jsonInfo");		//문자열로 전송된 JSON 데이터를 가져옴
		
		try {
			JSONParser jsonParser = new JSONParser();		//JSON 데이터를 처리하기 위한 객체를 생성함
			JSONObject jsonObject = (JSONObject)jsonParser.parse(jsonInfo);	//전송된 JSON 데이터를 파싱함
			
			System.out.println("**회원 정보**");
			System.out.println(jsonObject.get("name"));		//JSON 데이터의 name 속성들을 get()에 전달
			System.out.println(jsonObject.get("age"));
			System.out.println(jsonObject.get("gender"));
			System.out.println(jsonObject.get("nickname"));
			
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JSON 테스트 - 서버의 서블릿에서 웹 페이지로 JSON 형식의 회원 정보 전송</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$("#checkJson").click(function() {
				$.ajax({
					type: "post",
					async: false,
					url: "${contextPath}/json2",
					success: function(data, textStatus) {
						var jsonInfo = JSON.parse(data);		/* 서버에서 전송한 JSON 데이터를 파싱함 */
						var memberInfo = "회원 정보<br>";
						memberInfo += "----------------<br>";
						
						for(var i in jsonInfo.members){
							memberInfo += "이름: " + jsonInfo.members[i].name + "<br>";
							memberInfo += "나이: " + jsonInfo.members[i].age + "<br>";
							memberInfo += "성별: " + jsonInfo.members[i].gender + "<br>";
							memberInfo += "별명: " + jsonInfo.members[i].nickname + "<br><br><br>";
						}
						$("#output").html(memberInfo);
					},
					error: function(data, textStatus) {
						alert("에러가 발생했습니다.");
					},
					complete: function(data, textStatus) {
						
					}
				});
			});
		});
	</script>
</head>
<body>
	<a id="checkJson" style="cursor: pointer;">회원 정보 수신하기</a><br><br>
	<div id="output"></div>
</body>
</html>

package kr.co.ezenac.ajax03;

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 org.json.simple.JSONArray;
import org.json.simple.JSONObject;

/**
 * Servlet implementation class JsonServlet02
 */
@WebServlet("/json2")
public class JsonServlet02 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandler(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doHandler(request, response);
	}
	
	//JSON 배열에 정보 저장
	private void doHandler(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html; charset=utf-8");
		PrintWriter writer = response.getWriter();
		
		JSONObject totalObject = new JSONObject();		//배열을 저장할 totalObject
		JSONArray membersArray = new JSONArray();		//JSON 객체를 저장
		JSONObject memberInfo = new JSONObject();		//회원 한 명 정보가 들어가 JSON 객체 선언
		memberInfo.put("name", "이순신");
		memberInfo.put("age", "30");
		memberInfo.put("gender", "남자");
		memberInfo.put("nickname", "충무공");				//회원 정보 name/value 쌍으로 저장함
		membersArray.add(memberInfo);					//회원 정보를 다시 JSONArray 배열에 저장함
		
		memberInfo = new JSONObject();		
		memberInfo.put("name", "신사임당");
		memberInfo.put("age", "40");
		memberInfo.put("gender", "여자");
		memberInfo.put("nickname", "오만원");				
		membersArray.add(memberInfo);	
		
		totalObject.put("members", membersArray);		//totalObject에 members라는 name으로 membersArray를 value로 저장함
		
		String jsonInfo = totalObject.toJSONString();	//JSONObject를 문자열로 변환함
		System.out.println(jsonInfo);
		
		writer.print(jsonInfo);				//JSON 데이터를 브라우저로 전송
	}
}

저작자표시 비영리 변경금지

'개발자 수업 > JSP' 카테고리의 다른 글

26. Model2 방식 - 회원 (0)	2021.12.22
25. Model2 방식 (0)	2021.12.21
23. 파일 업로드 다운로드 (0)	2021.12.16
22. JSTL (0)	2021.12.15
21. 표현 언어(EL) (0)	2021.12.15

ABOUT ME

Leeyun Leeyun

'개발자 수업 > JSP' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'개발자 수업 > JSP' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바