학습정리 : Ajax에 대해서 (코딩애플 유튜브)

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

코딩애플

https://www.youtube.com/watch?v=nKD1atl6cAw&t=154s

Ajax는 서버와 비동기적으로 데이터를 주고 받는 자바스크립트 기술이다.

 

서버는 데이터를 요구하면 데이터를 보내주는 프로그램이다. 

원하는 데이터의 url로 get 요청을 보내면 필요한 데이터를 제공한다.

 

이때의 요청 방법은 url을 직접 입력하여 GET 요청을 하는 방법이 있고

버튼을 클릭하여 GET 요청을 하는 방법이 있다.

 

 

자 그런데 문제는 url 요청을 하면 브라우저가 매번 새로고침이 된다.

 

그래서 Ajax를 통해 url로 GET 요청을 하는 방법이 있다.

Ajax는 새로고침 없이 서버에게 GET 요청을 하는 JS코드이다.

 

 

해당 Ajax 코드는 이번에 학원에서 진행했던 미술관 경매 프로젝트에서 충전 기능에 사용했던 경험이 있다.

제이쿼리를 사용하여 $.ajax() 방식으로 PointController에 POST 요청을 통해서 

JSON 데이터로 해당 물품의 가격정보와 사용자의 현재 포인트 정보를 파싱하여

SQL쿼리로 포인트 차감 및 물품 정보를 변동하였었다.

 

클라이언트에서 서버로 정보를 전달(POST)하고 서버에서는SQL로직을 처리하고

결과 정보를 HTTP 응답을 맵에 담아서 처리했다.