[Ajax] ajax란?

Ajax란?

• Asynchronous JavaScript and XML (비동기 자바스크립트 XML) 의 줄임말이다.
• HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술들을 함께 사용하는 개발 기법이다.
• 빠르게 동작하는 동적인 웹 사이트를 만들기 위한 개발기법 중 하나이다.
• 웹 페이지를 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다. (비동기)
• Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
• 서버와 다음과 같은 다양한 형태의 데이터를 주고 받을 수 있다.
  • JSON
  • XML
  • HTML
  • 텍스트 파일 등

Ajax의 장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.
• 웹 페이지가 로드 된 후에 서버로 데이터 요청을 보낼 수 있다.
• 웹 페이지가 로드 된 후에 서버로부터 데이터를 받을 수 있다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.
• 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있다.
• 데이터만 들어가 있는 형식으로 응답을 받으므로 전통적인 웹 어플리케이션에 비해서 서버 측 처리 속도도 빠르고 전송 데이터 양도 적다.

= > 페이지를 재로딩하지 않기때문에 데이터 처리 속도나, 편리성면에서 장점이 있다.

 

Ajax의 한계

• Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 폴링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없다.
  • 클라이언트 폴링 : 사용자가 원하는 정보를 서버에 요청하여 얻는 방식
  • 서버 푸시 방식 : 사용자가 요청하지 않아도 서버가 알아서 자동으로 특정 정보를 제공하는 것
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없다.
  • 바이너리 데이터 : .jpg, .png 같은 그림 파일이나 .mp3와 같은 음악 파일 그리고 .exe 같은 실행파일등에 해당하는 것으로. 사용자 또는 프로그램이 사용하던 정보나 숫자 값을 특별한 가공없이 그대로 파일에 저장하는 특징을 가진 데이터이다.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없다.
• 클라이언트의 pc로 Ajax 요청을 보낼 수는 없다.

Ajax의 동작원리

이미지 출처 : https://hieroglyph.tistory.com/13

1. 유저가 이벤트를 발생시켜 자바스크립트 실행
2. 자바스크립트는 XMLHttpRequest 객체를 사용하여 서버로 요청 ( 이때 웹 브라우저는 요청을 보내고 나서 서버 응답 대기 없이 다른 작업 수행 가능 )
3. 서버는 전달 받은 Ajax 요청 처리
4. 서버는 처리한 결과를 HTML., XML 또는 JSON 형태의 데이터로 웹 브라우저에 전달( 필요한 데이터만 전달)(비동기)
5. 받은 데이터로 페이지 일부 갱신