Spring 개발자 수업 103일차 - Ajax

Ajax

[ 정의 ]

- Asynchronous JavaScript And(XML), 비동기 자바스크립트와 XML

- 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것이다.

- JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다.

- 자바스크립트를 사용한 서버와 통신하는 기술(서버와 데이터를 주고 받는 기술)

- 자바스크립트 기술이다.

 

[ 특징 ]

- 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"이다.

- 페이지 새로고침 없이 서버에 요청

- 서버로부터 데이터를 받고 작업을 수행

 

[ ajax를 왜 사용할까? ]

1개의 웹페이지에서 2개의 업무가 존재

- 이처럼 1개의 웹 페이지에서 두개의 업무를 진행 하려고 할 때 한개의 업무가 실행시 다른 업무 진행 여부와 상관없이 페이지가 새로고침(서버에 요청) 되며 다른 업무가 진행하고 있던 업무는 초기화(없어짐)가 된다. 

- Ajax를 사용한다면 위에서 특징처럼 한개의 페이지 내에서 새로고침 없이 서버에 요청을 할 수 있다.

 

[ 위 웹 페이지 문제점을 ajax를 통해 해결하기 ]

- Spring Ajax 설정 및 파일 생성

1. 새 프로젝트 생성
	Spring Legacy Project > Spring MVC Project > com.test.ajax 생성

2. pom.xml
	- lombok
	- mybatis
	- log4j
	- jackson     : 서버에서 JSON 데이터를 처리
	- json-simple : 서버에서 JSON 데이터를 처리

3. web.xml
	- 인코딩 필터 추가(UTF-8)

4. root.context.xml
	- mybatis
	- log4j

5. servlet-context.xml
	- X

6. 파일 생성
	- com.test.ajax
		- DB.sql (ajax 실습을 위한 테스트 테이블 1개)
		- AjaxController.java
		- AjaxDAO.java
		- UserDTO.java
	- com.test.ajax.mapper
		- ajax.xml
        
	- views > user > user.jsp, count.jsp

 

  1) AjaxController.java

  - 위 문제점이 발생한 웹 페이지는 1개의 웹 페이지에서 2개의 업무를 수행했는데, ajax를 이용해서 다른 업무와 상관없이 하나의 업무 수행 페이지를 각각 분리(버튼 누르기전, 버튼 누른 후) 한다.

  - 버튼 누르기 전: user.jsp 호출

  - 버튼 누른 후: dao 작업 호출

@Controller
public class AjaxController {
	
	@Autowired
	private AjaxDAO dao;

	// 버튼 누르기 전
	@RequestMapping(value = "/user/user.action", method = { RequestMethod.GET })
	public String user(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {
		return "user/user";
	}

	// 버튼 누른 후
	@RequestMapping(value = "/user/count.action", method = { RequestMethod.GET })
	public String count(HttpServletRequest req, HttpServletResponse resp, HttpSession session) {

		int count = dao.getUserCount(); // 인원 수 구하기
		req.setAttribute("count", count);
		
		return "user/count";
	}

}

 

  2) AjaxDAO.java

  - 인원 수(업무 내용)를 구해서(DB 작업) Controller에 반환한다.

@Repository
public class AjaxDAO {

	@Autowired
	private SqlSessionTemplate template;

	public int getUserCount() {
		return template.selectOne("ajax.getUserCount");
	}
}

 

  3) ajax.xml

  - 미리 만들어둔 테이블에서 인원수 구하기(총 5명의 정보가 INSERT 되어있다.)

<mapper namespace="ajax">

	<select id="getUserCount" resultType="Integer">
		select count(*) from tblAjaxUser
	</select>

</mapper>

 

  4) user.jsp

  - HTML (form 한개와 임의의 다른 업무 구역(input type="text")이 나뉘어져 있다.)

<div class="container">
	<h1 class="page-header">Ajax</h1>      
  		
	<div id="output" class="alert alert-success"></div>
	
	<button id="btn" type="button" class="btn btn-default">유저수 가져오기</button>
	<button type="button" class="btn btn-default" onclick="$('#output').text('');">페이지 초기화</button>
		
	<hr>
	
	<h2>다른 업무</h2>
	
	<input type="text" class="form-control">
</div>

 

  - Script (XMLHttpRequest 객체 생성)

$('#btn').click(function() {
			
	// XMLHttpRequest
	let ajax = new XMLHttpRequest();
						
	ajax.onreadystatechange = function() {
		
		// readyState == 4 > 서버에서 데이터를 클라이언트(ajax)에게 반환 완료
		if (ajax.readyState == 4) {
			$('#output').text('인원수: ' + ajax.responseText);
					
		}
	};		
	// ------------------------------> ajax 설정 완료
	// 연결 요청
	ajax.open('GET', '/ajax/user/count.action');
			
	// 데이터 전송(데이터 유무와 상관없이 반드시 실행) -> 연결 요청 완료
	ajax.send();
			
});

 

  5) count.jsp

  - user.action 페이지에서 버튼을 클릭했을 때 발생하는 이벤트(인원 수 호출 업무) 결과 출력하기

  - 결과값만 나타내야 하므로 태그는 전부 제거하고 JSTL만 입력한다.

${count}

 

- 결과 페이지

1개의 웹페이지에서 2개의 업무가 존재

   -> 위의 업무(클릭이벤트)를 A 아래의 업무(text)를 B라고 한다면 문제가 됬었던 A업무 실행 시 B업무가 없어지는(초기화) 현상이 발생됬었는데, Ajax를 적용한 후 A업무가 어떤 클릭 이벤트를 발생 시키더라도 B업무는 그대로 존재하며 새로고침이 발생하지 않는다!!

 

[ Ajax 도움 사이트 ]

- https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

Ajax 시작하기 - 웹 개발자 안내서 | MDN

---

MEMO>

# Ajax는 자바스크립트 기술이며, 스크립트 부분에 많이 신경 쓰면 된다.

# 위 예제 Script에서 사용했던 XMLHttpRequest는 자바스크립트 비동기 통신 객체이며 서버와 데이터를 주고 받는 역할을 한다.

# XMLHttpRequest객체 생성을 하면 onreadystatechange라는 함수를 제공하는데 콘솔로그에 출력 한다면 0, 1, 2, 3, 4가 작동되는걸 볼 수 있다.

# 내일은 동기, 비동기 통신에 대해서 배울 예정이다!