AJax란 무엇인가?

1_ AJax

- 'Asynchronous JavaScript and XML'은 웹 어플리케이션 구축의 패러다임을 변경하고 있다. 이름만 보면 AJax는 '비동기 방식의 자바스크립트와 XML'로서 자바스크립트 및 XML만을 사용할 것 같지만 실제로 보면 보다 많은 기술이 복합적으로 사용되어 AJax가 구성된다.

 

- AJax : Asynchronous JavaScript + XML

  JavaScript를 사용한 비동기 통신, Client와 Server간에 XML 데이터를 주고받는 기술

 

 

동기 - 소켓 (반드시 요청을 하면 다시 와야한다. 자바로는 동기를 처리하지 못한다.)

비동기 - 요청을 하고 다시 돌아올때까지 자기 일을 하다가 응답이 돌아오면 자기 일을 한다. 

요즘 모든 프로그램은 비동기로 움직여야한다.

비동기의 단점은 순서대로 처리하지 못한다는 것이다. 그래서 결과값을 가지고 움직이겠다라는 식의 프로그램을 짜면 프로그램이 돌아가지 않는다.

비동기방식으로 돌아가는 프로그램 - 지도

화면이동을 하지 말라고 해서 나온게 AJax이다.

 

2_AJax의 장단점

1_ 장점

• 페이지 이동 없이 고속으로 화면 전환 (AJax의 가장 큰 목적, 그래서 alert창을 띄워 알리는건 최하위 프로그램임)
• 서버 처리를 기다리지 않고 비동기 요청이 가능
• 서버 측 처리를 각 PC에 분산 가능
• 수신하는 데이터 양을 줄임

 

2_ 단점

• 크로스 브라우저화의 노하우 필요(= 웹표준이 안된다. 이걸 위해서는 html5를 공부해 줘야한다.)
• AJAX를 사용하지 못하는 브라우저
• 오픈소스 이므로 차별화가 어렵다.
• 보안에 더욱 신경을 써야 한다.

3_ 기존방식과 AJax의 차이

3_1 기존방식

1. 웹 브라우저가 웹 서버에 요청 전송
2. 웹 서버는 JSP 등의 서버 어플리케이션을 사용해 사용자의 요청 처리 후 결과를 HTML로 생성해서 웹 브라우저에 전송
3. 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그린다.
4. 결과적으로 웹 브라우저가 웹 서버와 통신을 하고 요청 결과는 HTML로 생성되고 사용자 입장에서는 페이지 이동이 발생한다. 

 

3_ 2  AJAX 방식

1. 사용자가 이벤트를 발생 -> 자바스크립트는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달한다.
2. 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리 후 결과를 XML이나 단순 Text을 생성해서 XMLHttpRequest에 전송한다.
3. 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 자바스크립트에 도착 사실을 알고 자바스크립트는 응답 데이터와 DOM을 이용해 사용자 화면에 반영한다.
4. 결과적으로 사용자 입장에서는 페이지 이동이 발생되지 않고 페이지 내부 변화만 일어난다.

ajax는 xmlHttpRequest라는 객체가 모든 응답과 요청을 담당한다. 

4_AJAX의 주요 구성 요소

1. XMLHttprequest : 웹서버와 통신을 담당한다. 사용자의 요청을 웹서버에 전송 및 웹서버로부터 받은 결과를 웹브라 우저에 전달한다.
2. DOM : 문서의 구조를 나타냄, 폼 등의 정보나 화면 구성을 조작할때 사용함
3. CSS : 글자색, 배경색, 위치, 투명도 등 UI관련 부분을 담당
4. 자바스크립트 : 사용자가 마우스를 드래그하거나 버튼을 클릭하면 XMLHttpRequest객체를 사용해 웹서버에 요청을 전송한다./ XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등을 사용해 화면을 조작한다. 

5_ XMLHttpRequest 프로그래밍 순서

1. 웹서버에 요청 전송하기
2. 웹서버에서 응답이 도착하면 화면에 변경하기

6_웹 서버에 요청 전송하기

6_1 XMLHttpRequest 객체의 메소드

- abort()메소드 : 현재의 요청을 중단하는 메소드

- getAllResponseHeadders() : Http요청에 대한 모든 응답 헤더들을 키와 값의 쌍인 문자열로 리턴한다.

