CH43 Ajax

43 Ajax

AJAX

WebAPI 중 XMLHttpRequest 객체를 기반으로 동작함

장점

1. 변경할 부분 갱신하는데 필요한 데이터만 받아오기 때문에 불필요한 통신이 없음
2. 화면 깜박임이 없음
3. 블로킹 없이 동작함

JSON

JavaScrtip Object Noation

클라이언트-서버간 HTTP통신을 위한 텍스트 데이터 포맷

JSON 표기방식

객체 리터럴과 유사하게 키-값으로 이뤄진 순수한 텍스트임

JSON의 키는 반드시 큰 따옴표로 묶어야함

JSON.stringify

객체를 JSON포맷의 문자열로 변환함

클라이언트가 서버로 객체를 보내려면 객체를 문자열화 해야하기때문임

이를 직렬화라함

JSON.parse

JSON문자열을 객체로 변환함

서버→클라이언트로 도착한 데이터는 문자열임 이를 JSON으로 객체화해야 사용가능함

이를 역직렬화라고 함

XMLHttpRequest

XML 객체는 XMLHttpRequest 생성자 함수를 통해 생성함

const xhr=new XMLHttpRequest();

객체 프로퍼티와 메서드

프로토타입 프로퍼티

프로토타입 프로퍼티	설명
readyState	HTTP 요청의 현재 상태를 나타내는 정수
UNSET : 0
OPENED : 1
HEADER_RECEIVED : 2
LOADING : 3
DONE : 4
status	HTTP 요청 응답 상태 (200)
statusText	HTTP 요청에 대한 응답 메시지 문자열 (OK)
responseType	HTTP 응답 타입
(document, json, text, blob, arraybuffer)
response	HTTP요청에 대한 응답 몸체
responseType에 따라 타입이 다름
responseText	서버가 전송한 HTTP요청에 대한 응답 문자열

이벤트 핸들러 프로퍼티

onreadystatechange	readyState프로퍼티 값이 변경된경우
onloadstart	요청 응답을 받기 시작한 경우
onprogress	응답을 받는 도중 주기적으로 발생
onabort	abort메서드에 의해 HTTP요청이 중단된 경우
onerror	요청 에러발생
onload	성공적으로 완료된 경우
ontimeout	요청시간 초과
onloaded	요청이 완료된경우 - 성공 또는 실패

객체 메서드

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

객체 정적프로퍼티

UNSENT	0	open 호출이전
OPENED	1	open 호출 이후
HEADER_RECEIVED	2	send 호출 이후
LOADING	3	서버 응답중
DONE	4	서버 응답 완료

XMLHttpRequest.prototype.open

서버에 전송할 HTTP 요청을 초기화함

xhr.open(method, url, async_option(bool));

method : GET, POST, PUT, PATCH, DELETE

url : HTTP요청을 보낼 URL

async : 비동기 여부

XMLHttpRequest.prototype.send

open 메서드로 초기화된 HTTP 요청을 서버에 전송함

인수값으로 body를 작성함

해당 인수값은 반드시 텍스트만 들어가므로 객체인경우 직렬화를 해줘야함

xhr.send(JSON.stringify({어쩌구~}));

메서드가 GET인경우 인수는 무시됨

XMLHttpRequest.prototype.setRequestHeader

HTTP요청 헤더값을 바꿈

반드시 open을 한 뒤에 사용해야함

content-type의 옵션 : 이후 올 body의 타입을 지정해줌

MIME타입	서브타입
text	text/plain, text/html, text/css, text/javascript
application	application/json, application/x-www-form-urlencode
multipart	multipart/formed-data

실제 요청 보내보기

onreadystatechange에 이벤트 핸들러 등록

const xhr= new XMLHttpRequest();
xhr.open('get', 'https://~~어쩌구');
xhr.send();

xhr.onreadystatechange=()=>{
    if(xhr.readyState!==XMLHttpRequest.DONE) return;
    if(xhr.status===200){
        console.log(JSON.parse(xhr.response));
    }else{
        console.error('Error', xhr.status, xhr.statusText);
    }
}

혹은

onload에 이벤트 핸들러 등록

xhr.onload=()=>{
    if(xhr.status===200){
        console.log(JSON.parse(xhr.response));
    }else{
        console.error('Error', xhr.status, xhr.statusText);
    }
}