Ajax(Asynchronous JavaScript And XML)

예전에는 웹페이지에서 뭔가를 클릭하면 페이지 전환을 위해 전체 페이지 전부를 재로딩해야 했다. 과거의 네이버 페이지에서 클릭시 화면이 껌뻑 거리던게 그 때문이다. 이런 걸 Static Web Page(정적 웹 페이지)라고 한다.

그러나 요즘 Youtube나 Instagram 같은 보다 애플리케이션다운 Web App에서는 스크롤해 최신 게시글이나 영상을 띄워도 깜빡임없이 아주 seamless하게 작동된다. 이런 걸 Dynamic Web Page(동적 웹 페이지)이라고 한다.

이런 자유로운 동적 웹 페이지 구성을 위해 등장한 것이 Ajax다. Ajax는 하나의 특정 기술이라기보다는 아래와 같은 기술의 모음 통칭이자 웹 개발 기법이다.

• Ajax의 사용은 일반적으로 클라이언트와 서버측의 데이터 전송 및 처리를 비동기적(Asynchronous)으로 처리하는 것에 그 목적이 있다.
  
  
• XMLHttpRequest(XHR), jQuery같은 비동기적 서버통신의 등장으로 서버와 보다 자유롭게 통신을 할 수 있게 되었고, 최근에는 보다 유연하고 쓰기 쉬운 표준 API인 fetch API를 활용한다.
  
  
• 위와 같은 API로 서버에서 필요한 데이터만 XML이나 json형태로 받아와 Javascript + DOM을 활용하면 전체 HTML 페이지를 리로드하지 않고(화면의 깜빡임 없이), 페이지의 일부만 갱신할 수 있다.

흔히 동적웹사이트, 반응형 웹사이트를 만들기 위해서는 javascript가 필요하다고 말하는데, 이제 그 이유와 원리(?)를 조금은 더 명백히 알게 되었다고 할 수 있겠다.

fetch API

예제

fetch('http://example.com/movies.json')//리소스를 요청(GET)할 URL
  .then(function(response) { 
    return response.json();
  })
  .then(function(json) {
    // json 형태로 전달받은 서버로부터의 응답
  });

추가작성예정

• Fetch API's 3 Interface : headers,request, response
  mozilla hacks - this api is so fetching
• Differance of Fetch API & XMLHttpRequest(XHR), jQuery
  StackOverflow - Fetch API vs XHR
  MDN - Using Fetch API