[AJAX] 에이젝스(Ajax)란?

1. AJAX 란 무엇인가?

AJAX 는 XML 에 기반한 종합 기술로 비동기 자바스크립트 XML(Asynchronous javascript and xml)을 줄인 말로

자바스크립트로 http 요청을 보내서 xml 응답을 받아 사용하는 기술이다.

 

쉽게 말하면, 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.

HTML form 태그가 아니라 자바스크립트를 통해서! 따라서 우리는 서버에서 로딩된 데이터를 페이지에 보여주기 위해 새로운 HTML페이지로 갈 필요도 없고 '새로고침'을 할 필요가 없는 것이다. 부분 부분만 로딩되므로 속도가 빠르다.

 

즉, Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있겠습니다.

 

 

1-1. Asynchronos?(비동기)

• 해석하면 '비동기적'이다.
• '비동기적'이라는 것은, 클라이언트에서 서버에 요청을 보낼 때 요청을 보내놓고 프로그램은 계속 돌아간다는 의미이다. 즉, 먼저 요청한 것에 대한 콜백함수가 먼저 실행되지 않는다는 것이다.

1-2. Javascript?

• 자바스크립트는 웹 브라우저에 대한 스크립트 언어로 만들어진 언어이다. 웹 브라우저에서 출발했기 때문에 본래 서버와 소통하는 기능은 없었으나 AJAX는 가능하다.

1-3. XML?

• XML은 데이터 형식의 일종이다.
• XML은 'Extensible Markup Language'의 준말이다. 즉 확장가능한 '표시' 언어 라는 것이다.

 

2. AJAX 의 원리

- Ajax의 처리과정

 

1) http요청을 보냄

2) xml 문서를 응답으로 받음

3) 자동으로 xml 개체가 생성

4) 자바스크립트는 xml개체에 접근하여 다양한 작업을 수행 - html+css, dom, xml, xslt, xpath, xmlhttprequest,

    javascript를 합쳐서 사용

 

 

클라이언트 화면에서 XML 또는 JSON 을 파싱해서 화면에 출력한다.

(파싱 : 사용하고자 하는 부분만 발췌하는 것)

서버에서는 DB테이블을 조회해서 xml 또는 json 형식으로 화면에 출력하면 클라이언트로 전송됨

ex) jsp: print()

 

클라이언트 측 언어 : 자바스크립트

서버 측 언어 : PHP, ASP, JSP

* WAS

종류 : jsp, php, asp, asp.net

하는 일 : xml이나 json으로 변환시켜줌.

​

​

* XML (eXtensible Markup Language)

: 확장 가능한 마크업 언어

=> 개발자가 태그를 직접 정의해서 사용할 수 있음

=> 대소문자 구분이 있음. (html은 대소문자 구분 없음)

=> 시작태그와 끝태그가 반드시 한 쌍으로 존재해야 함.

=> 웹 표준언어.

=> JSON 에 비해서 무겁고, 파싱속도가 느려서 현재 JSON을 많이 사용하는 추세.

=> xml 파일을 저장할 때, encoding 타입은 utf-8로 저장 (메모장은 UTF-8 이 기본값이 아님)

 

 

 

 

3. AJAX 사용 이유

 

Ajax를 사용하는 가장 큰 이유는 웹에서 액티브X, 플래시 또는 자바애플릿 등에 의존했던 사용성 및 접근성,

응답성의 향상이다. 액티브X, 플래시 등은 네트워크 인프라가 발전하면서 네트워크 속도가 빨라짐에 따라

웹페이지 전체가 매번 리로딩 되는 사용성, 응답성의 한계 대안책으로 불리우는데,

이러한 기술들 대신에 Ajax 가 가질수 있는 경쟁력으로는 플러그인을 사용하지 않고 브라우저 만으로

할 수 있다는 것과 새로운 것을 배우지 않고도 기존 웹 기술들을 그대로 이용할 수 있다는 것이다.

 

다시 말해 Ajax 를 사용하게 되면 Json이나 xml 형태로 필요한 데이터만 받아 갱신하기 때문에 

자원과 시간을 아낄 수 있으며 속도측면에서도 우수하다.

 

 

4. AJAX 의 장단점

 

Ajax의 장점

1. 비동기 통신을 사용함으로써 데이터를 보내고 나서도 사용자는 다른 작업을 할 수 있다.

2. 데이터만 들어가 있는 형식으로 응답을 받기 때문에 전통적인 웹 어플리케이션 방식에 비해 서버측 처리속도가 빠르

   고 전송데이터 양도 훨씬 적다.

3. 응답으로 받은 xml문서를 xml개체로 접근하여 스크립트로 조작하고 xpath를 사용하여 xml문서를 검색하거나 xsl을

   사용해 변환할 수 있다. 따라서 실행 속도가 빠르다.

4. 불필요한 데이터 요청을 최소화 할 수 있고 많은 일이 클라이언트 웹 브라우저에서 처리될 수 있다.

5. 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.

 

Ajax의 단점

1. 연속으로 데이터 요청하면 서버 부하가 증가 할 수 있다.

2. 보안에 좀 더 신경을 써야 한다.

3. AJAX는 클라이언트 풀링방식으로 실시간 서비스를 제공할 수 없다.

4. AJAX가 포함된 html페이지가 속한 서버가 아닌 다른 서버로 요청을 보낼 수 없고, 클라이언트 pc의 파일에 접근할 

5. Http 클라이언트의 기능이 한정되어 있다.

 

주의사항

 

* 뒤로가기 버튼 사용의 어려움

ajax은 javascript를 사용하여 동작하기 때문에 페이지 단위의 브라우저에서 사용자경험과 다르게 작동하는 경우가 있다. 특히 뒤로가기 버튼의 기능 상실로 ajax를 유해한 기술로 매도하기도 한다. (뒤로가기 버튼은 웹 서핑을 수행하는 사용자들이 클릭 다음으로 많이 사용하는 기술이므로..)

 

* 진행 파악의 어려움

XMLHTTPREQUEST를 통해 통신하는 경우 웹 페이지 로딩과는 달리 사용자에게 아무런 진행정보가 주어지지 않는다. 그래서 아직 요청이 완료되지 않앗는데 사용자가 페이지를 떠나거나 기다림을 참지 못한 사용자가 다른 기능을 수행함으로써 오작동을 일으킬 우려가 발생하게 된다. 이 경우 사용자의 요청이 처리중에 있다는 표시를 화면에 보여주도록 처리할 수 있다. 중간중간 LOADING상태 표시를 통해 사용자의 요청이 처리중임을 알려주는 방법을 예로 들 수 있다.