[Ajax] 비동기식 처리 모델

1. Ajax란

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미합니다.

서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 주는 것이 Ajax입니다.

Ajax는 페이지 전체를 로드하여 렌더링하지 않아도 일부만 로드하면 부드러운 화면 표시가 가능합니다.

비동기식 처리 모델은 작업을 병렬적으로 수행합니다.

수행중인 작업이 종료되지 않았어도 다음작업이 대기하지 않고 실행할 수 있습니다.

서버에서 데이터를 가져와 화면에 표시하는 작업을 수행하는 경우 서버에 데이터를 요청한 후 서버로부터 데이터가 전달될 때까지 대기하지 않고 다음 작업을 수행합니다.

이 후 서버로부터 데이터가 오면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 작업을 계속해서 수행합니다.

 

2. Ajax 요청 및 응답 처리

브라우저는 XMLHttpRequest 인스턴스를 이용하여 Ajax 요청을 생성합니다. 서버가 브라우저의 요청에 대해 응답을 주면 XMLHttpRequest 인스턴스가 결과를 처리합니다.

var searchRequest= new XMLHttpRequest();     //XMLHttpRequest 인스턴스 생성
searchRequest.onreadystatechange =searchProcess;    //어떠한 이벤트(변화)가 나타났을 때 searchProcess라는 함수를 호출함 

XMLHttpRequest 인스턴스를 생성하고 searchRequest라는 인스턴스가 onreadystatechange라는 메소드로 요청을 서버에 전달합니다.

 즉, XMLHttpRequest.onreadystatechange는 XMLHttpRequest.readyState 프로퍼티가 변경될 때마다 호출되는 이벤트핸들러입니다.

XMLHttpRequest 객체는 response가 클라이언트에 도달했는지를 추적할 수 있는 프로퍼티를 제공합니다.

이 프로퍼티가 XMLHttpRequest.readystate인데 이 값이 4일 경우 정상적으로 Response가 돌아온 경우입니다.

readXMLHttpRequest.readyState의 값은 아래와 같습니다.

Value	State	Description
0	UNSENT	XMLHttpRequest.open() 메소드 호출 이전
1	OPENED	XMLHttpRequest.open() 메소드 호출 완료
2	HEADERS_RECEIVED	XMLHttpRequest.send() 메소드 호출 완료
3	LOADING	서버 응답 중(XMLHttpRequest.responseText 미완성 상태)
4	DONE	서버 응답 완료

XMLHttpRequest 의 readyState가 4인 경우, 서버 응답이 완료된 상태입니다.

이 후 XMLHttpRequest가 200이면XMLHttpRequest.responseText를 취득합니다.

XMLHttpRequest.responseText에는 서버가 전송된 데이터가 담겨있습니다.

 

3. JSP에서 Ajax 구현

JSP에서 Ajax를 구현하여 회원정보를 나타내고 검색창에 이름의 일부만 검색해도 즉각적으로 검색어가 포함된 회원을 바로 보여주는 기능을 구현한 것 중 일부 ajax 기능을 살펴보겠습니다.

일단 DB와의 연동도 필요하고 java클래스와 jsp파일이 필요한데 DB연동은 이 전 포스팅에 설명되어있고 다른 java클래스는 잠시 건너뛰고 ajax위주로 설명하겠습니다.

var searchRequest= new XMLHttpRequest(); 
var registerRequest= new XMLHttpRequest();
 
function searchFunction(){
    searchRequest.open("Post","./UserSearchServlet?userName="+ encodeURIComponent(document.getElementById("userName").value),true);
    searchRequest.onreadystatechange =searchProcess;
    searchRequest.send(null);
}
function searchProcess(){
    var table = document.getElementById("ajaxTable");
    table.innerHTML ="";
    if(searchRequest.readyState == 4 && searchRequest.status == 200){
        var object = eval('('+searchRequest.responseText+')');
        var result = object.result;
        for(var i=0; i<result.length; i++){
            var row = table.insertRow(0);
            for(var j=0; j<result[i].length; j++){
                var cell = row.insertCell(j);
                cell.innerHTML=result[i][j].value;
            }
        }
    }
}

jsp 파일의 script부분의 일부입니다.

일단 XMLHttpRequest 인스턴스를 생성합니다.

그리고 open()과 send()를 사용하여 요청을 할 수 있습니다.

-open() 메소드 : 첫번째에 들어가는 파라미터는 HTTP 요구 방식으로 GET, POST, HEAD 중 하나이거나 서버에서 지원하는 다른 방식입니다.두번째파라미터는 요구하고자하는 URL입니다.  세번째 파라미터는 요구가 비동기식으로 수행될 지를 결정합니다. true이면 비동기적으로 false이면 동기적으로 작동합니다.

-send() 메소드 : POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 서버에서 쉽게 parse할 수 있는 형식이여야 합니다. 

이벤트가 발생하면 searchProcess라는 함수를 호출합니다.

table이라는 변수는 html에 있는 ajaxTable을 가져와서 그 위에 데이터를 보여주게 합니다. 

readyState가 4이면 서버응답완료 상태이고 status가 200이면 정상적으로 처리되었다는 것이기때문에 아래의 코드를 실행시킵니다. 

이 후에 화면에 result로 데이터를 받아와서 화면에 보여주게 됩니다.

이렇게 간단하게 Ajax에 대해 알아보고 구현방법에 대해서 살펴보았습니다.