AJAX란 무엇인가?

자바스크립트가 발전하면서, 정적인 웹사이트에서 동적인 웹사이트로 동시에 발전하기 시작했다.
그러면서 페이지안의 내용이 변경될 때, 페이지 전체가 리로드 되는 것이 아닌 변경할 부분만 부분적으로 변경되게 하고 싶어졌고 이를 가능하게 하는것이 AJAX다.

❓ AJAX란 ❓

• AJAX(Asynchronous Javascript And XML)는 서버와 비동기적으로 데이터를 통신하는 기법이다.
• 화면이 새로고침 없이 서버에게 get요청을 날려 데이터를 가져올 수 있게 하는 JS코드이다. (ex 페이스북이나 인스타그램 같은 사이트들이 대부분 AJAX 요청을 통해 비동기적으로 통신하는 것임)

❗️AJAX 가 없이 브라우저 내에서 XMLHttpRequest 객체를 사용해서 서버와 통신을 할수있지만, 사용방법이 복잡하고 서버에서는 사용할 수가 없다. (요즘엔 사용하지 않는다)

//XMLHttpRequest 를 통한 통신

var ajax = new XMLHttpRequest();

ajax.onreadystatechange = function (){
    if (this.readyState == 4 && this.status == 200){
        console.log(ajax.responseText)
    }
};
ajax.open('GET', "https://~~~~~/data.json", true); //get 요청을 할 url
ajax.send();

❗️ 그래서 보통 AJAX 요청은 JQuery안에 내장되어있는 ajax함수나 axios 같은 외부 라이브러리를 이용한다 ❗️

// axios를 이용한 데이터 요청

<script>
axios.get("https://~~~~~/data.json")
.then((result) => {
    console.log(result.data)
}) .catch(() => {
    console.log('에러')
})
</script>

코드가 훨 간결해졌다!