[ajax] 서버 응답 중 알게 된 속성

포트폴리오를 재정비 하던 중 기존엔 php include를 사용하여 간단하게 헤더와 푸터를 연결했었다.

하지만 퍼블리셔로서 html과 javascript를 사용하여 include하고 싶었다.

따라서 html include로 구글링을 하던 중에 아주 유용한 글을 발견하였다.

kyung-a.tistory.com/18

일반 HTML 파일에 HTML include/imports 하는 방법

이 분도 나와 같은 고민을 한것 같아서 공감이 갔고 시원한 결론까지 주셔서 너무 감사했다.

이 글을 읽으면서 ajax가 가진 속성들이 궁금했다. 

XMLHttpRequest, onreadystatechange, readyState 등...

제일 궁금했던 부분은 if문 안의 this.readyState ==4&&this.status ==200 이었다.

4와 200 숫자의 근거를 알고 싶어서 또다시 구글링을 하였다.

readyState는 document의 로딩 상태를 확인할 수 있는 속성이다.

상태는 loading, interactive, complete로 나눈다.

출처: developer.mozilla.org/ko/docs/Web/API/Document/readyState

이 상태는 0, 1, 2, 3, 4로 세분화될 수 있다.

status는 말 그대로 상태를 뜻하며 200, 403, 404로 나뉜다.

readyState 4와 status 200일때 응답 준비가 된 상태이다.

www.w3schools.com/js/js_ajax_http_response.asp

 

XMLHttpRequest란 모든 종류의 데이터를 받아오는데 쓰인다. 주로 ajax에서 많이 사용하는 "객체"이다.

developer.mozilla.org/ko/docs/Web/API/XMLHttpRequest

 

onreadystatechange란 readystate 상태가 변할때마다 실행하는 함수

 

html태그에 "data-"로 시작하는 속성을 추가하고 이를 javascript에서 접근하는 방법이 dataset 속성을 사용하는 것이다.

html

<div id="ID" data-index-num="1234">

var element = document.getElementById('ID');

element.dataset.indexNum;

jQuery에서는 $(element).data('indexNum');

 

내가 내린 결론으로는 html 자체로 include할 수 없지만, "data-" 속성을 이용하여 우회적으로 공통된 페이지를 연결 할 수 있는거 같다.