AJAX

AJAX(Asynchronous Javascript And XML)는 비동기적 웹 사이트를 개발할 때 사용하는 기법입니다.

쉽게 말해 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다.

보통 AJAX 요청은 JQuery나 axios 같은 라이브러리를 이용해서 보냅니다. 브라우저에서 기본적으로 XMLHttpRequest 객체를 제공하긴 하지만, 사용 방법이 복잡하고 서버에서는 사용할 수 없습니다.

프론트엔드에서 사용하려면 HTML 파일을 하나 만들고 그 안에 script 태그를 추가해야 합니다.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	// 여기에 예제 코드를 넣으세요.
</script>

 

axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 됩니다.

axios.get('https://www.sally.com/api.get')
	.then((result) => {
		console.log(result);
		console.log(result.data); // {}
	})
	.catch((error) => {
		console.error(error);
	});

 

axios.get도 내부에 new Promise가 들어 있으므로 then과 catch를 사용할 수 있습니다. result.data에는 서버로부터 보낸 데이터가 들어 있습니다.

(async () => {
	try {
		const result = await axios.get('https://www.sally.com/api/get');
		console.log(result);
		console.log(result.data); // {}
 	} catch (error() {
		console.error(error);
	}
})();

 

이번에는 POST 방시으로 요청을 보내겠습니다. POST 요청에서는 데이터를 서버로 보낼 수 있습니다.

(async () => {
	try {
		const result = axios.post('https://www.sally.cpm/api/post/json', {
			name: 'sally',
			birth; 2000,
		});
		console.log(result);
		console.log(result.data); // {}
	} catch (error) {
		console.error(error);
	}
})();

 

전체적인 구조는 비슷한데 두 번째 인수로 데이터를 넣어 보내는 것이 다릅니다. GET 요청이면 axios.get을, POST 요청이면 axios.post를 사용합니다.