Ajax , XMLHttpRequest , 동기 vs 비동기

페이지 주소가 바뀌지 않고(페이지가 새로고침 되지 않고) 데이터를 서버에 요청하고 싶다면?  Ajax

 

Ajax(Asynchronous Javascript and XML)

- JavaScript의 라이브러리중 하나

- 기존에 사용되던 여러 기술을 함께 사용하여, 웹 페이지의 일부분만을 갱신할 수 있도록 해주는 개발 기법

- 브라우저가 가지고있는 XMLHttpRequest객체를 이용해서 전체 페이지를 새로 고치지 않으면서 페이지의 일부만을 위한 데이터를 로드하는 기법

- 웹페이지의 Reload 없이 동적으로 웹페이지를 구성할수 있음

- 비동기(Asynchronous)로 통신함

- Javascript의 코드로 서버에 요청(Request)하고 응답(Response) 받는다.

- Javascript만으로 Ajax를 하게되면 코딩량도 많아지고 브라우저별로 구현방법이 다른 반면,

   jquery를 이용하면 더욱 편리(더 적은 코딩량과 동일한 코딩방법으로 대부분의 브라우저에서 같은 동작을 할 수 있게 됨)

 

JQuery AJAX 레퍼런스 문서

https://api.jquery.com/jquery.ajax/

jQuery.ajax() | jQuery API Documentation

 

 

Ajax를 이용한 웹 응용 프로그램의 동작 원리

① : 사용자에 의한 요청 이벤트가 발생
② : 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출됨
③ : 자바스크립트는 XMLHttpRequest객체를 사용하여 서버로 요청을 보냄
       이때 웹 브라우저는 요청을 보내고 나서, 서버의 응답을 기다릴 필요 없이 다른 작업을 처리
④ : 서버는 전달받은 XMLHttpRequest객체를 가지고 Ajax 요청을 처리
⑤와 ⑥ : 서버는 처리한 결과를 HTML, XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달
             이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달
⑦ : 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출
⑧ : 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시됨

 

XMLHttpRequest ( XHR )

현재 대부분의 주요 웹 브라우저는 서버에 데이터를 요청하기 위한 XMLHttpRequest객체를 내장하고 있다.
이 객체를 사용하면 웹 페이지가 전부 로딩된 후에도 서버에(URL에) 데이터를 요청하거나 서버로부터 데이터를 전송받을 수 있다. 즉, 웹 페이지 전체를 다시 로딩하지 않고 일부분만을 갱신할 수 다.

XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.

동기(Synchronous)vs비동기(Asynchronous)

동기(Synchronous)

수행시킨 코드가 다 진행될 때까지 기다리고 다음 코드 수행

A,B,C라는 명령이 있을때 시간의 순서대로 진행된다. A가 끝날때까지 B가 실행되지 않는다.

비동기(Asynchronous)

수행시킨 코드의 결과를 확인하지 않고 다음 코드 수행

명령의 순서와 상관없이 동시다발적으로 명령을 실행
비동기는 여러가지 명령을 돌려놓고 다른 일을 처리한다. 끝나면 정해놓은 함수(=콜백함수)를 부른다.