[Spring] AJAX

AJAX (Async Javascript and XML)

 - 비동기 자바스크립트와 XML (요즘엔 JSON을 많이 사용)

 - 해당 웹 페이지를 새로고침하지 않고 요청을 보내 응답 받은 내용을 현재 페이지에 반영할 수 있는 문법

 - 주로 @RestController에 요청을 보내 데이터만 가져와서 활용하는 방식으로 사용한다.

 - 서버로부터 데이터를 응답받을 때마다 이벤트가 발생하고 해당 이벤트를 처리하여 사용한다.

 

XMLHttpRequest

 - 자바스크립트의 비동기 통신 요청 객체

 - 요청을 보내도 페이지가 새로고침 되지 않는다.

 - 인스턴스를 생성한 후 해당 인스턴스에 여러 설정을 한 뒤 요청을 보낸다.

 

xhttp.open(method, url)

 - 첫 번째 파라미터에는 요청 방식을 설정한다. (GET, POST 외의 PUT, DELETE 메서드는 xhttp로만 보낼 수 있다.)

 - 두 번째 파라미터에는 요청 URL을 설정한다.

 

 xhttp의 onreadystatechange 이벤트

 - xhttp 내부의 readyState 값이 변할 때마다 호출되는 이벤트

 - readyState 1 : open()이 성공했을 때 (send하기 전)

 - readyState 2 : 요청에 대한 응답이 도착했을 때

 - readyState 3 : 응답에 대한 처리를 시작했을 때

 - readyState 4 : 응답에 대한 처리가 모두 끝났을 때 (주로 사용)

 

JS에서 AJAX 사용법

const ajaxBtn1 = document.getElementById('ajax-btn1');
const ajaxBtn2 = document.getElementById('ajax-btn2');
const userDiv = document.getElementById('user');

ajaxBtn1.addEventListener('click', (e) => {
        
        // AJAX(비동기 자바스크립트 XML) 요청 객체
        // 비동기 == 화면을 새로고침 하지 않는.
        const xhttp = new XMLHttpRequest();
        
        // open(method, uri) : 요청을 어디에 어떤 방식으로 보낼지 설정한다.
        xhttp.open('GET', '../restful/value1');
        
        // 요청에 대한 응답이 도착했을 때의 이벤트를 설정해야 한다.
        xhttp.addEventListener('readystatechange', (e) => {
                console.log(e.target.responseText);
                userDiv.innerHTML = e.target.responseText;
        });
        
        xhttp.send(); // 보내기
});

ajaxBtn2.addEventListener('click', (e) => {
        const xhttp = new XMLHttpRequest();
        
        xhttp.open('GET', '../restful/employee/json');
        
        xhttp.addEventListener('readystatechange', (e) => {
                if (xhttp.readyState == 4) {
                        // 도착한 JSON 형식 문자열을 Javascript Object로 변환하여 사용할 수 있다.
                        console.log(xhttp.responseText);
                        
                        const emp = JSON.parse(xhttp.responseText);
                        
                        console.log(emp.first_name);
                        console.log(emp.last_name);
                        console.log(emp.salary);
                }
        });
        
        xhttp.send();
});

 

JSON방식으로 데이터 받아서 활용하기

const rollRequest = new XMLHttpRequest();
rollRequest.addEventListener('readystatechange', (e) => {
         
         if (e.target.readyState == 4) {
         // JSON으로 데이터 받아서 활용해보기
                console.log(e.target.responseText);
                
                const empArr = JSON.parse(e.target.responseText);
                
                userDiv.innerHTML = '';
                empArr.forEach((emp) => {
                        const newDiv = document.createElement('div');
                        const newContent = document.createTextNode(
                                `${emp.first_name} ${emp.last_name}`
                        );
                        newDiv.appendChild(newContent);
                        userDiv.appendChild(newDiv);
                        console.log(emp);
                });
});

roll.addEventListener('click', (e) => {
        rollRequest.open('GET', '../employee/roll');
        rollRequest.send();        
});

 

<controller>

package com.ezen.springrest.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.ezen.springrest.dto.Employee;
import com.ezen.springrest.mapper.EmployeeMapper;
import com.ezen.springrest.service.EmployeeEventService;

import lombok.extern.log4j.Log4j;

@Log4j
@RequestMapping("/employee")
@Controller
public class EmployeeController {
	
	@Autowired
	EmployeeEventService eeService;
	
	// @ResponseBody : @Controller 내부에서 REST 방식으로 응답할 때 사용
	@ResponseBody
	@GetMapping(value = "/roll", produces = "application/json")
	public List<Employee> roll() {
		log.info(eeService.getRandomEmployees(10));
		
		return eeService.getRandomEmployees(10);
	}
}

 

AJAX로 INSERT 방식(PUT)

const addBtn = document.getElementById('add');
const modiBtn = document.getElementById('modi');
const addReq = new XMLHttpRequest();
addReq.addEventListener('readystatechange', (e) => {
    if (e.target.readyState == 4) {}
});
addBtn.addEventListener('click', (e) => {
    addReq.open('POST', './add');
    
    // send()에 데이터를 실어보낼 수 있다. (보통 JSON 형식의 문자열을 보낸다.)
    // 보낼 때 해당 데이터가 어떤 컨텐츠 타입인지도 설정해줘야 한다.
    
    // 자바 스크립트 객체를 JSON 형식 문자열로 변환하여 전송하기
    // (※ 데이터들은 input 태그들에서 가져왔다고 가정)
    const emp = {
        first_name: '민식',
        last_name: '최'
    };
    addReq.setRequestHeader('content-type', 'application/json');
    addReq.send(JSON.stringify(emp));
});
const modiReq = new XMLHttpRequest();
modiReq.addEventListener('readystatechange', (e) => {
    if (e.target.readyState == 4) {
        // 서버쪽에서 응답해준 상태코드에 따른 로직 구성이 가능하다.
        console.log('응답받은 상태코드:', e.target.status);
        
        switch (e.target.status) {
            case 200:
                console.log('정상적인 처리를 진행...');
                break;
            case 400:
                console.log('id가 틀려서 안됐다.');
                break;
            default:
                console.log('예상하지 못한 상태코드');
                break;       
        }
    }
});
modiBtn.addEventListener('click', (e) => {
    // ※ input에서 가져온 데이터라고 가정
    const data = {
        employee_id: 307,
        first_name: '신수',
        last_name: '추'
    };
    modiReq.open('PUT', `./put/${data.employee_id}`);
    modiReq.setRequestHeader('content-type' , 'application/json')
    modiReq.send(JSON.stringify(data));
});