AJAX 란? (feat. 필요한 부분만 데려올거야)

위의 무신사 페이지처럼 웹 페이지의 일부분만 바꾸고 싶가면 어떻게 해야할까? 

그럴때 AJAX 를 사용한다

 

 

 

 

1. AJAX란?

AJAX는 웹페이지의 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것입니다

구글을 열어보자. 구글에서 딱 한부분 만큼은 html 에 작성된대로 유저가 사용하는 것이 아니라, 유저의 요구에 따라 반응하며 변화하는 부분이 존재한다.

그 부분이 바로 검색창이다. 검색창에 한 글자를 입력할때마다 , 해당글자로 시작하는 단어들은 서버로부터 받아와, 아래 추천 검색어로 보여주게 된다. 다시말해, 검색창에 필요한 데이터만 비 동기적으로 받아와 렌더링 되며,여기에 ajax 가 사용된다.

 

또다른 예시로는 원티드가 있다

원티드에 들어가보면 사용자가 맨 밑까지 스크롤하더라도, 계속해서 새로운 채용정보가 뜬다. 이러한 이벤트를 무한 스크롤이라고 하는데, 무한스크롤이 발생할때마다 Fetch를 통해 데이터를 가져와서 업데이트하고 렌더링한다

 

이 뿐만아니라, 페메나 네이버의 뉴스탭 역시 비동기적으로 데이터를 서버에서 받아와 브라우저에 렌더링 하는 것이며, 그 기법을 AJAX 라고 한다.

 

 

2.AJAX 의 두가지 기술

Fetch와 XHR이 있다

Fetch는 XHR의 단점을 보완한 새로운 web api 이며, 오늘날은 Fetch를 더 많이 쓴다

 

Fetch 예제

fetch('http://52.78.213.9:3000/messages')
  .then(function(response){
   return response.json();
  })
  .then(function(json){
    ...
  });

 

XHR 예제

// XMLHttpRequest를 사용
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');

xhr.onreadystatechange = function(){
	if(xhr.readyState !== 4) return;
	// readyState 4: 완료

	if(xhr.status === 200) {
        // status 200: 성공
		console.log(xhr.responseText); // 서버로부터 온 응답
	} else {
		console.log('에러: ' + xhr.status); // 요청 도중 에러 발생
	}
}

xhr.send(); // 요청 전송

 

 

3.AJAX 의 장단점

장점

• 서버에서 html을 완성해서 보내주지 않아도 웹페이지를 만들수 있음
• 표준화된 방법
• 유저중심의 어플케이션 개발
• 더 작은 대역폭(데이터)

 

단점

• 검색엔진최적화(SEO)에 불리

AJAX 방식의 웹 어플리케이션은 한 번 받은 html을 렌더링한후, 서버에서 비동기적으로 필요한 데이터를 가져와 그려냅니다

따라서, 처음받는 html 파일에는 데이터를 채우기 위한 틀만 작성되어 있는 경우가 많습니다. 따라서 뼈대만 있고 데이터는 없기 때문에 사이트 정보를 긁어가기 어려움

• 뒤로가기 버튼 문제

일반적으로 사용자는 뒤로가기 버튼을 누르면, 이전 상태로 돌아갈 것이라고 생각하지만, AJAX에서는 이전 상태를 기억하지 않기 때문에, 사용자가 의도한 대로 동작하지 않습니다. 따라서 뒤로가기 등의 기능을 구현하려면 따로 History API 를 사용해야 함