Ajax

🍺 Ajax (Asynchronous JavaScript and XML)

• Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나.
• javascript를 통해 서버와 비동기 통신할 수 있는 기법을 의미하며, 페이지를 새로 고치지 않고도 서버로부터 데이터를 교환하고 페이지를 업데이트 할 수 있다.
• 웹 페이지 전체를 다시 로딩(전통적 웹앱 모델)하지 않고도, 웹 페이지의 일부분만을 갱신(Ajax를 사용한 웹앱)할 수 있다.
  (즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시)
• 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있다
  • JSON
  • XML
  • HTML
  • 텍스트 파일 등

👉 AJAX의 강력한 특징은 페이지 전체를 재로딩 하지 않고서도 수행 되는 "비동기성"이다.
이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해준다.

👉 AJAX의 주요 두가지 특징은 아래의 작업을 할 수 있게 해준다.
1) 페이지 새로고침 없이 서버에 요청
2) 서버로부터 데이터를 받고 작업을 수행

👉 Ajax의 X는 XML을 의미하지만, JSON 은 JavaScript의 일부가 되어 크기가 더 가벼워지는 것과 같은 많은 이점 때문에 오늘날 XML보다 선호된다. JSON과 XML은 모두 Ajax 모델에서 정보를 패키징하는 데 사용된다.

---

🍧 기존 기술과의 차이점

⛱ 전통적인 웹 애플리케이션 모델 vx Ajax를 사용한 애플리케이션 비교

기존 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 웹 서버로 제출(submit)을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 되돌려준다.
이때 최초에 폼을 가지고 있던 페이지와 사용자가 이 폼을 채워 결과물로서 되돌려 받은 페이지는 일반적으로 유사한 내용을 가지고 있는 경우가 많다. 결과적으로 중복되는 HTML 코드를 다시 한번 전송을 받음으로써 많은 대역폭을 낭비하게 된다.

반면 Ajax 애플리케이션은 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 보통 XML 기반의 웹 서비스 프로토콜이 사용되며, 웹 서버의 응답을 처리하기 위해 클라이언트 쪽에서는 자바스크립트를 쓴다.
웹 서버에서 전적으로 처리되던 데이터 처리의 일부분이 클라이언트 쪽에서 처리 되므로 웹 브라우저와 웹 서버 사이에 교환되는 데이터량과 웹서버의 데이터 처리량도 줄어들기 때문에 애플리케이션의 응답성이 좋아진다. 또한 웹서버의 데이터 처리에 대한 부하를 줄여주는 일이 요청을 주는 수많은 컴퓨터에 대해서 일어나기 때문에 전체적인 웹 서버 처리량도 줄어들게 된다.

---

🍧 Ajax 사용 장.단점

장점

• 웹 페이지 전체를 다시 로딩하지 않고도(새로고침❌), 웹 페이지의 일부분만을 갱신할 수 있다.
• 페이지 이동없이 고속으로 화면을 전환할 수 있다.
• 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
• 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.
• 플러그인 없이도 인터렉티브한 웹페이지 구현할 수 있다.
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있고, 서버로부터 데이터를 받을 수 있다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

단점

• Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 페이지 이동없는 통신으로 인한 보안상의 문제.
• 클라이언트의 PC로 Ajax 요청을 보낼 수는 없다.
• 지원하는 Charset이 한정되어 있다.
• 스크립트로 작성되므로 디버깅이 용이하지 않다.
• 요청을 남발하면 역으로 서버 부하가 늘 수 있다.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
• 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다. (❗️❗️ CORS)
• Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.

❗ 클라이언트 풀링(client pooling) 방식이란 사용자가 직접 원하는 정보를 서버에게 요청하여 얻는 방식을 의미한다.
이에 반해 서버 푸시(server push) 방식이란 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것을 의미한다.
스마트 폰에서 각종 앱이 보내는 푸시 알림이 서버 푸시 방식의 대표적인 예다.

---

🍧 작동 방식

• 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 비동기 방식으로 데이터를 로드할 수 있다.
• AJAX라는 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청(request)하고 그에 대한 결과를 돌려받을 수 있다(response).

⛱ 비동기 방식
비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

페이지 리로드의 경우, 전체 리소스를 다시 불러와야하는데 이미지, 스크립트 , 기타 코드등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만 비동기식 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있으므로 매우 큰 장점이 있다.

⛱ AJAX의 진행과정
(1) XMLHttpRequest Object를 만들기.

• request를 보낼 준비를 브라우저에게 시키는 과정
• 이것을 위해서 필요한 method를 갖춘 object가 필요함

(2) callback 함수를 만들기.

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

(3) Open a request

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

(4) send the request

---

⛱ AJAX가 쓰이는 방법
XMLHttpRequest 객체를 얻은 뒤, url을 통해 요청(request)하고 응답(response)을 받으면 응답 결과에 맞는 함수(callback함수)를 실행하는 구조로 되어 있다.
예전에는 XMLHttpRequest API를 이용하여 구현했지만, 불편함을 느낀 사용자들이 JQuery를 통해 구현하기 시작했고, 그 이후 fetch API가 ES6(ES2015) 표준으로 등장하면서 fetch API를 통해 구현하는 것이 일반적인 방법이 되었다.

// ♣️ 기본적인 fetch구조

fetch(resource, init)  // resource: URL 경로, 요청 주소 / init: 설정 객체
    .then( callback )
    .catch( callback )
// resource: URL 경로, 요청 주소


// ♣️ init 객체 작성 예
const init = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'same-origin',
  };


// ♣️ fetch 예시
const url = 'https://youtube.com/todos/';
const init = {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'same-origin',
  };

fetch(url, init)
    .then(res => {
        if(res.status === 200){
            return res.json()
        }
        else{
            console.error(`HTTP error! status: ${res.status}`)
        }
    })
    .then(jsonData => {
        console.log(jsonData)
    })
    .catch(err => {
        console.log(err)
    })