JavaScript 27 AJAX : 비동기 요청

비동기 요청을 통해서 문서 자체는 필요한 정보를 호출한 뒤에 다른 작업을 수행할 수 있다.
.onreadystatechange 함수를 통해서 요청 상태의 변화에 따라서 필요한 작업을 수행할 수 있고 응답 데이터를 모두 받은 후에 수행해야 하기 때문에 해당 상황을 확인하는 분기문이 필요하다. 요청할 수 있는 방법은 GET과 POST 두가지 방식만 있다. 각 방식의 특징과 장단점은 추후에 살펴보기로 한다.

---

html

<script>
"use strict";
window.onload = function(){
var xhr = new XMLHttpRequest();
// onreadystatechange()는 요청 상태가 바뀔 때마다 호출된다.
xhr.onreadystatechange = function(){
  // 1 : 요청을 위한 주소를 준비 했다. (open() 호출 후)
  // 2 : 요청을 보냈다. (send() 호출 후)
  // 3 : 응답 데이터를 받고 있다. (결과 데이터 수신 중..)
  //     응답 받는 데이터의 양이 많을 경우 여러번 호출 될 수 있음.
  // 4 : 응답 데이터를 모두 받았다.
  if(xhr.readyState == 4){
 if(xhr.status == 200){ //서버에서 요청한 data를 정상적으로 찾아서 보내줄 때
   console.log('hello');
   var cont = document.getElementById('content');
   cont.innerHTML = xhr.responseText;
 }
  }
};
// 요청할 수 있는 메소드는 GET/POST 만 가능하다.
xhr.open('GET', 'j033_form2.html', true);
xhr.send();
//console.log(xhr.responseText);
};
</script>