Ajax (Asynchronous JavaScript and XML)

• 비동기적 자바스크립트와 XML, 자바스크립트를 이용해서 비동기적으로
  서버와 브라우저가 데이터를 주고 받는 통식 방식을 의미한다.

비동기적이라 함은 브라우저가 서버랑 통신을 하면서 어떠한 작업을 실행시키고 다른 일을 할 수 있는 걸 의미한다.
반대로 동기적인 건 네트워크 지연이 발생하여 기다리는 것을 의미한다.

-Ajax는 웹브라우저와 웹서버가 내부적으로 데이터 통신을 할 수 있게 해준다.
그리고 변경된 결과를 웹페이지에 프로그래밍적으로 반영함으로써 웹페이지의 로딩
없이(비동기적으로) 서비스를 사용할 수 있게 한다.

XMLHttpRequest

• ajax 통신을 하기 위해서 사용하는 API(객체)이다.
  -XML만 을 사용해서 통신해야 하는 것은 아니다. JSON도 많이 사용한다.

XMLHttpRequest 객체를 생성하여 변수 xhr에 담는다.

• xhr을 통해서 XMLHttpRequest에 객체를 제어할 수 있다.

<script>
var xhr = new XMLHttpRequest();
</script>

.open('방식', 'URL')를 통해 접속하려는 대상과 방식을 지정해준다.

• 첫번째 인자는 form 태그의 method에 대응하는 것으로 GET/POST 방식을 주로 사용한다. 두번째 인자는 접속하고자 하는 서버쪽 리소스의 주소로 form 태그의 action에 해당한다.
  -서버랑 통신할 때의 방식 'GET'을 첫 번째 인자로,
  서버와 통신하는 서버쪽의 URL 소스를 두 번째 인자로 넣어준다.
  -./는 html파일과 같은 디렉토리라는 의미이다.

<script>
xhr.open('GET', './time.php');```
</script>

onreadystatechange 이벤트 핸들러를 호출한다.

• 서버와 통신하는 과정에서 내부적인 단계가 존재하는데 단계마다
  응답의 상태에 변화에 따라서 onreadystatechange 이벤트 핸들러를 호출한다.

<script>
xhr.onreadystatechange = function(){
</script>

readyState는 통신의 현재 상태를 알려준다

• readyState 속성은 HTTP 통신의 현재 상태를 알려준다. 4는 통신이 완료되었음을 의미한다.
• status 속성은 HTTP 통신의 결과를 의미한다.
  200은 통신이 성공했음을 의미한다
  -xhr 객체에 통신상태와 통신완료 값을 받아서 표시해준다.
  -responseText 속성은 서버에서 전송한 데이터를 담고 있다.

<script>
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        document.querySelector('#time').innerHTML =        
        xhr.responseText;
    }
}
</script>

send 메소드를 호출해준다.

ajax 객체가 해당 주소로 GET방식으로 통신을 시작한다.

<script>
xhr.send(); 
</script>