[Javascript] AJAX 와 JSON 에 대하여

---

🎩 JSON(JavaScript Object Notation)

🪄 JSON 개념

JSON은 JavaScript Object Notation의 약자로서
이름을 통해 자바스크립트 오브젝트와 관련된 파일이란 걸 유추할 수 있습니다.

1999년도 ECMAScript 의 세번째 버전에 쓰여진 Object 에서
큰 영감을 받아 만들어진 데이터 포맷으로
자바스크립트와 마찬가지로 key 와 velue 로 이루어져있습니다.

• 데이터 포맷(Data Format)이란?
어떤 프로그래밍 언어로도 읽을 수 있는 단순한 파일 포맷으로,
이때 단순함은 XML 같은 포맷에 비해 컴퓨터가 처리하기 쉽다는 것을 의미한다.

JSON 데이터 타입은 브라우저 뿐만 아니라 모바일에서 서버와 데이터를 주고받을 때,
또는 서버와 통신을 하지 않아도 Object 를 file 시스템에 저장해야할 때 등
다양한 상황에서 많이 이용되고 있습니다.

🪄 JSON 특징

1) simplest data interchange format
-> 데이터를 주고 받을 때 쓸 수 있는 가장 간단한 파일 포맷입니다.

2) lightweight text-based structure
-> 텍스트를 기반으로 하여 가볍습니다.

3) easy to read
-> 사람의 눈으로 읽기 편합니다.

4) key-value pairs
-> key와 value 로 이루어져 있습니다.

5) used for serialization and transmission of data between the network the network connection
-> 보통 서버와 데이터를 주고 받을 때 직렬화(serialize), 역직렬화(deserialize)를 사용합니다.

• 직렬화(serialize)
: 객체 => 문자열로 변환하는 작업을 말합니다.
: 통신을할 때는 문자열로 직렬화하여 주고 받는 것이 안전합니다.
: 사용 방법은 JSON.stringfy(JSON형식의 객체)입니다.

• 역직렬화(deserialize)
: 문자열 => 객체로 변환하는 작업을 말합니다.
: 통신으로 받은 문자열은 객체로 역직렬화하여 사용하는 겻이 편리합니다.
: 사용 방법은 JSON.parse(JSON형식의 문자열)입니다.

6) independent programming language and platform
-> 프로그램 언어나 플랫폼에 상관없이 사용이 가능합니다.

🪄 JSON 예제

1) 직렬화(serialize) 예제

// JSON
// JavaScript Object Notion

// 1. Object to JSON
// stringify(obj)
let json = JSON.stringify(true);
console.log(json); // true

json = JSON.stringify(['appple', 'banana']);
console.log(json); // ["apple", "banana"]

const cat = {
    name: 'nabi',
      color: 'white',
      size: null,
      birthDate: new Date(),
      jump: () => {
        console.log(`${this.name} can jump!`);
    },
};

json = JSON.stringify(cat); // '{"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'
console.log(json); // {"name":"nabi","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}

// 원하는 프로퍼티(property)만 출력
json = JSON.stringify(cat, ["name"]); // {"name":"nabi"}

// callback 함수 이용
json = JSON.stringify(cat, (key, value) => {
    console.log(`key: ${key}, value: ${value}`);
      return key === 'name' ? 'ohmyo' :value; 
}); // '{"name":"ohmyo","color":"white","size":null,"birthDate":"2022-05-24T07:37:56.433Z"}'

2) 역직렬화(deserialize) 예제

// 2. JSON to Object
// parse()
json = JSON.stringify(cat);
const obj = JSON.parse(json);

const obj = JSON.parse(json, (key, value) => {
      console.log(`key: ${key}, value: ${value}`);
    return key === 'birthDate' ? new Date(vlaue) : value;
});

console.log(obj); // {name: 'nabi', color: 'white', size: null, birthDate: '2022-05-24T07:37:56.433Z'}
cat.jump(); // can jump!

console.log(cat.birthDate.getDate()); // 24

---

🎩 AJAX(Asynchronous JavaScript and XML)

🪄 AJAX 의 개념

Ajax란 새로고침없이 서버에게 GET 요청을 하는 쪼그만한 JS 코드입니다.
웹 페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 개발 기법이기 때문에
Ajax를 사용하면 페이지를 새로고침 하지 않아도 일부의 데이터를 바꿀 수 있습니다.

