Spring - Ajax (비동기) 통신 ( 로그인 기능 및 List 출력 )

Spring - Ajax (비동기) 통신 ( 로그인 기능 및 List 출력 )

IT/Spring 2020. 5. 8. 13:18

안녕하세요.

저희가 AWS 서버를 이용하여 웹서비스 프로젝트를 만들었습니다.

https://kshman94.tistory.com/31

Spring - Amazon RDS DB 연동 및 확인 (Insert, Select)

안녕하세요 :) 전 시간에는 Amazon RDS DB를 생성하고 설정하는 방법을 했는데, 오늘 시간에는 설정한 RDS DB를 Spring Boot와 연동을 해보려고 합니다. 요거까지 설정이 된다면 개발 셋팅이 얼추 마무리가 되어가..

kshman94.tistory.com

위 프로젝트를 통하여, Ajax 통신을 이용하여,

웹서버와 통신하여 요청된 내용에 따라 데이터를 가공하여 웹 페이지로 돌려주는 예제를 만들어 보려고 합니다.

Ajax 통신은 실무에서도 매우 많이 쓰이니 한번 공부하며 익혀두면 좋을 것 같습니다.

그전에, 현재 저희가 만든 웹프로젝트는 어떻게 내부가 돌아가는지는 알고 가야,

서버와 통신할 때 조금 더 수월하게 할 수 있겠지요?

그럼 지금 부터 시작하겠습니다 !

1. Ajax 란 ?

Ajax는 Javascript의 라이브러리 중 하나이며,

브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부분만을 위한 데이터를 로드하는 기법입니다. 즉 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간의 XML 데이터를 주고 받는 기술이라고 할 수 있겠습니다.

기존의 웹은 HTML의 폼의 내용을 작성해서 이를 웹 서버로 제출(submit)하면, 웹 서버는 요청된 내용에 따라서 데이터를 돌려줍니다.

그러나, Ajax를 이용하게 되면 필요한 데이터만을 웹 서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있습니다. 웹서버에서 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되기 때문에 클라이언트와 웹 서버 사이에 교환되는 데이터량과 데이터처리량이 줄어듭니다. 그러기에 어플리케이션의 응답성이 좋아지게 됩니다.

2. Ajax 의 장단점

Ajax 장점

1. 웹페이지의 속도향상

2. 서버의 처리가 완료 될때까지 기다리지 않고 처리 가능하다.

3. 서버에서 Data만 전송해면 되므로 전체적인 코딩의 양이 줄어든다.

4. 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. 사진공유 사이트 Flickr의 경우 사진의 제목이나 태그를 페이지 리로드 없이 수정할 수 있다.

Ajax 단점

1. 히스토리 관리가 안 된다. (보안에 좀 더 신경을 써야한다.)

2. 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.

3. XMLHttpRequest를 통해 통신을 하는 경우사용자에게 아무런 진행 정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.

3. Ajax 실습

- 로그인을 하면 로그인 결과를 DB Insert

- 로그인 결과 Web 에서 보여주기

사전준비 : login 테이블 만들기

mysql Workbench 이용하여 테이블 생성 쿼리를 수행합니다.

CREATE TABLE login ( 
                      member_num int(11)  not null auto_increment
					, id VARCHAR(100) not null
                    , pw varchar(100) not null
                    , regdate datetime not null default current_timestamp
					, PRIMARY KEY(member_num)
					);

1) 로그인 페이지 만들기

요렇게 파일을 만들고,

loginChk 함수를 보면, ajax를 이용하게 되지요.

ajax를 이용해서 사용자가 입력한 ID의 값과 PW 값을 서버로 보내게 됩니다.

서버 통신이 끝난 후 data라는 변수로 서버의 리턴값을 받아 웹에서 보여주게 됩니다.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
	<title>Home</title>
</head>
<script src="./resources/js/jquery.js"></script>
<script>
$(document).ready(function () {
	$("#login_btn").on('click', function() {
		loginChk();
	})
});
	
function loginChk() {
    $.ajax({
        url: "/webservice/loginChk",
        type: "POST",
        data: {
        	id:$("#id").val(),
        	pw:$("#pw").val()
        },
        success: function(data){
            alert(data.Msg);
        },
        error: function(){
            alert("err");
        }
  	});
}
</script>
<body>
	<table>
		<tr>
			<td>아이디 : </td>
			<td><input type="text" id="id"></td>
		</tr>
		<tr>
			<td>비밀번호:</td>
			<td><input type="password" id="pw"></td>
		</tr>
		<tr>
			<td><div id="login_btn" style="background-color:#ddd; cursor:pointer;">로그인</div>
		</tr>
	</table>
</body>
</html>

2) loginController.java 만들기

loginController.java 파일을 만들고 소스를 추가하도록 하겠습니다.