- getResponseHeader() : 매개 변수로 주어진 headerName에 해당하는 헤더의 값을 문자열로 리턴한다.

- open() : 사용자의 요청을 설정하는 메소드로 반드시 기술해야 하는 매개 변수인 method, url과 선택적으로 기술할 수 있는 요청에 대한 매개변수들을 갖고 있다. 

- send() : 사용자의 요청을 서버로 보내는 역할

- setRequestHeader() : 헤더의 값을 설정

 

6_2 sample: 서버에 있는 "test.txt" 파일을 읽어오는 코드

httpRequest = new XMLHttpRequest();
httpRequest.open("GET","/test.txt",true);
httpRequest.send(null);

 

※위의 예제에서 보면 open() 함수는 세 개의 인자를 입력받는데 각 인자는 아래와 같은 의미를 가지게 된다.

- 첫 번째 인자 : HTTP 메서드를 지정한다. HTML폼을 보면 method 속성에 "GET"이나 "POST"를 값으로 주는데 첫 번째 인자도 같은 값이 사용된다.

- 두 번째 인자 : 접속할 URL을 입력한다. 웹 브라우저의 보안상의 이유로 접속할 URL은 현재 페이지와 같은 도메인에 있어야 한다.

- 세번째 인자 : 동기/비동기 방식을 지정한다.

 

 

6_3 GET방식으로 전달하는 예

httpRequest = new XMLRequest();
httpRequest.open("GET","/test.jsp?id=tommy&pass=javaline", true);
httpRequest.send(null);

6_4 POST방식으로 전달하는 예

httpRequest = new XMLRequest();
httpRequest.open("POST","/test.jsp", true);
httpRequest.send("id=tommy&pass=javaline");

7_서버에서의 응답처리

7_1 XMLHttpRequest객체의 프로퍼티

- onreadystatechange 프로퍼티 : 상태의 변경이 발생했을 때 해당하는 이벤트를 ㅊ리하기 위한 이벤트 핸들러를 기술 한다.

- readyState 프로퍼티 : 요청 객체의 상태를 리턴하는 것 

- responseText 프로퍼티 : 문자열로 이루어진 서버의 응답을 받는다.

- responseXML 프로퍼티 : XML로 이루어진 서버의 응답을 받는다.

- responseBody 프로퍼티 : 이진 코드 문자열로 서버의 응답을 받는다.

- status 프로퍼티 : 서버로 부터 응답 받는 Http상태 코드로, 숫자로 리턴된다. 

 

7_2 

open() 함수와 send() 함수를 사용하여 웹 서버에 데이터를 전송한 다음에 할 작업은 서버로부터 응답이 도착하면 알맞게 처리하는 것이다. XMLRequest 객체는 웹 서버에서 응답이 도착하면 특정한 자바스크립트 함수를 호출하는 기능이 있는데 이때 사용되는 프로퍼티가 onreadystatechange 이다.

 

httpRequest = getXMLHttpRequest();
httpRequest.onreadystatechange = callbackFunction;
httpRequest.open("GET","/test.jsp",true);
httpRequest.send(null);
...
function callBackFunction(){}

사용자가 이벤트를 발생하면 이벤트 처리 함수를 호출한다.

이벤트 처리 함수에서는 XMLHttpRequest 객체의 send() 함수를 호출한다.

XMLHttpRequest 객체의 send()함수가 호출되면 웹 서버에 요청이 전송된다.

웹 서버는 알맞게 처리한 뒤 응답 결과를 XMLHttpRequest에 전송한다.

XMLHttpRequest객체에 응답이 도착하면 onreadystatechange 프로퍼티에 지정한 콜백 함수를 호출한다. 

 

8. XMLHttpRequest 객체의 상태 : readyState 

앞에서 XMLHttpRequest 객체의 onreadystatechange 프로퍼티에 콜백 함수를 지정하면 웹 서버로부터 응답이 도착했을 때 콜백함수가 호출 된다고 했는데 사실은 콜백함수는 readyState라는 프로퍼티 값이 변경될 때 마다 호출된다. 

 

8_1 readyState 프로퍼티 값

