Ajax (Asyncronous Javascript and XML)

Ajax(Asynchronous JavaScript and XML) 

자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식

 

서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScript 파일들도 같이 반환된다.

클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고, 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링 하여 화면에 표시한다.

 

Tranditional Web Page Lifecycle (*출처:https://poiemaweb.com/js-ajax)

 

이처럼 서버에서 웹 페이지가 반환되면 화면 전체를 갱신해야 하는데 Ajax를 이용하면 페이지 전체를 갱신할 필요 없이, 변경이 필요한 부분만 받아와서 적용할 수 있다.

=> 로딩되는 시간을 줄이고, 자원의 낭비를 막을 수 있다.

 

*Ajax의 이름에서는 XML이라고 되어있지만 사실 JSON 형식을 더 많이 사용한다.

---

JSON (Javascript Object Notation)

클라이언트와 서버 간의 데이터 교환을 위한 데이터 포맷

효과적인 데이터 구조화가 가능하며 XML 포맷보다 가볍고 사용하기 간편하며 가독성도 좋다.

 

{
  "name": "Lee",
  "gender": "male",
  "age": 20,
  "alive": true
}

JSON 참고

• 키는 반드시 큰 따옴표(작은따옴표 no)로 둘러싸야한다.

• JSON은 순수한 텍스트로 구성된 규칙이 있는 데이터 구조이다.

 

JSON.stringify

데이터를 서버로 전달하기 위해 객체를 JSON형식의 문자열로 변환한다.

const o = { name: 'Lee', gender: 'male', age: 20 };

// 객체 => JSON 형식의 문자열
const strObject = JSON.stringify(o);
console.log(typeof strObject, strObject);
// string {"name":"Lee","gender":"male","age":20}

// 객체 => JSON 형식의 문자열 + prettify
const strPrettyObject = JSON.stringify(o, null, 2);
console.log(typeof strPrettyObject, strPrettyObject);
/*
string {
  "name": "Lee",
  "gender": "male",
  "age": 20
}
*/

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

// 객체 => JSON 형식의 문자열 + replacer + prettify
const strFilteredObject = JSON.stringify(o, filter, 2);
console.log(typeof strFilteredObject, strFilteredObject);
/*
string {
  "name": "Lee",
  "gender": "male"
}
*/

const arr = [1, 5, 'false'];

// 배열 객체 => 문자열
const strArray = JSON.stringify(arr);
console.log(typeof strArray, strArray); // string [1,5,"false"]

// replacer
// 모든 값을 대문자로 변환된 문자열을 반환한다
function replaceToUpper(key, value) {
  return value.toString().toUpperCase();
}

// 배열 객체 => 문자열 + replacer
const strFilteredArray = JSON.stringify(arr, replaceToUpper);
console.log(typeof strFilteredArray, strFilteredArray); // string "1,5,FALSE"

 

JSON.parse

서버로부터 브라우저로 전송된 문자열 JSON 데이터를 객체로 변환한다.(역직렬화)

const o = { name: 'Lee', gender: 'male', age: 20 };

// 객체 => JSON 형식의 문자열
const strObject = JSON.stringify(o);
console.log(typeof strObject, strObject);
// string {"name":"Lee","gender":"male","age":20}

const arr = [1, 5, 'false'];

// 배열 객체 => 문자열
const strArray = JSON.stringify(arr);
console.log(typeof strArray, strArray); // string [1,5,"false"]

// JSON 형식의 문자열 => 객체
const obj = JSON.parse(strObject);
console.log(typeof obj, obj); // object { name: 'Lee', gender: 'male' }

// 문자열 => 배열 객체
const objArray = JSON.parse(strArray);
console.log(typeof objArray, objArray); // object [1, 5, "false"]

JSON.parse 참고

• 배열이 JSON 형식의 문자열로 변환되어 있는 경우 JSON.parse는 문자열을 배열 객체로 변환한다.
  배열의 요소가 객체인 경우 배열의 요소까지 객체로 변환한다.

---

참고

poiemaweb.com/js-ajax

Ajax | PoiemaWeb