javaScript - Ajax

Ajax란 Asynchronous Javascript And XML이라는 뜻으로, 자바스크립트를 사용해 서버에 비동기적인 방식으로 데이터를 요청해 동적으로 웹페이지를 갱신하는 방식을 의미한다.

---

1. Ajax

Ajax는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. 그리고 XMLHttpRequest는 비동기적인 HTTP 통신을 위해서 여러 메서드와 프로퍼티 등을 제공한다

 

이전의 웹페이지의 경우에는 html 태그로 시작해서 html 태그로 끝나는 완전한 HTML을 전송받아 웹페이지 전체를 렌더링하는 방식으로 동작했다. 그렇기 때문에 화면이 전환되면 웹페이지 전체를 처음부터 다시 렌더링해야했기 때문에 화면이 깜빡거리는 현상이 발생했다.

 

이러한 방식은 매번 완전한 HTML파일을 항상 전송받기 때문에 필요없는 부분까지도 항상 같이 렌더링해야했고, 동기 방식으로 진행됨에 따라 서버에서 응답이 있을 때까지 블로킹이 되어 다음 일처리를 할 수 없었다.

 

하지만 Ajax는 변경이 필요한 데이터만 비동기적인 방식으로 렌더링해주어 훨씬 부드럽고 현대적으로 보인다. Ajax의 장점을 정리하면 다음과 같다.

1. 필요한 데이터만 전송받기 때문에 불필요한 데이터 통신이 발생하지 않는다.
2. 변경이 필요한 부분만 렌더링하기 때문에 화면이 순간적으로 깜박이는 현상이 발생하지 않는다.
3. 통신이 비동기 방식으로 동작해 블로킹이 발생하지 않는다.

2. JSON (JavaScript Object Notation)

JSON은 클라이언트와 서버간  통신을 할 때 범용적으로 사용되는 독립적인 데이터 포맷이다. 표기 방식은 아래처럼 javaScript의 객체처럼 생겼다.

{
  "name": "John",
  "age": 25,
  "hobby": ["JavaScript", "Python"]
}

자바스크립트의 객체와 다른 점이라면, JSON의 키는 반드시 큰따옴표로 묶어야 한다는 것이다.

2.1 JSON.stringify

JSON.stringify는 객체를 JSON 포맷의 문자열로 변환하는 메서드이다. 서버로 데이터(객체)를 전송하려면 객체를 문자열로 변환해야하는데, 이를 직렬화(문자열로 변환시킴)라고 한다.

 

그리고 stringify 메서드를 호출할 때 첫 번째 인수로는 직렬화할 객체를, 두 번째 인수로는 필터링할 함수를, 세 번째 인수로는 예쁘게 들여쓰기 해주기 위해서 몇 칸을 들여쓰기 할 것인지에 대한 값을 넘겨준다.

// replacer 함수. 값의 타입이 Number이면 필터링되어 반환되지 않는다.
function filter(key, value) {
  // undefined: 반환하지 않음
  return typeof value === 'number' ? undefined : value;
}

// JSON.stringify 메서드에 두 번째 인수로 replacer 함수를 전달한다.
const strFilteredObject = JSON.stringify(obj, filter, 2);
console.log(typeof strFilteredObject, strFilteredObject);
/*
string {
  "name": "Lee",
  "alive": true,
  "hobby": [
    "traveling",
    "tennis"
  ]
}
*/

참로고 JSON.stringify는 배열도 JSON 문자열로 변환할 수 있다. 왜냐하면 자바스크립트의 배열은 객체이기 때문이다.

const todos = [
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 3, content: 'Javascript', completed: false }
];

// 배열을 JSON 포맷의 문자열로 변환한다.
const json = JSON.stringify(todos, null, 2);
console.log(typeof json, json);
/*
string [
  {
    "id": 1,
    "content": "HTML",
    "completed": false
  },
  {
    "id": 2,
    "content": "CSS",
    "completed": true
  },
  {
    "id": 3,
    "content": "Javascript",
    "completed": false
  }
]
*/

2.2 JSON.parse

JSON.parse 메서드는 JSON 포맷으로 된 문자열(직렬화된 문자열)을 객체로 변환하는 역할을 수행한다. 이를 역질렬화라고도 부른다.

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

// 직렬화
const json = JSON.stringify(obj);

const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
// object {name: "Lee", age: 20, alive: true, hobby: ["traveling", "tennis"]}

그리고 만약 배열이 JSON 포맷의 문자열로 되어있는 경우 배열 객체로 변환하며 배열의 요소가 객체일 때에도 요소까지 객체로 변환한다.

const todos = [
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 3, content: 'Javascript', completed: false }
];

// 직렬화
const json = JSON.stringify(todos);

// JSON 포맷의 문자열을 배열로 변환한다. 배열의 요소까지 객체로 변환된다.
const parsed = JSON.parse(json);
console.log(typeof parsed, parsed);
/*
 object [
  { id: 1, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 3, content: 'Javascript', completed: false }
]
*/

3. XMLHttpRequest

자바스크립트에서 XMLHttpRequest라는 객체를 통해서 HTTP 요청의 전송과 응답 수신을 메서드와 프로퍼티들을 활용해 수행할 수 있다.

 

XMLHttpRequest객체를 만들기 위해서는 일반적으로 객체를 생성하는 것처럼 생성하면 된다.

const xhr = new XMLHttpRequest();

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

• readyState: 요청의 현재 상태를 나타내는 정수 (ex: OPENED=1, LOADING=3)
  • XMLHttpRequest 객체의 정적 프로퍼티에 저장되어 있다. (ex: XMLHttpRequest.OPENED === 1)
• status: HTTP 요청에 대한 응답의 상태 (ex: 200)
• statusText: 요청에 대한 응답의 상태 문자열 (ex: "OK")
• responseType: 응답의 타입 (ex: document, json, text, blob 등)
• response: HTTP 요청에 대한 response body

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

• onreadystatechange: readyState 프로퍼티 값이 변경된 경우
• onerror: 에러가 발생한 경우
• onload: 성공적으로 요청을 완료한 경우
• ontimeout: 요청 시간이 초과된 경우
• onloadstart: 요청에 대한 응답을 수신받기 시작한 경우

3.3 XMLHttpRequest 객체 메서드

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

3.4 HTTP 요청 방법

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

const xhr = new XMLHttpRequest();

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

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

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