값	의미	설명
0	UNINITIALIZED	객체만 생성되고 아직 초기화 되지 않은 상태, open 메서드가 호출되지 않음
1	LOADING	open 메서드가 호출되고 아직 send메서드가 호출되지 않은 상태
2	LOADED	send메서드가 호출되었지만 status의 헤더는 도착하지 않은 상태
3	INTERACTIVE	데이터의 일부를 받은 상태
4	COMPLETED	데이터를 전부 받은 상태, 완전한 데이터 이용 가능

8_2 readyState를 고려한 콜백 함수 샘플

function callBackFunction(){
	if(httpRequest.readyState == 4){
    	//서버에서 완전하게 응답이 도착한 경우
    
    }
}

readyState 값이 2와 3인 경우는 웹 브라우저마다 다르게 처리된다. 예를 들어 오페라에서 요청한 페이지가 존재하지 않을 경우 readyState값이 3으로 변경되지 않지만 파이어폭스나 IE의 경우는 요청한 페이지가 존재하지 않더라도 readyState값이 3으로 되기도 한다. 따라서 readyState값을 사용할 때는 1과 4를 사용하는 것이 크로스 브라우저를 지원하는 알맞은 방법이다.

 

9. 서버로 부터의 응답상태: status

웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야한다. 웹 서버는 작업이 올바르게 실행되었는지 처리도중에 에러가 발생했는지 등의 여부를 상태코드를 통해서 알려주는데 XMLHttpRequest객체는 웹 서버가 전달한 상태 코드를 status 프로퍼티에 저장한다. 

 

9_1 status 프로퍼티에 저장되는 HTTP 주요 상태 코드

값	의미	설명
200	ok	요청 성공
403	Forbbiden	접근 거부
404	Not Found	페이지 없음
500	Internal Server Error	서버 오류 발생

9_2 

다라서 서버로 부터 응답이 도착하면 status 프로퍼티를 사용해서 요청이 성공적으로 수행되었는지를 확인해야 한다. 

function callBackFunction(){
	if(httpRequest.readyState == 4){
    	if(httpRequest.status == 200){
        	//정상적으로 수행
        }else{
        	alert("문제 발생 : "+ httpRequest.status)
        }
    }
}

10. 응답 데이터 사용하기

웹 서버는 단순 텍스트 또는 XML의 두 가지 형식으로 데이터를 전송할 수 있다.

10_1 단순 텍스트를 응답을 참조하는 예

function callBackFunction(){
	if(httpRequest.readyState == 4){
    	if(httpRequest.status == 200){
        	var txt = httpRequest.responseText;
            //txt 변수를 사용해서 알맞은 작업 수행
        
        }
    
    }
}

11. 한글 처리

JSP의 경우 UTF-8이나 EUC-KR에 상관없이 한글이 잘 출력된다. 그 이유는 텍스트 파일인 경우 개릭터 셋을 마음대로 지정할 수 있는 방법이 없기 때문이다. 즉 단순 텍스트 파일인 경우 캐릭터 셋을 지정할 수 없기 때문에 웹 서버는 해당 캐릭터 셋을 그대로 전송하게 된다. 특별히 지정된 캐릭터 셋이 없으므로 XMLHttpRequest의 기본 캐릭터 셋인 UTF-8을 사용한다. 

 

12. 동기/비동기 방식의 차이

XMLHttpRequest의 open() 함수는 인자를 세 개 받는데 그중 마지막 인자는 동기/비동기 여부를 표시한다.[true : 비동기 방식 / false : 동기 방식]

httpRequest = getXMLHttpRequest();
httpRequest =.open("GET","/test.txt",true)

비동기 방식으로 실행한 경우 send() 함수가 호출된 뒤 곧 바로 다음 코드가 실행된다. 반면 동기 방식으로 실행하면 send()함수가 호출되고 서버와의 통신이 완전히 완료된 이후에 send()함수 이후의 코드가 실행된다. 

 

13. 파라미터에서 한글 처리 방법

아래와 같이 open()함수를 호출했다고 가정해 보자

httpRequest.open("GET","/myfile.jsp?name=이승재",true);

자바스크립트 문자열을 UTF-8로 인코딩해주는 함수인 encodeURIComponent() 함수를 제공하고 있다.

var params = "name" + encodeURIComponent("이승재");
httpRequest.open("GET","/myfile.jsp?"+ params, true);