Ajax 리마인딩
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식으로, 브라우저에서 제공하는 Wep API인 XMLHttpRequest 객체를 기반으로 동작한다.
Asynchronous JavaScript and XML
XMLHttpRequest
1999년 마이크로소프트가 개발한 Web API로, HTTP 요청 전송과 HTTP 응답 수신을 위한 다양한 메서드와 프로퍼티를 제공하는 API
XMLHttpRequest는 개발 초기에는 주목을 받진 못했지만 2005년 경 구글이 발표한 구글 맵스를 통해 웹 어플리케이션 개발 프로그래밍 언어로서 JavaScript가 가능성을 보이게되는 계기를 마련하였다. 웹 브라우저에서 JS와 Ajax 기반으로 동작하는 구글 맵스가 데스크톱 어플리케이션과 비교해도 대등한 수준이었기 때문..!
브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본적으로 제공을 하는데, JavaScript를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용한다.
XMLHttpRequest 객체의 프로퍼티와 메서드 종류
정말 다양한 프로퍼티와 메서드를 제공한다. 자주 쓰이는 것을 소개하자면
프로토타입 프로퍼티
이벤트 핸들러 프로퍼티
메서드
요청 전송 단계
요청 전송을 하려면 요청 메서드를 따로 알아야 한다.
1. GET : 모든 or 특정 리소스 취득
2. POST : 리소스 생성
3. PUT : 리소스 전체 교체
4. PATCH : 리소스 일부 수정
5. DELETE : 모든 or 특정 리소스 삭제
이 5가지 메서드를 통해 서버에게 요청의 목적을 알린다.
간단한 코드로 표현한다면 이러한 단계를 거치게 된다.
const xhr = new XMLHttpRequest();XMLHttpRequest 객체를 생성하는 보편적인 방법이다. (xhr로 편히 사용)
xhr.open('GET', '/users');
xhr.setRequestHeader('content-type', 'application/json');
xhr.send();요청을 open을 통해 초기화, setRequestHeader를 통해 헤더 설정, 이후 send를 통해 요청을 전송하게 된다.
여기서 setRequestHeader 부분을 살짝 살펴보면 두 가지의 요소가 있다. 서버로 전송할 데이터의 MIME 타입을 지정하는 단계이다.
자주 쓰이는 MIME 타입으로는
● text/plain
● text/html
● application/json
등이 있다.
응답 처리 단계
받은 응답을 처리하여면 객체가 발생시키는 이벤트를 캐치해야 하는데, 위에서 언급한 이벤트 핸들러 프로퍼티가 여기서 사용된다. 여기서 readystatechange 이벤트를 캐치하여 HTTP 응답을 처리할 수 있다.
xhr.onreadystatechage = () => {
status 값이 200일 경우 정상 응답 -> response에 응답 결과 반영
아닐 경우 에러
}이거 말고도 onload 이벤트핸들러로 캐치해도 크게 지장은 없다. 코드 구조는 동일하다!
JSON
JavaScript Object Notation
클라이언트와 서버 간 HTTP 통신을 위한 텍스트 데이터 포맷. 자바스크립트와는 독립적으로 위치하며, 대부분의 언어에서 사용이 가능하다.
따라서 규칙이 은근히 존재한다. 객체 표현의 경우 키, 문자열 모두 반드시 반드시 큰 따옴표로 묶어야 하고, 객체 내부에서 공백이 허용이 안된다.
JSON.stringify
자바스크립트 객체 형태를 JSON 포맷의 문자열로 변경하는 과정
const obj = {
name: 'Kim',
age: 20
};
const json = JSON.stringify(obj);
//{"name":"Kim","age":20}JSON.parse
JSON 포맷의 문자열을 다시 객체로 변환하는 과정
const re = JSON.parse(json);
//다시 돌아오게됨. obj랑 re랑 같은 형태