티스토리 뷰
43.1 Ajax란?
Ajax: Asynchronous Javascript and XML
- 자바스크립트를 사용해서 비동기로 서버에세 요청을 날리고 웹페이지를 동적으로 새로고침하는 방식을 말한다.
- 1999년 마이크로 소프트가 개발하고 2005년 구글 맵스를 통해 가능성이 확인되었다.
- 이전에는 데스크톱 애플리케이션 만큼 브라우저가 이러한 작업을 해낼 수 없다고 믿었다. 이전에는 데이터가 바뀌면 전체 페이지를 새로 받는 방식으로만 개발되었기 때문이다. 이렇게 하면 작은 부분을 바꾸기 위해, 바뀌지 않은 부분을 새로받아야하고, 전체페이지를 다시 렌더링하여 깜빡임이 발생하고, 동기적으로 통신하기 때문에 서버 응답이 있기 전에 다른 동작을 할 수가 없었다. Ajax는 필요한 데이터를 JSON으로 받아와서 해당 부분만 동적으로 고쳐준다. 전체 받기, 새로고침, 블로킹 현상 세가지를 모두 해결한 것이다.
43.2 JSON
- JSON은 http통신을 하기 위한 데이터 포맷이다. 이름은 javascript object notaion이지만 언어에 구애받지 않고 사용한다.
- http통신에서 JSON의 키값은 반드시 큰따옴표로 묶어야한다. 그리고 문자열값 또한 큰따옴표로 묶어야한다.
43.2.1 JSON.stringfy
- javscript 내장 객체 JSON에는 stringfy 메서드가 있다. json을 string으로 직렬화 해준다.
43.3.2 JSON.parse
- 직렬화된 JSON string 데이터를 JSON 오프젝으로 역직렬화 해준다. 배열로 감싸져있어도 직,역직렬화가 가능하다.
43.3 XMLHttpRequest
43.3.1 객체생성
- 브라우저에서는 기본적으로 form과 a태그를 통해 http요청 전송기능을 할 수 있다.
- 자바스크립트를 사용해서 요청을 전송하려면 XMLHttpRequest Web API 객체를 사용한다.
- const xhr = new XMLHttpRequest(); 로 생성해서 사용한다. 브라우저 환경에서만 사용할 수 있다.
43.3.2 xhr 객체의 프로퍼티와 메서드
readyState, status, statusText, responseType, response, responseText 6가지의 프로퍼티를 가진다.
- readyState는 0~4까지의 숫자로 0: unsent 1: opened 2:Headers recieved 3: Loading 4: Done 이다.
- status는 http 상태 응답 코드이다.
- statusText는 응답메시지이다.
- responseType은 응답 타입이다. document json text blob arraybuffer가 있다.
- response는 response body를 말한다.
- responstText는 요청에 대한 응답 문자열이다.
8개의 이벤트 핸들러 프로퍼티도 가진다.
- onreadystatechange
- onloadstart
- onprogress
- onbort
- onerror
- onload
- ontimeout
- onloadend
5개의 메서드도 가진다
- open
- send
- abort
- setRequestHeader
- getResponseHeader
5개의 정적 프로퍼티도 가진다. readystate에서 활용된다.
UNSENT: 0
OPENED: 1
HEADERS_RECEIVED:2
LOADING:3
DONE:4
43.3.3 http 요청 전송 3단계
1. xhr.open("GET", "/users"); 로 요청을 초기화한다. xhr.open(method, url[, async]). url에 쿼리스트링도 함께 적는다.
2. xhr.serRequestHeader('content-type', 'application/json');으로 헤더 세팅을 한다.
3. xhr.send();로 요청을 전송한다. send에서 request body를 담는다. xhr.send(JSON.stringfy(requestBody)); 이런 식으로 직렬화해서 전달해야 한다.
** XMLHttpRequest.prototype.setRequstHeader
- setRequest헤더 메서드는 특정 HTTP 요청 헤더 값을 설정할 때 사용한다. 반드시 open method로 초기화한 이후 사용해야 한다.
-http 헤더는 여러가지가 있지만 Content-type과 Accept 설정을 책에서 보여주었다.
- Content-type MIME타입의 정보를 여기서 세팅한다. application/json의 /이전 부분이 MIME type이다. text application mutipart 등이 있다.
- Accept에서 response 데이터의 형식 허용을 지정해줄 수 있으며, 설정하지 않으면 */*로 모두 허용한다.
43.3.4 http 응답 처리
- xhr객체는 onreadystate, onload, onerror 등 이벤트 핸들러 프로퍼티를 가진다.
- 이 중 onreadystatechange라는 걸로 이벤트를 캐치해서 응답을 처리하고 사용한다. 0 1 2 3 4로 순차적으로 바뀐다. 각 상태에 그 상태는 xhr.readState에 담겨있는데 그 값을 이벤트 핸들러 안에서 사용하면서 구현을 하는 것이다.
- if(xhr.readState !== XMLHttpRequst.DONE) {응답 완료 이전 로직} if(xhr.status === 200) {성공로직 } else {실패로직}이런 식으로 처리한다.
- 굳이 여러 readyState에 대한 처리가 필요하지 않다면 요청 완료시에만 동작하는 onload 이벤트 핸들러를 사용할 수도 있다. 그리고 위에 작성한 것과 같이 xhr.status 상태코드로 성공여부를 판단해서 로직을 작성하면 된다.
궁금한 점
1. 이벤트 핸들러 객체 자바스크립트로 짜는걸 옛날에 배웠었는데 까먹었다. 리액트에 너무 익숙해져서 다시 봐봐야 한다.