웹페이지에서 비동기식 페이지를 전환하지 않고 다른 데이터를 갖고 오는 기법을 Ajax 라고 한다. 일반적으로 웹 페이지에서 다른 데이터를 수신하려면 깜빡이면서 다른 페이지로 전환을 해야되는데 AJAX 를 이용하면 부드럽게 같은페이지에서 움직임이 일어난다.
AJAX 기본 지식
객체 생성
Ajax 를 하가 위해 XMLHttpRequest 생성자를 통해 객체를 생성한다
var req = new XMLHttpRequest();
통신방식
통신방식을 설정한다.
req.open("GET","URL");
전송
req.send();
readyState 속성
객체가 통신단계를 나타내주는 속성 0~4까지 있다.
0 – open 메소드 호출 전
1 – open 메소드 호출~ send 메소드 호출 사이
2 – 보낸 요청에 대한 응답 헤더가 수신된 직후
3 – 응답의 바디부분이 수신중
4 – 수신완료
onreadystatechange 속성
readystate 가 변할때바다 호출되는 콜백함수다.
req.onreadystatechange = function(){~~~~}
이런 식으로 호출하면 readystate 상황이 변할때마다 원하는 기능을 불러올 수 있다.
status 속성
HTTP response의 응답 헤더에 기록된 코드(통신상태)
예제 1.
위의것들을 이용해서 아래와 같은 AJAX 통신을 할 수 있다.
var req = new XMLHttpRequest(); //객체 만들고
//통신단계마다 onreadystatechange 를 통해 체크한다
req.onreadystatechange = function(){
console.log(this.readyState,this.status);
if(this.readyState ===4 && this.status === 200){
console.log(this.response);
}
};
req.open("GET","./data.txt");
req.send();
EX2
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var req = new XMLHttpRequest();
req.onreadystatechange = function a(){
console.log(this.readyState);
if(this.readyState ==4 ){
console.log(this.response);
var data = JSON.parse(this.response);
for(var i in data){
var t = document.getElementById("templete").cloneNode(true);
t.removeAttribute("id");
t.children[0].innerText = data[i].id;
t.children[1].innerText = data[i].msg;
document.body.appendChild(t);
}
}
}
req.open("GET","./data.txt");
req.send();
</script>
</head>
<body>
<p id="templete" >
<span class="character">주인공</span> : <span class="word">명대사</span>
</p>
</body>
data.txt 파일에는 객체들이 들어있는 배열데이터가 있다.
for in 문을 통해서 하나하나 꺼내서 붙여준다.
[
{"id":"마틸다","msg":"1여기선 어쩌구"},
{"id":"레옹","msg":"2여기선 어쩌구"},
{"id":"우주","msg":"3여기선 어쩌구"},
{"id":"원령공주","msg":"4여기선 어쩌구"},
{"id":"공각기동대","msg":"5여기선 어쩌구"},
{"id":"살인의추억","msg":"6여기선 어쩌구"},
{"id":"제시","msg":"7여기선 어쩌구"},
{"id":"은호","msg":"8여기선 어쩌구"}
]
가 들어있다.