JS - Ajax 다루기

ajax 는 Asynchronous Javascript and XML의 약자로 비동기 자바스크립트와 XML 을 일컫습니다. 브라우저에서 새로고침 하지 않고도 ajax 를 통해 실시간으로 사용자에게 새로운 정보를 보여줄 수 있습니다.

메소드	설 명
XMLHttpRequest()	Ajax 를 초기화 백그라운드에서 서버와의 송신을 위해 사용
open(method, url, async)	서버에서 데이터를 전송하기 위한 메소드 method: GET | POST 중 하나 URL: 전송될 URL async: true | false 중 하나   true 이면 비동기 비동기 방식은 readyState 가 4가 될 때까지 계속 요청하는데, 이때 서버의 응답을 기다리는 동안 다른 작업을 진행할 수 있습니다.
setRequestHeader(header, value)	HTTP 헤더 값을 설정 header: 헤더의 이름 value: 헤더의 값
getResponseHeader(header)	특정한 헤더의 정보를 반환 header: 불러올 헤더 이름
getAllResponseHeaders()	모든 헤더 정보를 반환
send(data)	서버에 요청을 보낼 때 파라미터 값. 선택사항 data: POST 일 때 사용됨.

속 성	설 명
onreadystatechange	서버로부터 응답을 받을 때 실행할 함수를 정의
responseText	응답을 문자열로 반환 받음.
responseXML	응답을 XML 로 반환 받음.
readyState	요청 진행 상태 0: open() 이 호출되기 전 상태 1: open() 을 호출된 후 상태 2: 요청했을 때 응답헤더가 수신된 후 3: body 부분이 수신 중일 떼 4: 모든 응답이 완료되었을 떼
status	상태 응답 코드. 200 = "OK" 와 같음
statusText	상태를 텍스트로 반환 "Not Found" | "OK" 중 하나

기본적인 형식은 다음과 같습니다.

<script>
var req = new XMLHttpRequest();
req.open("GET", "", true);
req.send();
</script>

아래는 비동기 방식 GET 으로 요청을 보내는 방법입니다.

<p id="test"></p>

<script>
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
  // 요청 상태가 각각 4, 200 이면 결과 값을 처리합니다.
  if (this.readyState == 4 && this.status == 200) {
    if(this.statusText == "OK"){
      document.getElementById("test").innerHTML = this.responseText;
    }
  }
};
// 파라미터를 함께 보낼 때는 아래와 같이 보내세요.
req.open("GET", "test.php?name=habony&age=20&job=it", true);
req.send();
</script>

<!--
  test.php 내용
  <?php print_r($_GET);?>
-->

아래는 동기 방식 GET 으로 요청을 보냅니다.

<p id="test"></p>

<script>
var req = new XMLHttpRequest();
// 파라미터를 함께 보낼 때는 아래와 같이 보내세요.
req.open("GET", "test.php?name=habony&age=20&job=it", false);
req.send();

if(req.statusText == "OK"){
  document.getElementById("test").innerHTML = req.responseText;
}
</script>

<!--
  test.php 내용
  <?php print_r($_GET);?>
-->