Ajax

AJAX

Asynchronous Javascript And Xml
자바스크립트에 내장된 xmlhttprequest 객체를 이용해서
페이지를 새로고침하지 않고도 필요한 데이터를 비동기적으로 불러오는 기법을 의미한다.
데이터양을 줄이기위해 html그 자체를 불러오는게 아니라,
XML형식으로 백엔드의 데이터를 불러오는데 현재는 JSON 형식을 사용한다.

💡 AJAX 작동과정

1. 화면에 렌더링이 끝난 시점이다.
2. 사용자가 화면에서 어떤 버튼을 눌러 데이터를 추가요청한다. (이벤트 발생)
3. 이때, 추가 데이터를 가진 새로운 페이지를 요청하는것이 아닌, 데이터만 요청된다. (AJAX기법으로 JSON 데이터 불러옴)
4. DOM API로 JSON 데이터의 내용을 HTML로 추가한다.

💡 JSON

Javascript Object Notation
자바스크립트 객체를 표현하는 데이터 형식.
객체타입의 리터럴 선언과 비슷하다.

{
  "name": "인프런",
  "born": 2017,
  "classes": []
}

💡 httpRequest 객체의 프로퍼티

참고TCPSCHOOL

✏️ readyState

XMLHttpRequest 객체의 현재 상태를 의미한다.
객체의 현재 상태에 따라 5단계로 바뀌는데,

• 0: unset, XMLHttpRequest 객체가 생성된 상태.
• 1: opened, open() 메서드가 실행됨
• 2: headers_received, 모든 요청에 대한 응답이 도착
• 3: loading, 요청한 데이터 처리중
• 4: done, 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
  

✏️ status

서버의 문서 상태

• 200: 서버에 문서가 존재한다.
• 404: 서버에 문서가 존재하지 않다.

✏️ onreadystatechange

XMLHttpRequest 객체의 readyState 프로퍼티 값이 변할 때마다 자동으로 호출되는 함수를 설정한다.
이 함수는 서버에서 응답이 도착할 때까지 readyState 프로퍼티 값의 변화에 따라 총 5번 호출된다.
이 프로퍼티를 이용하면 서버에 요청한 데이터가 존재하고 응답이 도착하는 순간을 특정할 수 있다

💡 AJAX 예제

var httpRequest = newXMLHttpRequest(); //httprequest에 웹표준에서 제공하는 객체 지정

httpRequest.onreadystatechange = function () {
  //onreadystatechange는 AJAX상태 변화시 이벤트 감지,
  if (this.readyStatus == 4 && this.status == 200) {
    //readystatus가 4고, status가 200이라면
    document.getElementByid("panels").innerHTML = this.responseText; //응답문자열을innerhtml로 삽입
  }
};
httpRequest.open("GET", "/getJson", true); //요청방식
httpRequest.send(); //전송