자바스크립트 AJAX (1/2) , XMLHttpRequest 그리고 HTTP METHOD

 

AJAX

브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 보통 서버로부터 데이터를 받을 때 css 및 js까지 불러오게 되어 필연적으로 속도 저하가 된다. 페이지 일부만 변화 할 때 그 부분만을 로드하여 효율적으로 웹을 관리하는 것이 ajax 비동기 방식이다.

JSON

JSON은 클라이언트와 서버간 데이터 통신을 할 때 사용 되는 가장 흔한 데이터 포맷이다. 일반 텍스트보다 구조적이며 xml보다 가볍다. JSON은 다음과 같이 key와 value 값을 가진다.

{
  "name": "amber",
  "gender": "female",
  "height" : 160,
}

여기서 JSON파일이 브라우저 상에서 조작되기 위해서는 javascript의 string 형태로 변환해 주어야 하며, 이와 반대로 자바스크립트에서 데이터를 저장할 때는 json 형태로 변환해 줄 필요가 있다.

JSON.stringify

객체를 json 형태의 문자열로 변환시켜준다.

const data = {name : 'amber', gender : 'female', height : 160};

const toObject = JSON.stringigy(data); //data객체를 json파일로 변경시켜줌
console.log(typeof toObeject); // string

replacer를 사용하면 특정 데이터 타입을 필터링 시킬 수 있다.

function filter(key, value){
    return typeof value === 'number' ? undefined : value;
// undefined : 값이 반환되지 않음
}

const toFilterdObject = JSON.stringify(data, filter, 2);
//마지막 2 : 스페이스 얼마만큼 할 건지(prettify)
console.log(typeof toFilteredObject, toFilteredObject);

const array = [1, 2, 3, 'hi'];

function replaceToUpper(key, value) {
  return value.toString().toUpperCase();
}

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

JSON.parse

이 메소드는 위와 반대로 JSON(문자열)을 객체로 반환한다. JSON데이터를 브라우저에서 대에터로 사용하려면 이 과정이 필요하다.

const data = {name : 'amber', gender : 'female', height : 160};

const toObject = JSON.stringify(data);
const toString = JSON.parse(toObject);

console.log(typeof toObject,typeof toString);

PS) 배열이 JSON 형태의 문자열로 변환되어 있는 경우 JSON.parse는 문자열을 배열 형태의 객체로 변환한다.

XMLHttpRequest

브라우저는 XMLHttpRequest 객체를 이용하여 ajax 요청을 생성할 수 있고 서버가 브라우저의 요청 값을 반환하면 같은 XMLHttpRequest 객체가 이를 처리한다. 이 객체는 xml을 포함한 다른 데이터 형식도 처리할 수 있다.

const xhr = new XMLHttpRequest(); // xmlhttprequest 객체 생성
xhr.open('GET', '/url'); // request open
xhr.send(); //request 전송

XHR Method

Method란 http 프로트콜을 이용하여 서버에 데이터를 전달할 때 사용되는 방식을 말한다. 가장 흔히 쓰이는 방법이 get과 post이다.

GET 방식

• 데이터 전송 후 주소 뒤에 값이 보내는 값이 노출됨
• 길이제한이 있어 많은 양의 데이터를 보내기 어려움
• 서버에서 어떤 데이터를 가져와서 보여줄 뿐 그 값이나 상태를 바꾸지 않는다.

POST 방식

• 데이터가 body에 숨겨져 전송됨(form을 이용한 submit)
• GET보다 많은 양의 데이터를 보낼 수 있음
• 서버의 값이나 상태를 바꿀 수 있음