[JavaScript] JavaScript 와 Json 을 이용한 ajax 통신

 

1. jQuery를 이용한 경우 (예시)

$("#btn_normal").click(function () {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        data: {
            'idx': '14',
            'content': 'yeah'
        },
        url: 'getList/',
        success: function (data) {
            if (data) {
                // 응답 성공
                alert(data.name);
            }
        },
        error: function (req, status, error) {
            // 응답 실패
        }
    });
});

2. 순수 Javascript를 이용한 경우

var httpReq;

function makeRequest(url, data, response) {
    if (window.XMLHttpRequest) {
        // 최신 브라우저
        httpReq = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        // IE 버전별 지원
        try {
            httpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) { }
        }
        if (!httpReq) {
            // 지원하는 것 없음
            console.log('Cannot create an XMLHTTP instance!');
            return false;
        }
    }

    httpReq.onreadystatechange = response;
    httpReq.open('POST', url, true);  // open(method, url, async)
    httpReq.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    httpReq.send(data);
}

※2번을 활용한 예시

function getList() {
    makeRequest(baseUrl + "getList/", JSON.stringify({
        page: ""
    }), getListHandler);
}

function getListHandler() {
    if (httpReq.readyState === 4) {
        if (httpReq.status === 200) {
            // 응답 성공
            var res = JSON.parse(httpReq.responseText);
            for (var i = 0 in res) {
                console.log(res[i].name);
            }
        } else {
            // 응답 실패
        }
    }
}

※Ref.
 1) https://developer.mozilla.org/ko/docs/AJAX/Getting_Started
 2) http://ohgyun.com/247