Ajax

Ajax

Ajax는 Asynchronous JavaScript and XML의 약자로

자바스크립트로 서버와 비동기적으로 통신하면서 데이터를 주고받는 방식을 얘기한다

이름이 XML이라 XML데이터를 주고받아야 할 것 같지만 굳이 XML만을 사용하지 않아도 되고 요즘은 JSON을 주로 사용한다

이 Ajax는 XMLHttpRequest객체를 사용해서 서버와 통신하는데

1. 페이지를 새로고침하지 않고 서버에 요청
2. 데이터를 받고 작업을 수행

할수 있다

메소드

const request = new XMLHttpRequest();

우선 서버와 통신할 XMLHttpRequest 객체를 변수에 담아둔다

request.open('method','url',boolean);

open 메소드는 서버에 요청하는 메소드인데

첫번째 인자로 요청하는 방법 GET, POST, PUT... 등등 서버에서 지원하고 있는 메소드들을 대문자로 적어주고

두번째 인자에는 요청하는 서버의 url을

세번째 인자에는 이 요청을 동기식, 비동기식으로 설정해주는 boolean값이 들어간다

생략가능한 값인데 생략하게되면 기본값인 true로 들어가 비동기적인 통신을 한다

request.send();

위의 open메소드를 POST방식으로 요청했다면 데이터를 보낼 수 있는 메소드이다 (그렇지않다면 빈칸)

데이터는 종류에 상관없이 모든 데이터를 보낼 수 있다

request.setRequestHeader('header', 'value');

HTTP 요청 헤더의 값을 설정하는 메소드

setRequestHeader는 서버에 요청하고 난 후(open) 서버에 데이터를 보낸다면 그전(send) 그 사이에 설정해주어야 하는 값이다

request.onreadystatechange(function(){});

위의 open, send메소드로 서버에 요청이 끝났다면 실행되는 콜백 함수이다

서버에 응답을 받고 실행할 로직들을 이 함수 내에 작성하면 된다

requset.readyState

readyState는 메소드는 아니지만 서버에 요청하고 응답을 받은 뒤의 상태를 나타내는 상태코드를 가진 프로퍼티이다

0~5까지의 상태가 있으며 그 상태들의 설명은 모질라 사이트에 자세히 나와있다

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState

사용법

대충 굵직한 것은 다 알아보았으니 실제 사용 방법을 보자

    const request = new XMLHttpRequest();


    request.open('POST','index.html');
    request.send();

XMLHttpRequest객체를 받아 온 뒤에

index.html 주소에 GET방식으로 요청했다

    request.onreadystatechange = function () {
        if (request.readyState === XMLHttpRequest.DONE) {
            if (request.status === 200) {
                console.log(request.response);
            }
        }
    };

콜백 함수내부인데

XMLHttpRequest.DONE 프로퍼티는 상수로서 4를 가지고 있고

request.readyState의 상태가 4인지 확인하는 조건문

requset.status는 요청한 응답이 성공적인지 확인하는 조건문이다

자세한 코드들은 모질라 사이트에서 확인 https://developer.mozilla.org/ko/docs/Web/HTTP/Status

위의 두 조건문을 만족하고 request.response가 정상적으로 콘솔창에 출력되었다