Ajax와 XHR

Ajax와 XHR

Ajax

Asynchronous Javascript and XML

비동기적으로 자바스크립트를 이용해서 서버와 브라우저가 통신하는 방식

비동기적: 데이터를 가져오는동안 시간이 오래걸린다 하더라도, 다른 동작을 실행할수 있다. 동기적이라면 그 시간동안 아무런 일도 하지 못하고 기다리고 있어야한다.

자바스크립트에서는 Ajax 통신을 위해 XMLHttpRequest 객체를 사용한다.

XHR은 XMLHttpRequestion의 약자

AJAX의 주요 두가지 특징

1. 페이지 새로고침 없이 서버에 요청
2. 서버로부터 데이터를 받고 작업을 수행
   
   

Ajax와 XHR 방식의 요청과 응답

HTML 페이지에서 댓글을 추가하면 현재 HTML페이지는 그대로 유지한다.

서버에서 응답으로 보내는 데이터가 HTML이 아닌 XML또는 JSON이다.

클라이언트 HTML에서는 응답으로 받은 XML또는 JSON을 활용해 HTML을 생성한다.

XHR

XMLHttpRequest (XML보다는 JSON을 더 많이 사용함)

Ajax방식으로 서버와 브라우저가 데이터를 주고받을때 사용하는 API이다.

자바스크립트는 XMLHttpRequest 객체를 사용하여 서버와 통신하고 데이터를 교환한다.

var xhr = new XMLHTtpRequest();
xhr.open('GET', './time.php');
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4 && xhr.status === 200){
        document.querySelector('#time').innerHTML = xhr.responseText;
    }
}
xhr.send();

위의 코드를 완전히 이해하지 못했지만 XMLHttpRequest 객체를 생성하고 xhr.open, xhr.send, xhr.status, xhr.response 등을 이용해서 서버와 통신하고 Ajax가 동작한다는 것을 알 수 있다.

Ajax 동작원리

1. 사용자에 의한 요청 이벤트 발생

2. 이벤트 핸들러에 의해 자바스크립트 호출

3. 자바스크립트는 XMLHttpRequest 객체를 이용하여 서버로 요청을 보낸다.

   이때, 웹 브라우저는 서버의 응답을 기다리지 않고, 다른 작업을 처리할 수 있다.(비동기성)

4. 서버는 전달받은 XMLHttpRequest 객체를 가지고, Ajax 요청을 처리한다.

5,6. 서버는 처리한 결과를 XML 혹은 JSON 형태의 데이터로 웹브라우저에 전달한다. 이때, 새로운 데이터를 전부 보내지 않고 필요한 데이터만 전달한다.

7. 서버로부터 전달받은 데이터를 가지고 웹페이지의 일부분만 갱신하는 자바스크립트를 호출한다.

8. 웹 페이지의 일부분만 다시 로딩되어 표시된다.
   
   

현재 qna 미션에서는 jQuery의 $.ajax() 메소드를 사용하고있다.

참고자료 : https://medium.com/sjk5766/ajax-%EC%99%80-xhr-5139f3710fb4

https://opentutorials.org/course/1375/6629

https://opentutorials.org/course/1375/6843

http://www.tcpschool.com/ajax/ajax_intro_works