AJAX

🤔AJAX? JSON?

AJAX (Asynchronous JavaScript and XML)

"AJAX는 비동기적으로 서버와 웹 페이지 간의 데이터를 교환하기 위한 기술이다."

• 주로 JavaScript를 사용하여 웹 페이지에서 서버로 데이터를 보내거나 서버로부터 데이터를 받아오는 데 활용됨.
• XML을 사용하여 데이터를 교환하는데, 최근에는 XML 대신에 JSON이 더 많이 사용되고 있음.
• AJAX를 사용하면 페이지 새로고침 없이도 데이터를 동적으로 업데이트할 수 있음.

JSON (JavaScript Object Notation)

"JSON은 데이터를 표현하기 위한 경량의 데이터 교환 형식이다."

• JavaScript의 객체 표기법을 기반으로 하고 있으며, 텍스트 형태로 구조화된 데이터를 표현함.
• 주로 서버와 클라이언트 간의 데이터 교환 형식으로 사용되며, AJAX에서 데이터를 주고받을 때 주로 JSON 형식이 많이 사용됨.

📌간단하게 말하면 걍,

• AJAX : 데이터를 비동기적으로 주고받기 위한 기술
• JSON : 데이터를 표현하고 교환하기 위한 형식 (AJAX에서 사용되는 데이터 형식 중 하나일 뿐)

장점

• 페이지 리로드 없이 동적 업데이트: AJAX를 사용하면 전체 페이지를 다시 로드하지 않고도 페이지의 일부분을 업데이트할 수 있다. 이로 인해 사용자 경험이 향상되며, 웹 애플리케이션이 빠르고 반응성이 뛰어난 인터페이스를 제공할 수 있다.

• 서버와의 효율적인 통신: 비동기적으로 서버와 통신하므로 사용자는 다른 작업을 수행하거나 다른 부분을 탐색하는 동안에도 데이터 요청 및 응답을 기다릴 필요가 없다. 이는 사용자 경험을 향상시키고 성능을 최적화한다.

• 부분적인 데이터 업데이트: 필요한 부분만 업데이트할 수 있으므로 대량의 데이터를 다시 가져오거나 전체 페이지를 새로 고치는 대신 특정 요소만 갱신할 수 있다. 이는 대역폭을 절약하고 빠른 응답성을 유지하는 데 도움이 된다.

• 사용자 친화적인 경험: 페이지 리로드 없이 데이터를 업데이트할 수 있기 때문에 사용자는 자연스럽게 웹 애플리케이션을 탐색하고 상호 작용할 수 있다. 이는 더 나은 사용자 경험을 제공하는 데 기여한다.

• 비동기적 프로그래밍: AJAX를 통해 비동기적으로 데이터를 처리하면 웹 애플리케이션은 사용자 입력에 더 신속하게 응답할 수 있다. 이는 애플리케이션의 성능을 향상시키고 뚜렷한 사용자 경험을 제공하는 데 도움이 된다.
  
  

종합하면, AJAX를 사용하여 데이터를 비동기적으로 처리함으로써 더 빠르고 유연한 웹 애플리케이션을 개발하고 사용자에게 뛰어난 경험을 제공할 수 있습니다.

---

AJAX 요청하기 (jQuery)

$.get() 라는 함수 사용

$.get('https://chiaki.github.io/hello.txt');

//파일 가져오기 (url 또는 파일 경로)

서버 연결이나, VScode live server 익스텐션 설치해서 사용해야 보임

$.get('https://chiaki.github.io/hello.txt').done(function(data){
  console.log(data)
});

//콘솔창 : 안녕하세요🖐️

제이쿼리 → .done() 또는 자바스크립트 → .then() 사용

콜백함수 속 만들어넣은 파라미터에 데이터가 들어있는 상태.

$.get('https://chiaki.github.io/hello.txt')
  .done(function(data){
    console.log(data)
  })
  .fail(function(error){
    console.log('실패함')
  });

ajax 요청 성공시 .done 안에 있는 코드를 실행.

ajax 요청 실패시 .fail 안에 있는 코드를 실행.

• error 출력해서 에러관련 정보 확인하고 디버깅하면 됨
• 예를 들어 404 이런 에러코드는 url 이 잘못되었다는 뜻

---

서버로 데이터를 보낼 수 있는 POST요청을 날리고 싶으면?

$.post('url~~', {name : 'kim'})

url 잘 적고 뒤에 서버로 보낼 데이터를 적으면 끝.

💡 done/fail 말고 then/catch 사용 가능

👇더 자세하게👇

---

$.get / $.post 말고 $.ajax 메소드 도 있음 -> get, post 둘 다 가능

1. GET 요청

$.ajax({
        url: 'example.com/api/data',  // 요청을 보낼 URL
        method: 'GET',  // HTTP 메서드 (GET 또는 POST)
        success: function (data) {
            // 요청이 성공적으로 완료되었을 때 실행할 코드
            console.log(data);
        },
        error: function (error) {
            // 요청이 실패했을 때 실행할 코드
            console.error('Error:', error);
        }
    });

2. POST 요청

    $.ajax({
        url: 'example.com/api/data',  // 요청을 보낼 URL
        method: 'POST',  // HTTP 메서드 (GET 또는 POST)
        data: {
            param1: 'value1',
            param2: 'value2'
        },  // 전송할 데이터
        success: function (data) {
            // 요청이 성공적으로 완료되었을 때 실행할 코드
            console.log(data);
        },
        error: function (error) {
            // 요청이 실패했을 때 실행할 코드
            console.error('Error:', error);
        }
    });

💡참고

---

jQuery의 $.get() 은 JSON으로 자료가 도착하면 알아서 array/object 자료로 바꿔주지만,
Javascript는 따로 json 데이터 형식 변환이 필요함

---

AJAX 요청하기 (✨javascript)

*최근에는 주로 자바스크립트의 fetch가 많이 사용되고 있다.

fetch는 브라우저에서 기본적으로 제공되는 네이티브 API이며, Promise 기반으로 비동기적인 데이터 요청을 수행할 수 있다.

fetch의 주요 특징

• 네이티브 API: 브라우저에 내장된 기능으로, 별도의 라이브러리나 플러그인을 설치할 필요가 없음

• Promise 기반: Promise를 반환하므로, 비동기적인 데이터 요청을 더 간결하게 처리할 수 있음

• 간단하고 유연한 사용법: 간단한 구문을 사용하여 요청을 생성하고 응답을 처리할 수 있음

제이쿼리의 $.get도 여전히 많은 프로젝트에서 사용되고 있지만, 제이쿼리의 크기가 크고 네이티브 브라우저 기능이 향상되면서 제이쿼리를 대체할 수 있는 다양한 라이브러리와 네이티브 API가 등장했기 때문에 최근에는 제이쿼리를 사용하지 않는 경향이 있다.

fetch는 브라우저에서 기본적으로 제공되므로 추가적인 라이브러리를 사용하지 않아도 되며 Promise 기반이기 때문에 비동기 코드를 더 간결하게 작성할 수 있어 현재 많이 쓰이는 추세이다.

기본 사용법은 아래와 같음👇

function fetchData() {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

fetchData();

//기본적으로 이런식
fetch(경로)
  .then(response => response.json())
  .then(data => {})

💡EdgeHTML 엔진을 사용하는 Edge 브라우저의 이전 버전은 fetch를 지원하지 않았으나 EdgeHTML 대신에 Chromium 엔진을 사용하는 Edge 브라우저는 ES6의 fetch를 기본적으로 지원한다.
Edge 브라우저를 사용하는 경우, 최신 버전으로 업데이트하면 fetch를 사용할 수 있다.