AJAX

Asynchronous

JavaScript

And

XML

 

 

기본 개념은 웹 서버와 데이터를 교환하여 웹 페이지를 비동기식으로 업데이트할 수 있도록 하는 것.

즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있도록 하는 technique 이다.

 

이게 뭔소리냐 하면... 예를들어 investing.com에서 경제에 영향을 미칠만한 각종 포럼들의 schedule을 확인해보고 싶다고 하자. 그 페이지의 html을 받아오는 행위 (request) 를 사용자의 get 요청이라고 한다.

 

get 요청 방식에는 세가지가 있는데, 

1. url 직접 입력 하기

2. form tag (버튼 눌러서) 페이지 불러오기

3. ajax로 get 요청이 있다.

 

1, 2번의 문제는 새로고침이 실행되어 화면이 하얗게 변했다가 요청한 html을 불러온다는 것이다. 

그런데 3번은  화면 새로고침 없이 요청한 자료만을 불러오게 된다.. 설명하다보니 예시가 잘못 된 것을 깨달았다...

 

다시.

 

만약 내가 youtube에서 영상을 보다가 comment 확인을 하고 싶어 comment 버튼을 눌렀을 때, 유튜브 전체가 새로고침되는 것이 아니라 comment만 확인이 가능하다. 이것은 ajax 덕분인 것이다.

 

Ajax 활용 예시.

<script>
	fetch('response해줄 url') //fetch 기본함수를 이용해 해당 url로 get요청 날려준다.
    .then((response) => { //response 콜백 함수로 입력.
    	return response.json() // 요청한 데이터 리턴값으로.
     })  //결과 가져오기
	.then((결과) => { //parsing 한 결과 가져오기.
    	console.log(결과)
     })
</script>