Ajax 핵심단계 파헤치기

Ajax 기본 핵심단계

Ajax의 시작은 항상 XMLHttpRequest 객체를 생성하는 것부터 시작합니다.

다음은 앞선 포스팅에서 살펴본 XMLHttpRequest 객체 생성방법을 다른 방법으로 작성한 코드입니다.

/**
 * -----------------------------------------
 * 브라우저에 따른 XMLHttpRequest 생성하기
 * -----------------------------------------
 */
window.onload=function(){
    var xmlHttp = HTTP.createXMLHTTPObject();
};

var HTTP = {};

// 브라우저에 따른 XMLHttpRequest 객체 생성 함수인 팩토리 함수를 만들어 배열에 저장

HTTP._factories = [
    function(){ return new XMLHttpRequest() }, // 표준 생성방법
    function(){ return new ActiveObject("Msxml12.XMLHTTP") },    // 익스플로러
    function(){ return new ActiveXObject("Msxml13.XMLHTTP") },   // 
    function(){ return new ActiveXObject("Miscrosoft.XMLHTTP") }
];

// 실제 XMLHttpRequest 객체를 생성하는 함수
HTTP.createXMLHTTPObject = function() {
    var xmlHTTP = null;

    // 배열 정보를 하나씩 꺼내어 실행해 현재 브라우저에서 생성하는 방법으로
    // XMLHttpRequest 객체를 생성합니다.
    for(var i = 0; i < HTTP._factories.length;i++) {
        try {
            xmlHTTP = HTTP._factories[i]();
        }
        catch(e) {
            // XMLHttpRequest 객체를 생성할 수 없다면 catch 영영으로 진입하고,
            // 이때 continue 문이 실행되면서 for 문이 계속 실행
            continue;
        }
        // 성공하는 경우라면 break 문이 실행되어 for 문이 멈춥니다.
        break;
    }

    return xmlHTTP;
}

Ajax 작업을 위한 개발 환경 설정하기

Ajax 를 이용한 클라이언트와 서버 간의 데이터 연동을 위한 일반적인 작업 순서를 살펴보겠습니다.

var xmlHttp;

window.onload = function() {
    // 1. 브라우저에 따른 XMLHttpRequest 생성하기.
    xmlHttp = createXMLHTTPObject();

    // 2. 요청에 대한 응답처리 이벤트 리스너 등록.
    xmlHttp.onreadystatechange = on_ReadyStateChange;

    // 3. 서버로 보낼 데이터 생성.
    var data   = "key1=value1&key2=value2";

    /**
     * ----------------------------------------------------------
     * 4. 클라이언트  <-> 서버간의 연결 요청 준비(open()메소드이용)
     * 4-1. 서버로 보낼 데이터 전송 방식 설정(GET, POST중 선택)
     * 4-2. 서버 응답 방식 설정(동기, 비동기 중 선택)
     * ----------------------------------------------------------
     */

        // 5. 실제 데이터 전송(send())

        // T. 동기/비동기 실행 테스트를 위한 부분
    alert("전송 시작!");
};

// 1. 브라우저에 따른 XMLHttpRequest 생성하기
function createXMLHTTPObject() {
    var  xhr = null;
    if (window.XMLHttpRequest) {
        // IE7버전 이상, 크롬, 사파리, 크롬, 오페라등 거의 대부분의 브라우저에서는 XMLHttpRequest 객체를 제공
        xhr = new XMLHttpRequest();
    }
    else {
        // IE6, IE5 버전에서는 아래와 같이 XMLHttpRequest 객체를 생성해야 함
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xhr;
}

// 6. 응답처리.
function on_ReadyStateChange() {
    // 4=데이터 전송 완료
    // (0 = 초기화전, 1 = 로딩중, 2 = 로딩됨, 3 = 대화상태)
    if(xmlHttp.readyState == 4) {
        //200 은 에러 없음 ( 404 = 페이지가 존재하지 않음 )
        if(xmlHttp.status == 200) {
            // 7.  이제 이부분에서 서버에서 보내오는 데이터 타입(XML, JSON, CSV)에 따라 사용하
            // 코드 작성
        }
        else{
            alert("처리 중 에러가 발생했습니다.");
        }
    }
}

좀더 자세히 살펴보면 위 코드 주석중 4, 5번에 해당되는 부분은 다음의 네가지 유형으로 구성됩니다.

1. 데이터 처리 GET, 동기 방식

xmlHttp.open('GET', 'file.jsp?'+ data, false);

xmlHttp.send(null);

2. 데이터 처리 GET, 비동기 방식

xmlHttp.open('GET', 'file.jsp?'+ data, true);

xmlHttp.send(null);

3. 데이터 처리 POST, 동기 방식

xmlHttp.open('POST', 'file.jsp', false);

xmlHttp.send(data);

4. 데이터 처리 POST, 비동기 방식

xmlHttp.open('POST', 'file.jsp', true);

xmlHttp.send(data);

그리고 7번 주석에 해당되는 부분도 다음과 같은 유형으로 구성됩니다.

1. CSV, JSON 인 경우는 responseText 프로퍼티를 사용

2. XML 인 경우는 reponseXML 프로퍼티를 사용

GET 방식으로 데이터를 전송, 서버에서 비동기식으로 JSON 타입의 데이터 응답 처리하기 (외부 JSON 파일 로드하기)

예제 코드 알아보기

loadJson.html 파일

var xmlHttp;

window.onload = function(){
    xmlHttp = createXMLHTTPObject();

    // 2. 요청에 대한 응답처리 이벤트 리스너 등록.
    xmlHttp.onreadystatechange = on_ReadyStateChange;

    // 3.서버로 보낼 데이터 생성.

    // 4. GET 방식으로 데이터 보내기
    // 응답은 비동기로 클라이언트 <==> 서버간의 연결 요청준비.
    xmlHttp.open("GET", "menu.json", true);

    // 5. 실제 데이터 전송.
    xmlHttp.send(null);

    // T. 동기/비동기 실행 테스트를 위한 부분
    alert("전송 시작!");
};

// 1. 브라우저에 따른 XMLHttpRequest 생성
function createXMLHTTPObject(){
    var    xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    return xhr;
}

// 6. 응답처리
function on_ReadyStateChange(){

    if(xmlHttp.readyState==4){

        if(xmlHttp.status==200){
            // 서버에서 받은 값
            console.log("서버에서 받은 원본 데이터 : " + xmlHttp.responseText);

            // 7. 데이터 파싱처리
            parseData(xmlHttp.responseText);
        }
        else
        {
            alert("처리중 에러가 발생했습니다.");
        }
    }
}


// 7. JSON 타입의 데이터 처리
function parseData(strInfo){
    var menuItems = eval("(" + strInfo + ")").menuItems;

    console.log("메뉴 아이템 갯수는?  "+menuItems.length);
}

menu.json 파일

{ "menuItems" : [
    "images/menu_1.png",
    "images/menu_2.png",
    "images/menu_3.png",
    "images/menu_4.png",
    "images/menu_5.png"
    ]
}

Jaehee's e-room