jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET

많은 개발자들이 jQuery의 $.ajax()를 이용하여 서버에 요청을 보냅니다.

사실 $.ajax()는 자바스크립트가 제공하는 XMLHttpRequest 오브젝트를 둘러싼 래퍼일뿐입니다.

GET 요청에 대해 대비고찰 해본다면

[code]

$.ajax('myservice/username', {
    data: {
        id: 'some-unique-id'
    }
})
.then(
    function success(name) {
        alert('User\'s name is ' + name);
    },

    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);
[/code]
네티브 XMLHttpRequest 오브젝트

[code]
var xhr = new XMLHttpRequest();
xhr.open('GET', 'myservice/username?id=some-unique-id');
xhr.onload = function() {
    if (xhr.status === 200) {
        alert('User\'s name is ' + xhr.responseText);
    }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();

[/code]

위에서 보는 네티브 GET요청은 IE6,7버전을 모두 지원합니다. 즉

new XMLHttpRequest()

new ActiveXObject("MSXML2.XMLHTTP.3.0") 

이 오브젝트들을 이용하여 브라우저별, 버전별 비동기 GET요청을 구현하였습니다.

결구 jQuery $.ajax를 쓰지 않아도 네티브 자바스크립트로 얼마든지 GET요청을 구현하였습니다.