Node.js - AJAX(Asynchronous Javascript And XML) 란?

AJAX란?

로그인 화면을 구현하는데 ajax를 통해 화면을 새로고침하지 않고 데이터를 디스플레이하는 방법을 사용하였다. 예전에 프로젝트를 진행하면서 django 프레임워크를 사용할 때 ajax를 한번 사용했었는데 이번 기회에 개념을 정리하고 알아두면 좋을 것 같았다.

• Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
• 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다.
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

---

비동기 방식이란?

일반적으로, 프로그램의 코드는 순차적으로 진행된다. 한 번에 한 가지 사건만 발생하면서 진행되는 동기적 방식의 프로그램에서 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보자면, 전체 프로그램이 모두 멈춘 것처럼 보인다. 만약 다른 코어 프로세서에 다른 작업들을 움직이게 하고 작업이 완료되면 알려줄 수 있을 때, 무언가를 기다리는 것은 효율적이지 않은 방식이다.그 동안 다른 작업을 수행할 수 있으면 그것을 실행하는 것이 효율적이다. 이것이 비동기 프로그래밍의 기본원리이다. 비동기 방식에 대해서는 다른 포스팅으로 추후에 다루도록 하겠다.

 

---

AJAX의 사용 기술

• HTML
• DOM
• JavaScript
• XMLHttpRequest
• Etc

---

AJAX의 장점

• 웹페이지의 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

---

AJAX의 단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
• AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 지원하는 Charset이 한정되어 있다.
• Script로 작성되므로 디버깅이 용이하지 않다.
• 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

---