비동기 통신
XMLHttpRequest
자바스크립트 비동기 통신의 근간이 되는 객체
이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있습니다.
즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 있게 됩니다.
*AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
예제
var xhr = new XMLHttpRequest(); //XMLHttpRequest 객체
var formData = new formData(); //xhr로 보내질 데이터 폼
formData.append('boardId',boardId);
formData.append('content',content);
xhr.onreadystatechange = function(){ //비동기 통신 전 실행 로직 작성
if(xhr.readyState === xhr.DONE){ //readyState가 바뀔 때마다 호출 되므로 완료 시에만 동작하도록 한다.
if(xhr.status === 200 || xhr.status === 201){
console.log(xhr.responseText); //응답이 단일 값일 때,
console.log('성공');
//json으로 받을 때만 사용
//1. var data = JSON.parse(oReq.responseText);
/*2. var data = xhr.response;
for(var i=0;i<data.length;++i){
console.log(data[i].question_text);
} */
}else{
console.log('실패');
}
}
};
xhr.open('POST', '/reply/'+boardId); //요청을 보낼 url과 통신방식 입력(GET, PUT, PATCH, DELETE, HEAD)
//xhr.responseType='json'; //응답 데이터 형식을 json으로 받고 싶을 때
xhr.send(formData); //요청과 함께 보낼 데이터 입력
xhr.readyState
AJAX 요청 시 XHR 객체는 각 상태별로 readyState가 바뀐다.
| 변수 | 값 | 설명 |
|---|---|---|
| readyState | [0, 1, 2, 3, 4] | xhr객체의 상태 값 |
| xhr.UNSENT | 0 | 보내지 않음 |
| xhr.OPENED | 1 | open 메소드를 호출하는 순간 |
| xhr.HEADERS_RECEIVED | 2 | 모든 요청에 대한 응답이 도착 |
| xhr.LOADING | 3 | 요청한 데이터를 처리 중 |
| xhr.DONE | 4 | 요청 완료 시 |
위의 예제 중 실제 readyState가 바뀔 때마다 미리 설정되어있는 콜백 함수(onreadystatechange 내 function)를 호출한다.
Header 정보 추가
헤더 정보를 추가하고 싶을 때 아래와 같이 send전에 입력해주면 된다.
xhr.setRequestHeader('Content-Type', 'application/json'); // 컨텐츠타입을 json으로
GET 요청 시
GET요청은 HTTP 스펙 상 body에 보내면 안되므로, url과 함께 보내주는 것이 좋다.
xhr.open('GET', 'https://www.naver.com/api/get?name=chj');
Response 데이터 타입 설정
// 텍스트 파일의 응답 처리는 responseText 프로퍼티를 사용해야 함.
xhr.responseText;
// 텍스트 파일의 응답 처리에 responseXML 프로퍼티를 사용하면 null을 반환함.
xhr.responseXML;
동기식 통신을 원할 때
open 세 번째 인자에 false를 넣어줌
xhr.open('POST', '/reply/'+boardId, false); //기본 값 : true(동기식)
Reference
http://www.tcpschool.com/xml/xml_dom_xmlHttpRequest
https://popcorn16.tistory.com/128
https://www.zerocho.com/category/HTML&DOM/post/594bc4e9991b0e0018fff5ed
https://velog.io/@surim014/AJAX란-무엇인가