[JavaScript] 자바스크립트로 Ajax 구현

jQuery를 통하여 Ajax를 구현하는 방식을 사용했었다.

 

이번 Nodejs를 공부하면서 jQuery를 사용하지 않고 순수 자바스크립트로만으로 Ajax 기능을 구현해보았다.

 

예제

//조회
document.querySelector('#searchBtn').addEventListener('click',function(){
    var data = document.forms[0].elements[0].value;
    sendData('http://localhost:3333/search',data);
});

    function sendData(url,data){
        var result = {
            'search': data
        }
        result = JSON.stringify(result);

        var xhr = new XMLHttpRequest();

        xhr.open('POST',url);
        xhr.setRequestHeader('Content-Type','application/json');
        xhr.send(result);

        xhr.addEventListener('load',function () {
            var resultData = JSON.parse(xhr.responseText);

            if(resultData.result === 'success'){
                document.querySelector('#result').innerHTML = resultData.email;
            } else {
                document.querySelector('#result').innerHTML = '존재하지 않은 이메일입니다.';
            }

        });
    }

Ajax를 사용해보기 위한 예제 코드이다.

 

자바스크립트에서 Ajax를 구현하기 위해서는 먼저 XMLHttpRequest 를 사용해야한다.

 

이 부분 말고는 다른 코드는 jQuery를 사용했을때 비슷한 느낌이다.

 

 

---