#1. Ajax - Ajax란?

Ajax란?

 

AJAX는 대화형 웹 응용프로그램을 만들기 위한 웹 개발 기술이다.

 

기존 웹 애플리케이션은 폼 양식을 작성하고 버튼을 눌러 내용을 제출하여 동기 요청을 사용하고 서버와 정보를 전송한다.

 

하지만 AJAX를 사용하면 자바스크립트가 서버에 요청하여 결과를 해석하여 현재 화면을 업데이트 하게 된다.
클라이언트는 이러한 화면 갱신 없이 데이터가 서버로 전송되었다는 사실을 알지 못해도 서버 데이터를 수신할 수 있게 된다.

AJAX는 서버 소프트웨어와는 별개의 독립적인 웹 브라우저 기술이며 기술 자체로는 프론트엔드로 분류가 된다.
하지만 서버 전송 이후 back-end와 연동되기 때문에 back-end와 혼동할 수 있다.

 

자바스크립트는 서버와 비동기 상호작용을 수행하기 위한 XMLHttpRequest 객체를 이용한다.

 

 

AJAX의 장단점

 

장점

1. 웹 페이지의 속도 향상 (전체 갱신이 아닌 필요한 데이터만 받아서 처리하기에 동기방식보다 속도가 빠르다.)
2. 서버에서 데이터만 전송하면 되므로 응답에 대한 코드 작성 양이 줄어들게 된다.
3. 기존 웹에서 불가능했던 다양한 기능을 가능하게 해준다. (무한스크롤, 아이디 중복확인 등)

 

단점
1. 페이지 이동 없는 통신으로 인한 보안상의 문제가 있다.
2. 연속적으로 데이터를 요청하면 서버 부하를 증가시킬 수 있다.
3. AJAX를 쓸 수 없는 브라우저에 대한 이슈가 있다.
4. script로 작성하기 때문에 디버깅이 용이하지 않다.

 

 

처리 구조

 

 

처리 절차

 

1. script문에 요청을 위한 XMLHttpRequest 객체 생성

2. 서버의 응답을 처리할 함수 생성 및 지정

   → onreadystatechange 함수 지정

3. open 메소드로 요청할 방법 및 요청할 대상(Server) 선정

   → 요청 메소드, 요청 주소, 동기/비동기 설정, 아이디, 패스워드 설정

4. send 메소드로 대상(Server)에 전송

   → post일때 파라미터 값 설정, 값 일때는 매개변수 없음

5. 응답상태에 따라 상태 확인

   → readyState(데이터 응답), status(처리 결과) 값을 이용

6. 응답완료 responseText, response?XML 이용 응답처리