[JavaScript][비동기] Ajax 비동기 기술

▶ Ajax

Asynchronous JavaScript and XML XMLHttpRequest 기술을 사용해서, 복잡하고 동적인 웹 페이지를 구성하는 프로그래밍 방식

 

▶ Ajax의 정의 

비동기적인 웹 어플리케이션 개발을 위한 기술 브라우저와 서버 간의 데이터를 비동기적으로 교환하는 기술 Ajax를 사용하면, 페이지 전체를 새로고침 하지 않고도  동적으로 데이터를 불러와 화면을 갱신할 수 있다.  Ajax의 'x'는 XML이라는 데이터 타입을 의미하긴 한다.  하지만, 요즘에는 더 가벼운 용량과  JavaScript의 일부라는 장점 때문에  'JSON'을 많이 사용한다.

 

▶ Ajax의 목적

전체 페이지가 다시 로드되지 않고, HTML 페이지의 일부 DOM만 업데이트 된다  웹 페이지의 일부가 다시 로드되는 동안에도  코드가 계속 실행되어  비동기식으로 작업할 수 있다.

---

▶XMLHttpRequest 객체 (XHR)

서버와 상호작용 할 때 사용하는 객체

페이지의 새로고침이 없어도 

데이터를 가져올 수 있다. 

 

▶XMLHttpRequest의 특징 

JavaScript를 사용하여, 서버에 HTTP 요청을 할 수 있는 객체이다 브라우저와 서버 간의 네트워크 요청을 전송할 수 있다  사용자의 작업을 방해하지 않고, 페이지의 일부를 업데이트 할 수 있다.  => 이름에 XML이라는 데이터 타입이 들어가긴 하지만 XML뿐만 아니라 모든 종류의 데이터를 가져올 수 있다.

---

▶기존 기술과의 차이 

기존 방식	Ajax
1. 클라이언트(브라우저)에서 form을 채우고  이것을 서버로 제출한다 (submit) 2. 서버는 요청 내용에 따라 데이터를 처리한 후  새로운 웹페이지를 작성하여, 응답으로 전달한다  결과적으로 모든 요청에 따라  새로운 페이지를 응답 받기 때문에  계속해서 새로고침이 발생한다.  기존 페이지와 유사한 내용을 가지고 있는 경우 중복된 코드를 다시 전송 받음으로써  대역폭을 낭비하게 되는 경우가 많다	1. XHR 객체 생성 및 요청 2. 서버는 새로운 페이지를 응답으로 만들지 않고, 필요한 부분에 대한 데이터만 처리한 후 응답한다 (JSON 및 기타 데이터) 새로운 페이지를 받는 것이 아닌  필요한 부분의 데이터만 받아  기존 페이지의 일부를 수정한다 (새로고침 X) 서버에서 모두 처리되던 데이터 처리의 일부분이  이제는 클라이언트 쪽에서 처리되므로  교환되는 데이터량과 처리량이 줄어든다

---

▶이벤트 핸들러는 비동기 프로그래밍의 한 형태 

이벤트가 발생할 때마다 호출되는 함수 (콜백 함수)를 제공하는 것  HTTP 요청은 응답이 올때까지의 시간이 걸릴 수 있는 작업이기 때문에 비동기이다.  XHR 객체에 이벤트 핸들러를 연결해  요청의 진행 상태 및 최종 완료에 대한 응답을 받을 수 있다.