-- loginController.java 소스

/loginChk 를 보게되면,

request.getParameter("id") / request.getParmeter("pw")

요렇게 사용하면 이 두가지를 웹에서 보낸 데이터를 서버에서 받을 수 있습니다.

웹에서 보낸 데이터를 서버에서 받아, VO 객체에 담아 Insert를 합니다.

@ResponseBody 를 붙여야 하는 이유는,

@ResponseBody가 없다면 해당 url은 String 으로 인식하여 return값을 페이지로 인식한다. 그러기에 ajax 404 오류가 발생합니다.

그래서 @ResponseBody를 써줘야 ajax가 원하는 데이터를 가져와서 success 일 경우 서버에서 보내준 데이터를 쓸 수 있습니다.

package com.spring.webservice;

import java.util.HashMap;
import java.util.Locale;

import javax.servlet.http.HttpServletRequest;

import org.apache.ibatis.session.SqlSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.spring.webservice.vo.loginVO;

@Controller
public class loginController {
	
	@Autowired
	private SqlSession sqlSession;
	
	
	@RequestMapping(value = "/login", method = RequestMethod.GET)
	public String login(Locale locale, Model model) {
		
		return "login";
	}
	
	@RequestMapping(value = "/loginChk", method = RequestMethod.POST)
	@ResponseBody
	public HashMap <String, String> loginChk(Locale locale, Model model, HttpServletRequest request) {
		HashMap<String, String> result = new HashMap <String,String>();
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		
		loginVO loginVO = new loginVO();
		
		loginVO.setId(id);
		loginVO.setPw(pw);
		
		int insertRst = sqlSession.insert("login.insert", loginVO);
		
		if ( insertRst > 0) {
			String Msg = "성공";
			String Code = "0";
			
			result.put("Msg", Msg);
			result.put("Code", Code);
			
			return result;
		} else {
			String Msg = "실패ㅔ";
			String Code = "1";
			
			result.put("Msg", Msg);
			result.put("Code", Code);
			
			return result;
		}
	}
}

3) loginVO.java 생성

VO 객체를 통하여 DB와 통신을 해야 하기 때문에 VO 객체를 만들어줍니다.

package com.spring.webservice.vo;

import java.sql.Date;

public class loginVO {
	private int member_num;
	private String id;
	private String pw;
	private Date regDate;
	
	public int getMember_num() {
		return member_num;
	}
	public void setMember_num(int member_num) {
		this.member_num = member_num;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPw() {
		return pw;
	}
	public void setPw(String pw) {
		this.pw = pw;
	}
	public Date getRegDate() {
		return regDate;
	}
	public void setRegDate(Date regDate) {
		this.regDate = regDate;
	}
	
	
}

4) login.xml 생성 / mybatis-config.xml 수정

DB를 이용해야 하기 때문에,

DB Mapper 및 login.xml을 만들어 작성합니다.

매퍼를 등록하지 않으면, 소스는 login.xml을 찾지 못해 오류가 납니다.

mybatis-config.xml 소스

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
         
<configuration>
    <mappers>
    	<!-- 테스트 -->
        <mapper resource="/mybatis/test.xml" />
        
        <!--  로그인  -->
        <mapper resource="/mybatis/login.xml" />
    </mappers >   
</configuration>

parameterType="com.spring.webservice.vo.loginVO"

요부분은 파라미터로 받는 클래스를 말합니다.

저희는 아까 loginVO 라는 객체를 통해 저장했으니,

저장한 loginVO 안에 id와 pw를 받아와서 insert를 합니다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="login">

	<insert id="insert" parameterType="com.spring.webservice.vo.loginVO">
		INSERT INTO
		       login (
		       		 id
		       	   , pw
		       )
		       VALUES (
			       		 #{id}
			       	   , #{pw}
		       )
 	</insert>

 </mapper>

5) 로그인 Insert 결과 확인

짜잔

정상적으로 로그인 이력을 남기는 것을 확인했습니다 !

이번에는,

이 이력들을 웹 페이지에서 List 형태로 볼 수 있도록 만들어 보겠습니다.

id에 입력된 아이디로 조회하여 해당 아이디만 이력을 볼 수 있도록 만들어보겠습니다.

사전준비 : id 를 "test"로 5-10번 정도 로그인 하기 (이력남기기)

1) login.jsp 수정

아까와 똑같이 ajax를 통해 데이터를 보냅니다.

ajax의 가장 큰 장점인 응답값으로 웹 페이지를 구성할 수 있습니다.

아래처럼 for문으로 list들의 정보들로 table을 구성할 수 있습니다.

-- script 추가하기

$(document).ready(function () {
	$("#login_btn").on('click', function() {
		loginChk();
	});
	
	//이력 보기 클릭 시 이벤트 발생
	$("#login_log_btn").on('click', function() {
		loginLog();
	});
});

