AJAX

AJAX란

• Asynchronous JavaScript And XML (비동기식 JavaScript와 XML)

• JSON, XML, txt, CSV 등 다양한 데이터 포맷을 주고 받을 수 있지만 요즘에는 가벼운 용량과 JavaScript의 일부라는 장점 때문에 JSON을 더 많이 사용
  
  

특징

1. 페이지 새로 고침 없이 서버에 요청

2. 서버로부터 데이터를 받고 작업을 수행

동기식 (Synchronous)

• 순차적, 직렬적 Task 수행

• 요청을 보낸 후 응답을 받아야만 다음 동작이 이루어짐 (blocking)

  • 예시) 잠자기 - 밥 먹기 - 씻기 이 task들은 하나가 끝나야 다음 동작을 할 수 있다.

  • 

• 한 행의 코드에서 처리까지 완료되어야 다음 코드를 실행

• 이런 현상이 나타나는 이유?

  • Javascript는 Single Threaded이기 때문!

    • Thread란,
    • 프로그램이 작업을 완료하기 위해 사용할 수 있는 단일 프로세스로
    • 각 thread는 한 번에 하나의 작업만 수행할 수 있으며,
    • 브라우저의 경우 탭(window 객체)당 하나의 thread를 갖는다.

비동기식 (Asynchronous)

• 병렬적 Task 수행

• 요청을 보낸 후 응답을 기다리지 않고 다음 동작이 이루어짐 (non-blocking)

  • 예시 : 설거지(식기세척기) - 빨래하기(세탁기) - 청소(로봇청소기) 이 3개의 task들은 동시에 처리할 수 있다.
  • 

왜 이런(비동기)식으로 일을 처리할까?

• 사용자 경험

  • 매우 큰 데이터를 동반하는 앱이 있다고 가정했을 때,

  • 모든 코드가 동기식이라면 데이터를 모두 불러온 뒤 앱이 실행됨

  • 즉, 모든 데이터의 로딩이 끝날때까지 앱이 멈춘 것 같아 보이고 응답하지 않는 것 같은 경험을 사용자에게 제공하게 됨

  • 서비스 마케팅 과목에서 고객을 무작정 기다리게 하지 말고, 서비스 과정에 참여시켜서 체감 대기시간을 줄이라는 기법이 있는데 그거와 같은 것!

    • 에버랜드의 아마존 익스프레스 알바생들이 춤을 추는 이유

  • 비동기식 코드라면 데이터를 요청하고 받는 과정에서 지속적으로 응답하는 화면을 보여줌으로써 좀 더 쾌적한 사용자 경험을 제공

  • 때문에 많은 웹 API 기능은 현재 비동기 코드를 사용하여 실행

• 하지만 JavaScript는 Single threaded이다

  • 이벤트를 처리하는 Call Stack이 하나인 언어이기 때문에,

  • 문제 해결을 위해 JavaScript는 아래와 같이 동작

    1. 즉시 처리하지 못하는 이벤트들을 다른 곳(Web API)로 보내서 처리하도록 하고,
    2. 처리된 이벤트들은 처리된 순서대로 대기실(Task Queue)에 줄을 세워놓고
    3. Call Stack이 비면 담당자(Event Loop)가 대기줄에서 가장 오래된 (제일 앞의) 이벤트를 Call Stack으로 보냄

  • 이에 대한 자세한 내용은 추후 업로드....