브라우저 상에서 순수 자바스크립트만으로 서버에 비동기 AJAX 요청 및 데이터 전송하는 방법을 정리합니다.
(JQuery를 사용하지 않습니다.)
1. XMLHttpRequest 객체 생성
: HTTP 요청 전용 객체인 XMLHttpRequet객체를 생성한다.
const request = new XMLHttpRequest();
2. request 객체 초기화 설정
: 요청 메서드, 경로, 비동기 여부를 설정한다.
request.open('메서드', 'URL경로', '비동기 여부')
* 메서드 : GET, POST, ...
* 비동기여부 : true(비동기, 디폴트값), false(동기)
3. 전송 데이터 타입 설정
: POST/PUT 등으로 데이터를 보낼 때는, RequestHeaer를 아래와 같이 설정해주어야 한다.
1) applicaiton/x-www-form-urlencoded: key=value&key=value...의 형태로 전송
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
2) application/json: {key:value}의 형태로 전송
request.setRequestHeader('Content-type', 'application/json');
4. 요청 & 데이터 전송
: 요청경로(URL)로 시제 요청을 보낸다.
1) 전송 데이터 없는 경우
reqeust.send();
2) application/x-www-form-urlencoded
request.send(`name=${name}&price=${price}`);
3) applicaiton/json
request.send(`{name:녹차, pricie:5000}`);
// 데이터를 전송할 때는 가급적 직렬화(문자열로 변환)해서 보내는게 좋다 => JSON.stringfy(객체);
5. onreadystatechange 이벤트 리스너 등록
: XMLHttpRequest의 상태(readyState) 변경시 마다 호출될 콜백함수를 등록하다.
request.onreadystatechange = function(event){ ..작업 내용 구현... }
: 일반적으로는 아래와 같은 작업을 수행한다.
1) request.readaystate == 4 체크: 응답 데이터 수신 완료 확인
2) request.state = 200 체크: 응답코드 확인
3) request.response 체크: 응답데이터 사용
: readyState의 값은 아래와 같이 변경된다.
* readystate == 0: XMLHttpRequest 객체가 생성되었지만 open()메서드로 초기화 되지 않음
* readystate == 1: XMLHttpRequest 객체가 생성 및 초기화되었지만, send()로 전송되지 않음
* readystate == 2: XMLHttpRequest 객체의 send()메서드가 호출되었지만, 아직 데이터를 받지 못함
* readystate == 3: 데이터의 일부를 받음
* readystate == 4: 데이터를 모두 받음
*** 샘플 코드: 단순 요청
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest</title>
</head>
<body>
<h1>index.html</h1>
<script>
// # 비동기 방식 AJAX 요청
// 1. XMLHttpRequest 객체 생성
const request = new XMLHttpRequest();
// 2. 요청 초기화
request.open('GET', '/요청경로', true);
// 3. 요청 전송
request.send();
// 4. onreadystatechage 이벤트리스너 등록
request.onreadystatechange = function(event){
// 1) 데이터를 다 받았고, 2) 응답코드 200(성공)을 받았는지 체크
if(request.readyState == 4 && request.status == 200){
// 응답받은 데이터 체크
const responseData = request.responseText;
}
}
// 참고. 동기방식 요청 : 응답이 올때까지 브라우저가 멈추므로 더이상 사용하지 않음
/*
const request = new XMLHttpRequest();
request.open('GET', '/요청경로', false);
request.send();
*/
</script>
</body>
</html>
***샘플코드: 데이터 전송 포함 요청
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XMLHttpRequest</title>
</head>
<body>
<button id="btn_get">GET 요청</button>
<button id="btn_put">POST 요청</button>
</body>
<script>
// 1. GET 요청 처리 : name, age 데이터 전송
document.getElementById("btn_get").addEventListener('click', function(event){
// 1) XMLHttpRequest 객체 생성
const request = new XMLHttpRequest();
// 2) onreadystatechange 이벤트리스너 등록
request.onreadystatechange = function(evnet){
if (request.readyState == 4 && request.status == 200){
console.log(request.responseText);
}
}
// 3) open() 초기화
request.open('GET', '/board?name=카레유&age=30', true);
// 요청경로 뒤에 ?key=value&key&value 형태로 데이터를 전송한다.
// 4) send() 전송
request.send();
});
// 2. POST 요청 처리 : name, age 데이터 전송
document.getElementById("btn_get").onclick = function(evnet){
const request = new XMLHttpRequest();
request.onreadystatechange = function(evnet){
if (request.readyState == 4 && request.status == 200){
console.log(request.responseText);
}
}
// POST 설정
request.open('POST', '/board', true);
// !!! POST 전송시, 데이터 전달을 위한 설정
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
request.send(`name=카레유&age=30`);
}
</script>
</html># 참고: JSON 데이터 처리
: 일반적으로 서버로 데이터를 전송할 때는 문자열로 직렬화해서 보내고, 받은 데이터는 객체로 직렬화해서 사용하는 것이 안전하다.
1) 역직렬화: JSON.parse(문자열) => JSON 객체
2) 직렬화: JSON.stringfy(JSON객체) => JSON 문자열
# 참고: XML 데이터 처리
1) HTMLCollection 객체 취득: getElementsByTagName('태그명')
2) 값을 취득: HTMLCollection[index].childNodes[0].nodeValue 등으로 값 취득
* 개인적으로는 JSON을 선호하는 편이다. (상황에 따라 XML to JSON 플러그인 사용도 괜찮은듯 하다.)
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| 자바스크립트 로드 script 태그: async/defer 비동기 속성 (0) | 2021.06.30 |
|---|---|
| Javascript 페이지 이동, 현재 주소 확인: window.location (0) | 2021.06.30 |
| Javascript: Audio 사운드 하나를 연속하여 반복/중복 재생하는 방법 (0) | 2021.06.22 |
| JS: DOM 이벤트 리스너로 객체의 메소드 연결 시, this가 변경되는 문제 (0) | 2021.06.21 |
| HTML/JS: Audio 객체 음악 파일 제어 및 사운드 재생/정지 방법 (0) | 2021.06.19 |
댓글