AJAX 란?

AJAX(Asynchronous JavaScript and XML)란? 

정의: 

AJAX(Asynchronous JavaScript and XML)는 동적 웹 애플리케이션을 구현하는 데 필요한 기술입니다. 

또한, 그와 관련된 모든 전송 처리는 비동기로 이루어지며, 이 방식은 거의 모든 브라우저에서 제공하는 XMLHttpRequest 객체를 통해 구현됩니다.

하지만 XMLHttpRequest 객체는 W3C 표준이 아니므로 브라우저마다 설계 방식에 대한 차이가 존재합니다. (다행히도 현재 대부분의 브라우저가 XHR 객체를 서로 비슷하게 구현하고 있다.)

AJAX 사용 시 장/단점

장점: 

1. 비동기 처리로 페이지 새로고침 없이 받은 데이터를 가공하여 DOM을 조작할 수 있다.

2. 갱신시킬 페이지에 소량의 데이터 블록만 서버로부터 수신하기 때문에 서버 및 네트웍 부하를 줄일 수 있다.

단점:

1. 거의 모든 브라우저가 XHR 객체를 지원하고 있지만 그렇지 않은 경우도 존재하므로 호환성 문제가 야기된다.

2. 비동기 요청은 페이지 URL을 따로 생성해서 가져가야 한다. 하지만 그를 보완하기 위한 방법으로 하나의 URL을 가공하여 각기 다른 형식의 데이터로 응답할 수 있다.

3. AJAX 비동기 요청은 보안 정책으로 크로스 도메인 접근이 허용되지 않는다.

기존 동기 처리 방식:

비동기 처리 방식:

XMLHttpRequest 객체 맴버:

1. void open(string method, string url, boolean asynch): HTTP 요청 함수

1. xhr.open(method, url, true);

method: 서버에 데이터를 전송하기 위한 메시지 전송 방식을 지정하거나 반환합니다. 지정 가능한 method로는 head, trace, put, delete, connect가 있습니다.

url: 서버로 전송되는 주소를 지정합니다.

asynch: 비동기 / 동기 요청

2. void setRequestHeader(string header, string value): 요청 HTTP Header 값 지정

1. xhr.setRequestHeader(key, value);

** 반드시 xhr.open() 메소드 호출 후 지정해야 한다.

header: 헤더 key

value: 헤더 value

3. onreadystatechange (응답 이벤트): xhr.readyState 상태값 변경 시 마다 이벤트에 할당된 handler를 호출한다.

1. (function($this){ xhr.onreadystatechange = function(){ handler.call($this, xhr); }; })(this);

1. function handler(xhr){
2.        
3.     if ( xhr .readyState === 4){
4.  
5.         if (error( xhr .status)) alert('request Error' +  xhr .status);
6.         else this.callback.apply( xhr, [getXhrData.call(this,  xhr ),  xhr .status]); 
7.     }
8. };

아래는 xhr.readyState 상태값을 나타냅니다.

0: uninitialize: open 메소드가 호출되지 않은 상태

1: loading: send 메소드가 호출되지 않은 상태

2: loaded: send 메소드가 호출된 상태, header 와 status 사용 가능 / status와 헤더는 도착하지않은상태

3: interactive: reponseText 에 부분적인 데이터가 저장 됨

4: completed

4. void send(string arg): 서버 전송함수(arg: GET 전송 방식인 경우 null / POST 전송 방식인 경우 해당 파라메터 문자열 지정)

1. if (method === 'get') xhr.send(null);
2. else if (method === 'post') xhr.send(params + '&s=' + encodeURIComponent(new Date().toUTCString()));

5. xhr.responseText / responseXML: 응답 데이터

1. function getXhrData(x)
2. {
3.  
4.     var contentType = x.getResponseHeader('content-type')
5.       , xml = contentType && contentType.indexOf('xml') > -1
6.       , json = contentType && contentType.indexOf('json') > -1;
7.  
8.     var type = this.type.toLowerCase();
9.  
10.     if (xml && type === 'xml') return x.responseXML;        
11.     else if (json  && type === 'json') return eval('(' + x.responseText + ')');
12.     else if (type === 'text') return x.responseText.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/g, '');
13.     else return x.responseText; // html */*
14.  
15. };

xhr.responseText: 반환된 일반 텍스트 문자열

xhr.responseXML: 반환된 XML - DOM 객체

6. xhr.status: 응답 코드

1. // 서버 에러 유/무
2. function error(s){
3.  
4.     return !s && window.location.protocol === 'file:' ? false : s >= 200 && s < 300 ? false : s === 304 ? false : true;
5. };

200 계열 - 요청성공 / 200 : 요청성공

300 계열 - Redirect

400 계열 - 클라이언트측 오류 / 403 : 접근거부 / 404 : 페이지없음

500 계열 - 서버측 오류 / 500 : 서버오류

- xhr.statusText: HTTP 응답 상태를 나타내는 문자열

7. void abort(): HTTP 요청을 취소

8. string getAllResponseHeaders(): 모든 헤더 정보를 반환