43. Ajax

43.1 Ajax란?

---

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

전통방식 vs Ajax

1. 전통방식

• 화면이 전환되면 서버로부터 새로운 HTML페이지를 전송받아 웹페이지 전체를 처음부터 다시 렌더링 함
  
• 단점 :
  매번 완전한 HTML을 서버로부터 받으므로 불필요한 데이터 통신 발생
  변경이 필요없는 부분까지 리랜더링하므로 화면 전환 시 화면 깜빡임 현상 발생
  서버 요청 시, 서버로부터 응답이 있을 때까지 다음 처리는 블로킹 됨

2. Ajax

• 변경할 필요가 있는 부분만 한정적으로 렌더링하는 방식
  
• 장점 :
  필요한 부분만 서버로부터 전송받기 때문에 불필요한 데이터통신이 발생하지 않음
  변경할 필요가 없는 부분은 리렌더링하지 않기 때문에 화면 깜빡임 현상이 발생하지 않음
  통신이 비동기 방식으로 동작하므로 블로킹이 발생하지 않음

43.2 JSON

---

• JSON (JavaScript Object Notation)은 클라이언트와 서버간의 HTTP통신을 위한 텍스트 데이터 포맷으로 대부분의 프로그래밍 언어에서 사용할 수 있음

43.2.1 JSON 표기 방식

• 키와 값으로 구성된 순수한 텍스트로, 키는 반드시 큰 따옴표로 묶어야 함

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

43.2.2 JSON.stringify

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

const obj = {
  name: 'Lee',
  age: 20,
  alive: true,
  hobby: ['traveling', 'tennis']
};

const json = JSON.stringify(obj);

43.2.3 JSON.parse

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

const parsed = JSON.parse(json);

43.3 XMLHttpRequest

---

43.3.1 XMLHttpRequest객체 생성

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

const xhr = new XMLHttpRequest();

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

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

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

XMLHttpRequest객체의 메서드

XMLHttpRequest객체의 정적 프로퍼티

43.3.3 HTTP 요청 전송

1. XMLHttpRequest.prototype.open메서드로 HTTP요청을 초기화 함
2. 필요에 따라 XMLHttpRequest.prototype.setRequestHeader메서드로 특정 HTTP요청의 헤더 값을 설정함
3. XMLHttpRequest.prototype.send메서드로 HTTP요청을 전송함

// XMLHttpRequest 객체 생성
const xhr = new XMLHttpRequest();

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

// HTTP 요청 헤더 설정
// 클라이언트가 서버로 전송할 데이터의 MIME 타입 지정: json
xhr.setRequestHeader('content-type', 'application/json');

// HTTP 요청 전송
xhr.send();

XMLHttpRequest.prototype.open

• open메서드는 서버에 전송할 HTTP요청을 초기화 함

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

• HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법임
  

XMLHttpRequest.prototype.send

• send메서드는 open메서드로 초기화된 HTTP요청을 서버에 전송함
• GET요청일 경우, 데이터의 URL의 일부분인 쿼리 문자열로 서버에 전송함
• POST요청일 경우, 데이터를 request body에 담아 전송함

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

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

XMLHttpRequest.prototype.setRequestHeader

• setRequestHeader메서드는 특정 HTTP요청의 헤더 값을 설정함
• 반드시 open메서드를 호출한 이후에 호출해야 함
• Content-type은 request body에 담아 전송할 데이터의 MIME타입의 정보를 표현함
  

xhr.setRequestHeader('content-type', 'application/json');

xhr.setRequestHeader('accept', 'application/json');

• Accept헤더를 설정하지 않으면 send메서드가 호출될 때 Accept헤더가

*/*

-로 전송됨

43.3.4 HTTP 응답 처리

• XMLHttpRequest객체의 이벤트 핸들러 프로퍼티 중 readyState프로퍼티 값이 변경된 경우 발생하는 readystatechange이벤트를 개치하여 HTTP응답을 처리할 수 있음

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);
  }
};

• readystatechange이벤트 대신 load이벤트를 캐치하는 방법도 있음

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