XMLHttpRequest (XHR)

✔ XMLHttpRequest (XHR)

서버와 상호작용할 때 사용하는 것으로 현페이지의 새로고침 없이도 URL에서 데이털르 가져올 수 있다. 

 

✔ ajax (Asynchronous javascript and xml)

동적으로 서버에서 데이터를 주고받는 기술이다.

 

✔ JSON (Javascript object notation)

오브젝트를 보고 만든 데이터포맷으로 프로그램 언어와 플랫폼 상관없이 서버와 가볍게 전송할 수 있다.

 

---

 

1. XMLHttpRequest 객체는 XMLHttpRequest생성자 함수를 호출하여 생성한다.

XMLHttpRequest 객체는 브라우저에서 제공하는 Web API로 브라우저 환경에서만 정상적으로 실행된다. 

const xhr = new XMLHttpRequest();

 

2. open 메소드로 HTTP 요청을 초기화한다. 

xhr.open("POST", "/join/mail", true);

 

🔎 XMLHttpRequest 객체의 메소드 정리

open	HTTP 요청 초기화
send	HTTP 요청 전송
abort	이미 전송된 HTTP 요청 중단
setRequestHeader	특정 HTTP 요청 헤더의 값을 설정
getResponseHeader	특정 HTTP 요청 헤더의 값을 문자열로 반환

 

3. HTTP 요청 헤더를 설정한다.

xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

 

🔎 content-type은 서버로 전송할 데이터의 MINE 타입 정보를 설정한다.

MINE 타입	content-type 값	목적
application	application/json	json 데이터 전송
text	text/plain	텍스트 데이터 전송
multipart	multipart/from-data	파일 전송

 

4. 문자형태로 직렬화하여 HTTP 요청을 전송한다.

JSON.stringify(obj)	자바스크립트 Object를 문자형태로 직렬화한다.
JSON.parse(json)	json타입을 자바스크립트 object 형태로 변환한다.

xhr.send(JSON.stringify({ mail: mail }));

 

5. HTTP 요청이 성공적으로 완료한 경우

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
    	var data = JSON.parse(xhr.responseText);
    }
};

 

📑 Controller

    @ResponseBody
    @PostMapping("/join/mail")
    public HashMap<String, Object> joinMailSend(@RequestBody Map<String, String> request) {
        HashMap<String, Object> map = new HashMap<>();
        try {
            String mail = request.get("mail");
            mailService.joinMail(mail);
            map.put("success", Boolean.TRUE);
        } catch (MessagingException e) {
            throw new RuntimeException(e);
        }
        return map;
    }