쌍용교육센터 - 49일

2024.04.26

동기&비동기

https://tmddus3002.tistory.com/54

Ajax

 

웹 → ajax(전송) → 서버

myString.jsp

<!-- 
text/html -> text/plain 으로 변경 해줘야 텍스트만 전송할 수 있음
 -->
<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
Hello JSP!

s01_ajax.html

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
	//Ajax(Asynchronous Java Script And XML) : 자바스크립트와 XML을 이용한 비동기 통신
	$(document).ready(function(){
		//text 정보 읽어 옴
		$.ajax({
			url : 'myString.jsp', //서버 프로그램 포출 URL
			success : function(param){ //서버의 응답이 성공해서 데이터를 전달 받으면 호출
				$('body').append(param);
			}
		});
	});
</script>

우선 text/html -> text/plain 으로 변경 해줘야 텍스트만 전송할 수 있다.

s01_ajax.html 을 실행하면 ajax의 url값을 타고 들어가 myString.jsp의 텍스트 데이터를 가지고 온다. 이후 데이터 반환을 성공하면 success를 통해 function의 인자로 텍스트 데이터 값이 들어가고 body에 추가해 웹에 보여지게 된다.

 

웹 → ajax(요청) → 서버

myParam.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%
	String name = request.getParameter("name");
	String age = request.getParameter("age");
%>
이름은 <%= name %>이고 나이는 <%= age %>살 입니다.

s02_ajax.html

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
	$(document).ready(function(){
		//텍스트 정보를 읽어 옴
		$.ajax({
			url:'myParam.jsp',//요청 URL
			data:{name:'홍길동', age:21},//서버에 전송할 데이터
			success:function(param){
				$('body').append(param);
			}
		});
	});
</script>

s02_ajax.html을 실행하면 url을 타고 들어가 요청한 데이터를 찾고 data에 명시한 키들을 매칭해서 해당 값들을 보내준다. 그리고 그 결과를 param으로 받아서 body에 추가시켜 웹에 표현한다.

 

웹 → ajax(전송) → 서버(xml형식)

myXML.jsp

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%-- 주석 --%>
<?xml version="1.0" encoding="UTF-8"?>
<!-- 
xml 선언 후에 html 주석은 인정됨 
xml 선언 전에 주석을 사용하고 싶다면 jsp주석을 사용해야 함
-->
<people>
	<person>
		<name>홍길동</name>
		<job>형사</job>
		<age>20</age>
	</person>
	<person>
		<name>박문수</name>
		<job>교사</job>
		<age>40</age>
	</person>
</people>

s03_ajax.html

<script src="../js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
	//XML 데이터를 읽어 옴
	$.ajax({
		url:'myXML.jsp',//요청 URL
		success:function(param){
			$(param).find('person').each(function(){
				let name = '<li>' + $(this).find('name').text() + '</li>';
				let job = '<li>' + $(this).find('job').text() + '</li>';
				let age = '<li>' + $(this).find('age').text() + '</li>';
				
				$('body').append('<ul>' + name + job + age +'</ul>');
			});
		}
	});
});
</script>

우선 contentType="text/xml; 와 <?xml version="1.0" encoding="UTF-8"?> 를 명시하여 xml형태로 선언해준다. 그 다음 s03_ajax.html를 실행하면 url을 타고 들어가서 태그로 키와 값을 명시한 텍스트 데이터를 가지고 온다. 그 후 jQuery를 이용해 값을 필요한 값을 찾아 사용할 수 있다.

이때 <people>의 자손인 person이 여러개라서 배열로 처리되어 데이터가 들어온다. 따라서 each 메서드를 이용해 배열의 값을 반환해줬다.

 

웹(JSON: Javascript Object Notation) → ajax(전송) → 서버

myJSON.jsp

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

<%
	String name = "김유신";
	String job = "군인";
	int age = 30;
%>

[{ <%-- 주석 --%>
	"name":"장영실",
	"job":"과학자",
	"age":50
},{
	"name":"<%= name %>",
	"job":"<%= job %>",
	"age":<%= age %>
}]

s04_ajax.html

<script>
	$(document).ready(function(){
		//JSON(Javascript Object Notation) 데이터를 읽어 옴
		$.ajax({
			url:'myJSON.jsp',//요청URL
			dataType:'json',//서버로부터 전송받은 데이터의 타입
			success:function(param){
				$(param).each(function(index,item){
					let output = '';
					output += '<div>';
					output += '<h1>' + item.name + '</h1>';
					output += '<p>' + item.job + '</p>';
					output += '<p>' + item.age + '</p>';
					output += '</div>';
					
					$('#output').append(output);
				});
			}
		});
	});
</script>

웹에서 JSON 형식으로 데이터를 입력해주고 ajax에서 dataType을 json으로 명시해주면 키와 벨류값으로 데이터를 가지고 온다.

 

[실습] 회원가입(아이디 중복 체크)

