[TIL] Ajax

0. 들어가기에 앞서...

1. 서버 :

유저가 데이터를 요구하면
데이터를 보내주는 프로그램
예) 유저가 유투브 서버한테 영상을 보내달라고 요청하면 유투브 서버는 영상을 보내줌

2. 서버한테 데이터 요구하는 방법

(1) 원하는 데이터가 있는 정해진 URL를 알기

(2) 해당 URL로 GET 요청하기

3. GET 요청하는 법

(1) 브라우저 창에 URL입력하기

(2) 버튼으로 GET요청

=> 단, 이 방법은 브라우저가 새로고침됨

<form action"URL" method="get">
	...
	<button>제출</button>
</form>

(3) AJAX로 GET요청

=> 새로고침없이 데이터 받아옴

1. AJAX :

Asynchronous Javascript And XML
서버하고 비동기적으로
데이터를 주고받는
자바스크립트 기술

≒ 새로고침없이 서버와 데이터를 주고받는 JS코드

2. AJAX으로 요청하는 방법

2-1. 옛날 JS방식

var ajax = new XMLHttpRequest();
ajax.onreadystateChange = function(){
	if (this.readyState == 4 && this.status == 200) {
    	console.log(ajax.responseText);
    }
};
ajax.open("GET", URL, true);
ajax.send();

2-2. 요즘 JS방식 - fetch

fetch(URL)
.then(response => {
	if (!response.ok) throw new Error('400 또는 500에러')
    return response.json()
})
.then(data => 결과처리)
.catch(error => 오류처리)

2-3. 요즘 JS방식 - async/await

async function getData() {
	const response = await fetch(URL);
    
    if (!response.ok) throw new Error('400 또는 500에러')
    
    data = await response.json();
}

2-4. 외부 라이브러리 방식 - axios, jquery ajax ...

axios.get(URL)
.then(data => 결과처리)
.catch(error => 오류처리)

3. 참고 :

Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)