Developer

Ajax

Chars4785 2019. 3. 12. 20:33

Ajax는


Ajax(Asynchronous JavaScript and XML, 에이잭스)는 비동기적인 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다.

  • 표현 정보를 위한 HTML (또는 XHTML) 과 CSS

  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트

  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다)

출처: 위키백과


기존 웹 애플리케이션은 브라우저에서 폼을 채우고 이를 제출을 하면 하나의 요청으로 웹 서버는 요청된 내용에 따라서 데이터를 가공하여 새로운 웹 페이지를 작성하고 응답으로 돌려줬다. 


>중복된 HTML 코드를 다시 한번 전송을 받음으로 대역폭을 낭비 


Ajax는 필요한 데이터만을 웹서버에 요청해서 받은 후 클라이언트에서 데이터에 대한 처리를 할 수 있다. 


그래서 자바스크립트를 사용한다. 


장점

  • 페이지 이동없이 고속으로 화면을 전환할 수 있다.
  • 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.
  • 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

단점

  • Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.
  • HTTP 클라이언트의 기능이 한정되어 있다.
  • 페이지 이동없는 통신으로 인한 보안상의 문제
  • 지원하는 Charset이 한정되어 있다.
  • 스크립트로 작성되므로 디버깅이 용이하지 않다.
  • 요청을 남발하면 역으로 서버 부하가 늘 수 있음.
  • 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.


아래는 GET을 사용하여 Ajax 요청을 하는 단순 예제이다.

get-ajax-data.js:

// 클라이언트-사이드 스크립트

// Ajax 요청을 초기화합니다
var xhr = new XMLHttpRequest();
xhr.open('get', 'send-ajax-data.php');

// 요청의 상태 변화를 추적합니다
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); // 요청 도중 에러 발생
	}
}



vue와 ajax 요청

vue에서 ajax 요청을 하는 방법은 여러가지가 있습니다. 순수 자바스크립트, jQuery를 사용하여 작업할 수도 있고, vue-resource와 axios도 있습니다. 이번에는 axios를 사용하는 방법을 소개 합니다.

왜 vue-resource를 사용하지 않나요?

vue-resource는 현재(2017년 1월) github에서 3600여개의 스타를 받은 성공적인 프로젝트 입니다. vue와 함께 잘 작동합니다. 하지만, 2016년 9월 이후 업데이트가 되지 않고 있습니다. 해결되지 않은 이슈가 무려 100여개가 넘습니다. 그리고 결정적으로 vue의 Evan You는 자신의 Medium에서 공식적으로 추천하는 프로젝트가 아니라고 말합니다. 자세한 내용은 이 글을 확인하세요.

axios를 사용하세요

axios는 현재 가장 성공적인 HTTP 클라이언트 라이브러리 중 하나입니다. 아직 1.x 버전이 릴리즈 되지 않았지만 스타가 1만개가 넘을 정도로 인기가 좋습니다. 특별히 언급할만한 부분은 요청 취소와 TypeScript를 사용할 수 있는 것 입니다. 이 글에서는 기본적인 vue와 axios의 사용 방법을 알아봅니다. axios의 github 프로젝트를 살펴보시면 더 많은 내용을 익힐 수 있을 것입니다.