confirmId.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="kr.util.DBUtil" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%
	//전송된 데이터 인코딩 타입 지정
	request.setCharacterEncoding("utf-8");
	//전송된 데이터 반환
	String id = request.getParameter("id");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	String sql = null;
	try{
		//Connection 객체 반환
		conn = DBUtil.getConnection();
		//SQL문 작성
		sql = "SELECT id FROM people WHERE id=?";
		//JDBC 수행 3단계:PreparedStatement 객체 생성
		pstmt = conn.prepareStatement(sql);
		//?에 데이터 바인딩
		pstmt.setString(1,id);
		//JDBC 수행 4단계
		rs = pstmt.executeQuery();
		if(rs.next()){//ID 중복
%>
		{"result":"idDuplicated"}
<%			
		}else{//ID 미중복
%>
		{"result":"idNotFound"}
<%			
		}
	}catch(Exception e){
%>
		{"result":"failure"}
<%		
		e.printStackTrace();
	}finally{
		//자원 정리
		DBUtil.executeClose(rs, pstmt, conn);
	}
%>

member.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>아이디 중복 체크</title>
<style type="text/css">
	ul{
		padding:0;
		margin:0;
		list-style:none;
	}
	ul li{
		padding:0;
		margin:0 0 10px 0;
	}
	label{
		width:100px;
		float:left;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//아이디 중복 체크 결과 -> 0:아이디 중복 체크 미실시(아이디 중복)
	//                  1:아이디 미중복
	let count = 0;
	
	$('#confirmId').click(function(){
		if($('#id').val().trim()==''){
			alert('아이디를 입력하세요!');
			$('#id').val('').focus();
			return;
		}
		
		//서버와 통신
		$.ajax({
			url:'confirmId.jsp', //요청URL
			type:'post', //클라이언트에서 데이터를 전송할 때 전송 방식
			data:{id:$('#id').val()}, //서버로 전송할 데이터
			dataType:'json', //서버로부터 전송되어지는 데이터의 타입
			success:function(param){
				if(param.result == 'idDuplicated'){//아이디 중복
					count = 0;
					$('#id_signed').text('이미 등록된 아이디').css('color','red');
					$('#id').val('').focus();
				}else if(param.result == 'idNotFound'){//아이디 미중복
					count = 1;
					$('#id_signed').text('사용 가능한 아이디').css('color','black');
				}else{//오류 발생
					count = 0;
					alert('아이디 중복 체크 오류');
				}
			},
			error:function(){
				count = 0;
				alert('네트워크 오류 발생');
			}
		});
	});//end of click
	
	//아이디 입력창에 데이터를 입력하면 중복 체크 관련 정보 초기화
	$('#insert_form #id').keydown(function(){
		count = 0;
		$('#id_signed').text('');
	});//end of keydown
	
	$('#insert_form').submit(function(){
		if($('#id').val().trim()==''){
			alert('아이디를 입력하세요');
			$('#id').val('').focus();
			return false;
		}
		if(count == 0){
			alert('아이디 중복 체크 필수');
			return false;
		}
	});
	
});
</script>
</head>
<body>
<form id="insert_form" action="register.jsp" method="post">
	<fieldset>
		<legend>회원 가입</legend>
		<ul>
			<li>
				<label for="id">아이디</label>
				<input type="text" name="id" id="id">
				<input type="button" id="confirmId"
				                      value="아이디 중복체크">
				<span id="id_signed"></span>                      
			</li>
			<li>
				<input type="submit" value="전송">
			</li>
		</ul>
	</fieldset>
</form>
</body>
</html>

 

[실습] 회원가입(테이블 갱신)

content.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원 목록</title>
<style type="text/css">
	form{
		width:700px;
		margin:10px auto;
	}
	ul{
		padding:0;
		margin:0;
		list-style:none;
	}
	ul li{
		padding:0;
		margin:0 0 10px 0;
	}
	label{
		width:150px;
		float:left;
	}
	table{
		border:1px solid gray;
		width:700px;
		margin:0 auto;
		border-collapse:collapse;
	}
	td{
		border:1px solid gray;
		padding:10px;
	}
