Javascript ajax 기본

웹페이지에서 비동기식 페이지를 전환하지 않고 다른 데이터를 갖고 오는 기법을 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여기선 어쩌구"}
]

가 들어있다.

의견을 남겨주세용