43.1 Ajax란?

• Asynchronous JavaScript and XML
• 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식
• 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다.

---

43.2 JSON

43.2.1 JSON 표기 방식

• 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트

{
	"name": "Lee",
	"age": 20,
	"alive": true,
	"hobby": ["traveling", "tennis"]
}

• JSON의 키는 반드시 큰 따옴표로 묶어야 한다.
• JSON의 값은 객체 리터럴과 같은 표기법. 하지만 문자열은 반드시 큰따옴표로 묶어야 함
  (둘 다 작은따옴표 사용 불가)

43.2.2 JSON.stringify

• 객체나 배열을 JSON 포맷의 문자열로 변환

직렬화(serializing)

• 클라이언트가 서버로 객체를 전송하기 위해 객체를 문자열화하는 것

43.2.3 JSON.parse

• JSON 포맷의 문자열을 객체로 변환

역직렬화(deserializing)

• 서버로부터 클라이언트에 전송된 JSON 포맷의 문자열을 객체화하는 것
• 배열이 JSON 포맷의 문자열로 변환되어 있는 경우 문자열을 배열 객체로 변환

43.3 XMLHttpRequest

• 브라우저는 주소창이나 HTML의 form 태그 또는 a 태그를 통해 HTTP 요청 전송 기능을 기본 제공
• 자바스크립트를 사용하여 HTTP 요청을 전송하려면 XMLHttpRequest 객체를 사용

43.3.1 XMLHttpRequest 객체 생성

• 생성자 함수를 호출하여 생성

const xhr = new XMLHttpRequest();

• XMLHttpRequest는 Web API이므로 브라우저 환경에서만 정상적으로 실행됨

43.3.2 XMLHttpRequest 객체의 프로퍼티와 메서드

XMLHttpRequest 객체의 프로토타입 프로퍼티

• readyState - HTTP 요청의 현재 상태를 나타내는 정수, XMLHttpRequest의 정적 프로퍼티를 값으로 가짐
• status - HTTP 요청에 대한 응답 상태(HTTP 상태 코드)를 나타내는 정수 (ex. 200)
• statusText - HTTP 요청에 대한 응답 메시지를 나타내는 문자열 (ex. “OK”)
• responseType - HTTP 응답 타입 (ex. document, json, text, blob, arraybuffer)
• response - HTTP 요청에 대한 응답 몸체(response body), responseType에 따라 타입이 다름
• responseText - 서버가 전송한 HTTP 요청에 대한 응답 문자열

XMLHttpRequest 객체의 이벤트 핸들러 프로퍼티

• onreadystatechange - readyState 프로퍼티 값이 변경된 경우
• onerror - HTTP 요청에 에러가 발생한 경우
• onload - HTTP 요청이 성공적으로 완료한 경우
• 이 외에도 onloadstart, onprogress, onabort, ontimeout, onloadend 등

XMLHttpRequest 객체의 메서드

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

XMLHttpRequest 객체의 정적 프로퍼티 (정적프로퍼티 - 값 - 설명)

• UNSENT - 0 - open 메서드 호출 이전
• OPENED - 1 - open 메서드 호출 이후
• HEADERS_RECEIVED - 2 - send 메서드 호출 이후
• LOADING - 3 - 서버 응답 중 (응답 데이터 미완성 상태)
• DONE - 4 - 서버 응답 완료
  

43.3.3 HTTP 요청 전송

HTTP 요청을 전송하는 경우 다음 순서를 따른다.

1. HTTP 요청 초기화 - XMLHttpRequest.prototype.open
2. 헤더 값을 설정 (필요에 따라) - XMLHttpRequest.prototype.setRequestHeader
3. HTTP 요청 전송 - XMLHttpRequest.prototype.send

const xhr = new XMLHttpRequest();

xhr.open('GET', '/users'); // 초기화

xhr.setRequestHeader('content-type', 'application/json'); // 헤더 설정

xhr.send(); // 전송

HTTP 요청 초기화 - XMLHttpRequest.prototype.open

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

xhr.open(method, url[, async])

• method - HTTP 요청 메서드 ("GET", "POST", "PUT", "DELETE" 등)
• url - HTTP 요청을 전송할 URL
• async - 비동기 요청 여부. 기본값은 true, 옵션

HTTP 요청 전송 - XMLHttpRequest.prototype.send

• open 메서드로 초기화된 HTTP 요청을 서버에 전송
  • GET - 데이터를 URL의 일부분인 쿼리 문자열로 서버에 전송
  • POST - 데이터(페이로드)를 요청 몸체(request body)에 담아 전송
• request body에 담아 전송할 데이터(페이로드)를 인수로 전달할 수 있음 (반드시 JSON.stringify로 직렬화한 다음 전달해야 한다)
  

xhr.send(JSON.stringify({ id: 1, content: 'HTML', completed: false }));

• 이때, GET인 경우 send 메서드에 페이로드로 전달한 인수는 무시되고 요청 몸체는 null로 설정됨

헤더 설정 - XMLHttpRequest.prototype.setRequestHeader

• 특정 HTTP 요청의 헤더 값을 설정
• 반드시 open 메서드를 호출한 이후에 호출해야 함

Content-type

• request body에 담아 전송할 데이터의 MIME 타입의 정보를 표현
  • text/plain application/json, multipart/formed-data 등이 있음

Accept

• 서버가 응답할 데이터의 MIME 타입을 지정
• 만약 지정하지 않으면 Accept 헤더가 */*으로 전송됨

43.3.4 HTTP 응답 처리

readystatechange 이벤트

• HTTP 요청의 현재 상태를 나타내는 readyState 프로퍼티 값이 변경된 경우 발생하는 이벤트
  

const xhr = new XMLHttpRequest();

xhr.open('GET', '/users');

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 이벤트

• HTTP 요청이 성공적으로 완료된 경우 발생 ⇒ XMLHttpRequest.DONE인지 확인할 필요 없음

const xhr = new XMLHttpRequest();

xhr.open('GET', '/users');

xhr.send();

xhr.onload = () => {
  // 서버 응답 성공하면
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.response));
  } else { // 실패하면 에러 처리
    console.error('Error', xhr.status, xhr.statusText);
  }
}