• 서버란?
사용자가 데이터를 요구하면 데이터를 보내주는 프로그램입니다.

서버에게 데이터를 받기 위해선 아래의 방법을 준수해야합니다.

1) 데이터의 정확한 URL
2) URL 로 GET 요청

데이터 로드를 위해 XHR(XML Http Request) 라는 객체(Object)를 이용하는 것이 특징입니다.

XHR(XML Http Request) Object 는 브라우저 API 에서 제공하는 Object 중에 하나로
이 Object를 이용하면 간단하게 서버에게 데이터를 요청하고 받아올 수 있습니다.

XML 이란 Html 과 같은 마크업 언어중 하나로 태그들을 이용하여 데이터를 나타냅니다.
XML 로 서버를 통신할 경우 불필요한 태그들이 많이 들어가기 때문에
파일 사이즈가 커질뿐만 아니라 가독성도 좋지 않아져 요즘에는 JSON을 많이 사용하고 있습니다.

🪄 AJAX 의 동작 원리

사용자에 의해 이벤트가 발생하면 핸들러에 의해 바로 자바스크립트를 불러옵니다.
그 후 자바스크트에서는 XHR 객체(Object)를 이용하여 서버로 요청을 보내는데,
그동안 웹 브라우저는 응답을 기다릴 필요 없이 다른 작업을 수행할 수 있습니다.
이 방식을 비동기 방식이라고 부릅니다.

🪄 AJAX 의 장점

리로딩 없이 웹페이지를 전환할 수 있어 부드러운 웹, 앱을 만들 수 있습니다.

🪄 AJAX 의 단점

페이지의 리로딩이 없기 때문에 한페이지에서 지속적으로 사용시
리소스가 계속 쌓여 페이지가 느려질 수 있습니다.

🎩 Ajax 사용방식

1) 옛날 JS 방식

var ajax = new XMLHttpRequesst();
    ajax.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
            console.log(ajax.responseText)
        }
    };
    ajax.open("GET", "URL 링크", true);
    ajax.send();

2) 요즘 JS 방식

fetch('URL 링크')
    .then((response) => {
          if(!response.ok) {
            throw new Error('400 혹은 500 에러가 발생했습니다!')
        }
        return response.json()
})
.then((결과) => {
    console.log(결과)
})
.catch(() => {
    console.log('에러가 발생했습니다!')
})

3) 외부 라이브러리 방식

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>

axios.get('URL 링크')
    .then((result) => {
        console.log(result.data)
    }).catsh(() => {
        console.log('에러가 발생했습니다!')
})

🎩 JSON 객체를 이용한 Ajax요청 예제

아래와 같은 형태의 JSON 형태를 준비합니다.

{
    "스파이패밀리":[
        {
          "name":"로이드포저",
          "trait":"spy",
        },
        {
          "name":"요르포저",
          "trait":"assassin",
        },
          {
          "name":"아냐포저",
          "trait":"superpowers",
        }
    ]
}

그 다음, 아래 코드를 ajax_text.html에 추가합니다.

첫번째 인자로 index를 주고 두번째 인자로 item(콜백함수)을 줍니다.
index를 기준으로 반복을 하며
선택요소에 append함수를 사용하여 값을 추가합니다.

<html>
<head>
    <meta charset="utf-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>스파이패밀리</title>
</head>
<p id="test"></p><br>
<button type="button">클릭</button>
<!-- json 불러서 p태그에 넣기 -->
<body>
    <script>
        $(function() {
            $.ajax({ 
                type: 'get' , // 타입
                url: 'ajaxtest.json' , // 어디로 갈건지
                dataType : 'json' , 
                success: function(data) { // 갔다온 다음 결과값
                    alert('접속 성공'); // 해당 값을 출력하면 파일을 찾았다는 의미
                      alert(data); // [object Object] [object Object] [object Object]

                      // 데이터를 확인하고 싶을 경우
                      // let spy_family = JSON.stringify(data); // <> parse()
                      // alert(spy_family)

                    $.each(data, function(index, item) { // 데이터 =item
                      $("#test").append(index + " "); // index가 끝날때까지 
                      $("#test").append(item.name + " ");
                      $("#test").append(item.trait + "<br>");
                    });
                },
                   } 
             });
        });
    </script>
</body>
</html>

---

🎩 참고자료

https://www.youtube.com/watch?v=nKD1atl6cAw