<aside> 💡 #ajax #fetch #request #response

</aside>

6.1 Ajax란?

개요

Asynchronous Javascript and XML의 약자로 비동기 통신을 간결한 문법으로 재구성한 라이브러리입니다. 페이지를 다시 로드할 필요 없이 동적으로 요청과 응답수신을 할 수 있어 HTML과 데이터를 분리할 수 있게 되었습니다.

작동 방식

Ajax는 새로운 기술이 아닙니다. 내부적으로 XMLHttpRequest 객체를 생성하여 XML 형식으로 페이지의 정보를 컴파일 합니다. 요청은 사용자가 정의한 HTTP 메서드의 형태로 전송이 되며, 응답이 도착할 때에 등록된 콜백함수가 호출이 되어 클라이언트의 상태를 변경할 수 있습니다.

일반 form을 이용한 문제

• 의도와 무관하게 바뀐 데이터를 위해 웹 페이지 전체를 다시 로드합니다.
• 사용자로 하여금 페이지의 깜빡거림을 느끼게 만듭니다.

장점

• 사용자 요청에 따른 일부 페이지만 업데이트 시킬 수 있어 부드러운 처리가 가능합니다.

예시

• 일반 form

  <form id="userDelete" method="post">
  	{% csrf_token %}
  	<input type="submit" value="계정 삭제하기" />
  </form>
  

• Ajax(fetch 사용)

  fetch("url", {
  	method: "DELETE",
  	headers: {
  		"Content-Type": "application/json",
  		"X-CSRFToken": getCookie("csrftoken")
  	}
  })
  	.then(res => res.json())
  	.then(data => {});
  

6.2 XML이란?

Extensible Markup Language(XML)로 데이터를 정의하는 규칙을 제공하는 마크업 언어입니다. 데이터를 저장하고 전송하는 데 자주 사용합니다. 텍스트 기반 형식이기 때문에 이미지, 동영상과 같은 바이너리 데이터 저장 에는 적합하지 않습니다. (JSON, HTML 함께 사용하는 경우가 많습니다.) XML 문서는 여러 시스템 간의 공유 가능한 방식으로 데이터를 정의 및 저장할 수 있습니다.

6.3 HTML과 XML의 차이