</style>
<script type="text/javascript" src="../js/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	//회원 목록
	function selectList(){
		$.ajax({
			url:'getPeopleJSON.jsp',
			dataType:'json',
			success:function(param){
				//table의 내부 내용물 제거(초기화)
				$('#output').empty();
				$('#output').append('<tr><th>아이디</th><th>이름</th><th>직업</th><th>주소</th><th>혈액형</th></tr>');
				$(param).each(function(index,item){
					let output = '';
					output += '<tr>';
					output += '<td>' + item.id + '</td>';
					output += '<td>' + item.name + '</td>';
					output += '<td>' + item.job + '</td>';
					output += '<td>' + item.address + '</td>';
					output += '<td>' + item.blood_type + '</td>';
					output += '<td>' + item.reg_date + '</td>';
					output += '</tr>';
					
					$('#output').append(output);
				});
			},
			error:function(){
				alert('네트워크 오류 발생');
			}
		});
	}
	//회원 등록 이벤트 연결
	$('#insert_form').submit(function(event){
		//입력 양식의 내용을 요청 매개 변수 문자열로 만듬
		//(파라미터네임과 value의 쌍, 인코딩 처리)
		let input_data = $(this).serialize();
		
		//서버와 통신
		$.ajax({
			url:'insertPerson.jsp',
			type:'post',
			data:input_data,
			dataType:'json',
			success:function(param){
				if(param.result == 'success'){//회원 가입 성공
					alert('회원 가입 완료');
					//폼 초기화
					$('#insert_form input[type="text"]').val('');
					//목록 호출
					selectList();
				}else{//회원 가입 실패
					alert('회원 가입 오류 발생');
				}
			},
			error:function(){
				alert('네트워크 오류 발생');
			}
		});
		
		//기본이벤트 제거
		event.preventDefault();
	});//end of submit
	
	//초기 화면에 데이터를 표시
	selectList();	
});	
</script>
</head>
<body>
	<form id="insert_form">
		<fieldset>
			<legend>회원 등록</legend>
			<ul>
				<li>
					<label for="id">아이디</label>
					<input type="text" name="id" id="id">
				</li>
				<li>
					<label for="name">이름</label>
					<input type="text" name="name" id="name">
				</li>
				<li>
					<label for="job">직업</label>
					<input type="text" name="job" id="job">
				</li>
				<li>
					<label for="address">주소</label>
					<input type="text" name="address" id="address">
				</li>
				<li>
					<label for="blood_type">혈액형</label>
					<input type="text" name="blood_type" id="blood_type">
				</li>
				<li>
					<input type="submit" value="추가">
				</li>
			</ul>
		</fieldset>
	</form>
	<table id="output">
		<tr><th>아이디</th><th>이름</th><th>직업</th><th>주소</th><th>혈액형</th></tr>
	</table>
</body>
</html>

getPeopleJSON.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="kr.util.DBUtil" %>
<%@ page import="java.sql.*" %>
[<%
	Connection conn = null;
	PreparedStatement pstmt = null;
	ResultSet rs = null;
	String sql = null;
	try{
		//Connection 객체 반환
		conn = DBUtil.getConnection();
		//SQL문 작성
		sql = "SELECT * FROM people ORDER BY reg_date DESC";
		//JDBC 수행 3단계 : PreparedStatement 객체 생성
		pstmt = conn.prepareStatement(sql);
		//JDBC 수행 4단계 : SQL문 실행
		rs = pstmt.executeQuery();
		while(rs.next()){
			String id = rs.getString("id");
			String name = rs.getString("name");
			String job = rs.getString("job");
			String address = rs.getString("address");
			String blood_type = rs.getString("blood_type");
			String reg_date = rs.getString("reg_date");
			
			if(rs.getRow()>1) out.println(",");
			%>
			{
				"id":"<%= id %>",
				"name":"<%= name %>",
				"job":"<%= job %>",
				"address":"<%= address %>",
				"blood_type":"<%= blood_type %>",
				"reg_date":"<%= reg_date %>"
			}
			<%
		}
	}catch(Exception e){
		e.printStackTrace();
	}finally{
		//자원 정리
		DBUtil.executeClose(rs, pstmt, conn);
	}
%>]

insertPerson.jsp

<%@ page language="java" contentType="text/plain; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="kr.util.DBUtil" %>
<%@ page import="java.sql.*" %>
<%
	//전송된 데이터 인코딩 타입 지정
	request.setCharacterEncoding("utf-8");
	//전송된 데이터 반환
	String id = request.getParameter("id");
	String name = request.getParameter("name");
	String job = request.getParameter("job");
	String address = request.getParameter("address");
	String blood_type = request.getParameter("blood_type");
	
	Connection conn = null;
	PreparedStatement pstmt = null;
	String sql = null;
	try{
		//Connection 객체 반환
		conn = DBUtil.getConnection();
		//SQL문 작성
		sql = "INSERT INTO people (id,name,job,address,blood_type,reg_date) VALUES (?,?,?,?,?,SYSDATE)";
		//JDBC 수행 3단계
		pstmt = conn.prepareStatement(sql);
		//?에 데이터 바인딩
		pstmt.setString(1,id);
		pstmt.setString(2,name);
		pstmt.setString(3,job);
		pstmt.setString(4,address);
		pstmt.setString(5,blood_type);
		//JDBC 수행 4단계
		pstmt.executeUpdate();
%>
		{"result":"success"}
<%		
	}catch(Exception e){
%>
		{"result":"failure"}
<%		
		e.printStackTrace();
	}finally{
		//자원 정리
		DBUtil.executeClose(null, pstmt, conn);
	}
	
%>