모던 자바스크립트 Deep Dive 43장-Ajax

Ajax란?

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

Ajax 이전의 웹페이지

HTML 문서 통째를 서버로 전달 받아 웹페이지를 처음부터 다시 렌더링 하는 방식으로 동작

• 변경된 부분은 1%여서 1%에 해당하는 데이터만 있으면 되는데 HTML 통째로 서버로 전달받으니 불필요한 데이터 통신이 발생
• 새로운 HTML을 처음부터 렌더링 하니 화면이 순간적으로 깜빡이는 현상
• 클라이언트-서버 통신이 동기 방식으로 동작, 서버 응답이 완료될 때까지 블로킹

Ajax

• 필요한 데이터만 서버로부터 전송 받아 불필요한 데이터 통신 X
• 변경할 필요가 없는 부분은 리렌더링X, 화면 깜빡 X
• 클라이언트-서버 비동기 방식으로 동작, 블로킹 X

JSON

• JavaScript Object Notation
• 클라이언트 - 서버 간의 HTTP 통신을 위한 텍스트 데이터 포멧
• 언어 독립형 데이터 포멧으로 자바스크립트에 종속 X

JSON 표기 방식

• 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트
• 작은따옴표 사용 불가 -> 무조건 큰따옴표

{
	"name" : "Sam",
    "age" : 20,
    "moto" : ["hustlin","grindin"]
}

JSON.stringify

• 객체,배열을 JSON 포맷의 문자열로 변환
• 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야함
  = 직렬화 (serializing)
• JSON.stringify(변환할 대상,replacer함수, 들여쓰기 칸수)

const person = {name:'kang', age:27};
JSON.stringify(person); // '{"name":"kang","age":27}'
JSON.stringify(person,null,2); // '{\n  "name": "kang",\n  "age": 27\n}'

const filter = (key,value) => {
    return typeof value === 'number'
    ? undefined
    : value;
}

JSON.stringify(person,filter); //  '{"name":"kang"}'

JSON.parse

• JSON 포맷을 객체로 변환
• 문자열을 객체화
  = 역직렬화 (deserializing)
• 배열이 JSON 포맷의 문자열로 변환되어 있으면 배열 객체로 변환해줌

XMLHttpRequest

Web API인 XMLHttpRequest 객체는 HTTP 통신에 필요한 프로퍼티와 메서드를 제공

XMLHttpRequest 객체 생성

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

const xhr = new XMLHttpRequest();

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

프로토타입 프로퍼티

• status : HTTP 상태 코드

이벤트 핸들러 프로퍼티

• onload : HTTP 요청이 성공적으로 완료한 경우
• onerror : HTTP 요청에 에러가 발생한 경우

메서드

• open : HTTP 요청 초기화
• send : HTTP 요청 전송
• setRequestHeader : 헤더 설정

HTTP 요청 전송

1. open 메서드로 초기화
2. 헤더 설정
3. send 메서드로 HTTP 요청 전송 // payload는 직렬화 필요

const xhr = new XMLHttpRequest();
xhr.open('GET','/users');
xhr.setRequestHeader('content-type','application/json');
xhr.send();

• GET 요청은 데이터를 URL의 일부분인 쿼리 문자열로 서버에전송
• POST 요청은 데이터(payload)를 요청 몸체에 담아 전송

HTTP 응답 처리

const xhr = new XMLHttpRequest();

xhr.open('GET',"https://jsonplaceholder.typicode.com/todos/1");

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

xhr.send();

[Log] {userId: 1, id: 1, title: "delectus aut autem", completed: false}

이웅모, 『모던 자바스크립트 Deep Dive』, 위키북스(2021)