[JavaScript] Ajax 옛날방식과 요즘방식

1. 옛날방식

<script>

	var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function() {
    	if(this.readyState == 4 && this.status == 200) {
        	console.log(ajax.responseText)
        }
    };
    ajax.open("GET", "https://www.naver.com/*.json", true);
    ajax.send();

</script>

* XMLHttpRequest

 

2. 요즘JS방식

fetch('https://www.naver.com/*.json')
    .then((response) => {
        if(!response.ok) {
            throw new Error('400 or 500');
        }
        return response.json();
    })
    .then((결과) => {
        console.log(결과);
    })
    .catch(() => {
        console.log('에러');
    })

* fetch

 

위와 같이 then함수 붙는 건 지져분해서 싫다고 할때는 아래와 같이

async function getDataFun() {
    var response = await fetch('https://www.naver.com');
    if(!response.ok) {
        throw new Error('400 or 500');
    }
    var result = await response.json();
    console.log(result);
}

getDataFun.catch(() => {
    console.log(Error);
});

* awync

 

3. 외부라이브러리 방식

 - jQuery : $.ajax()

 - React, Vue : axios라는 라이브러리를 설치해서 많이 씀

<script src="https//cdnjs.cloudflare.com/ajax/lib/axios/0.24.0/axios.min.js"></scirpt>

axios.get('https://www.naver.com/*.json)
    .then((result) => {
        console.log(result.data);
    })
    .catch(() => {
        console.log('Error');
    });

* axios

 

 

4. CORS 관련 에러

 - 보안에러 관련 이슈인데, 그래도 굳이 쓰고싶다 할 경우

  1) 헤더에 Access-Control-Allow-Origin : "*" 추가

  2) Node.JS Server

var cors = require('cors)
app.use(cors());