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

전번에는 GET을 구현했습니다. 이번 시간에는 POST를 네티브자바스크립트로 구현하는 방법을 보여드립니다.

[code]

// jQuery

var newName = 'John Smith';

$.ajax('myservice/username?' + $.param({id: 'some-unique-id'}), {

    method: 'POST',

    data: {

        name: newName

    }

})

.then(

    function success(name) {

        if (name !== newName) {

            alert('Something went wrong.  Name is now ' + name);

        }

    },

    function fail(data, status) {

        alert('Request failed.  Returned status of ' + status);

    }

);

// Native XMLHttpRequest Object

var newName = 'John Smith',  xhr = new XMLHttpRequest();

xhr.open('POST', 'myservice/username?id=some-unique-id');

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.onload = function() {

    if (xhr.status === 200 && xhr.responseText !== newName) {

        alert('Something went wrong.  Name is now ' + xhr.responseText);

    }

    else if (xhr.status !== 200) {

        alert('Request failed.  Returned status of ' + xhr.status);

    }

};

xhr.send(encodeURI('name=' + newName));

[/code]