function loginLog() {
	
	if ($("#id").val() == "") {
		alert("아이디를 입력하세요.");
		return;
	}
	
	$.ajax({
        url: "/webservice/loginLog",
        type: "POST",
        data: {
        	id:$("#id").val()
        },
        success: function(data){
           if (data.Code == 0 ) {
	        	for (i=0; i<data.data.length; i++ ) {
	            	var tag = "<tr>" + 
		   	                   		"<td>" + data.data[i].member_num + "</td>" + 
		   	                   		"<td>" + data.data[i].id + "</td>" +
		   	                   		"<td>" + data.data[i].pw + "</td>" +
		   	                   		"<td>" + data.data[i].regDate + "</td>" +
	   	                   	  "</tr>"   
	   	                   	  
	   	                   	  
	   	            $("#login_log_tb").append(tag);
	            }
           } else {
        	   alert(data.Msg);
           }
        },
        error: function(){
            alert("err");
        }
  	});
}

-- hmtl 추가하기

<style>

#login_log table td, th {
	width:100px;
	border: 1px solid #444444;
    border-collapse: collapse;
}

</style>



<div id="login_log_btn" style="margin-top:100px; cursor:pointer; background-color:#ddd; width:100px;">이력보기</div>
	<div id="login_log" style="padding-top:20px;">
		<table id ="login_log_tb">
			<tr> 
			      <th>번호</th> 
	              <th>아이디</th>
	              <th>비밀번호</th>
	              <th>가입날짜</th>
	        </tr> 
		</table>
	</div>

2) loginController.java 수정

selectList를 이용해 List를 loginVO의 객체에 담습니다.

@RequestMapping(value = "/loginLog", method = RequestMethod.POST)
	@ResponseBody
	public HashMap <String, Object> loginLog(Locale locale, Model model, HttpServletRequest request) {
		HashMap<String, Object> result = new HashMap <String,Object>();
		
		String id = request.getParameter("id");
		
		loginVO loginVO = new loginVO();
		
		loginVO.setId(id);
		
		List<loginVO> logList = sqlSession.selectList("login.loginLogList", loginVO);
		
		if ( logList.isEmpty() ) {
			String Msg = "이력이 없습니다.";
			String Code = "1";
			
			result.put("Msg", Msg);
			result.put("Code", Code);
			
			return result;
		} else {
			String Msg = "성공";
			String Code = "0";
			
			result.put("Msg", Msg);
			result.put("Code", Code);
			result.put("data", logList);
			
			return result;
		}
	}

3) login.xml 수정

resultType 보이시나요?

이처럼 VO 객체에 결과 값을 담아 VO 객체를 웹으로 리턴하여 사용할 수 있습니다.

<select id="loginLogList" parameterType="com.spring.webservice.vo.loginVO" resultType="com.spring.webservice.vo.loginVO">
		SELECT *
		  FROM login
		 WHERE id = #{id}
 </select>

4) 결과 확인

짜잔

해당 ID만 검색하여 리스트를 출력할 수 있습니다.

긴 글 읽어주셔서 감사합니다.

ajax는 실무에서 너무 많이 쓰이니 꼭꼭 습득하고 익혀서 실무에서 적용 잘 하시길 바랍니다.

잘안되거나 어려운 것이 있으시면 댓글 남겨주시면 도와드리겠습니다 :)

모든 개발자분들 화이팅 입니다 !

저작자표시

'IT > Spring' 카테고리의 다른 글

Spring Solr Client 구현 (Solrj) (0)	2023.01.03
Spring - Amazon RDS DB 연동 및 확인 (Insert, Select) (4)	2020.05.04
Spring - 웹 프로젝트 생성 (0)	2020.04.28

인기포스트 MORE POST

ABOUT ME

졔하네 가족 이야기 졔하네 가족 이야기

1. Ajax 란 ?

2. Ajax 의 장단점

3. Ajax 실습

1) 로그인 페이지 만들기

2) loginController.java 만들기

3) loginVO.java 생성

4) login.xml 생성 / mybatis-config.xml 수정

5) 로그인 Insert 결과 확인

1) login.jsp 수정

2) loginController.java 수정

3) login.xml 수정

4) 결과 확인

'IT > Spring' 카테고리의 다른 글

티스토리툴바

인기포스트 MORE POST

ABOUT ME

1. Ajax 란 ?

2. Ajax 의 장단점

3. Ajax 실습

1) 로그인 페이지 만들기

2) loginController.java 만들기

3) loginVO.java 생성

4) login.xml 생성 / mybatis-config.xml 수정

5) 로그인 Insert 결과 확인

1) login.jsp 수정

2) loginController.java 수정

3) login.xml 수정

4) 결과 확인

'IT > Spring' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바