Ajax 와 XmlHttpRequest

1. Ajax 의 사전적 의미

Ajax = Asynchromous Java And Xml
비동기식 자바스크립트와 xml 이라는 뜻이다.

 

2. Ajax 란 무엇일까?

Ajax 는 프로그램 언어는 아니다. JavaScript 의 라이브러리 중 하나이며,
브라우저가 가지고 있는 XMLHttpRequest 객체를 이용하여 페이지를 새로고침 하지 않고, 페이지의 일부만을 위한 데이터를 로드하는 기법이다.

JavaScript 를 사용한 비동기적 정보 교환 기법으로, 클라이언트와 서버간에 Xml 등 데이터를 주고받는 기술이다.

이름에 XML 이 들어가지만, 데이터를 일반 텍스트 또는 JSON 으로 전송하는 것이 일반적이다.

Ajax 는 : 
브라우저에 내장된 XMLHttpRequest 객체를 사용하여 웹서버에서 데이터를 요청하고,
JavaScript 와 HTML DOM 을 이용해 받아온 데이터를 보여주거나 이용한다.

 

3. Ajax 를 사용하는 이유

• 웹페이지가 로드된 후에도 웹서버에서 데이터를 읽기 위해
• 페이지를 다시 로드하지 않고 웹페이지를 업데이트하기 위해
• 백그라운드에서 웹서버로 데이터를 보내기 위해

Ajax 의 이름에 들어가는 "Aynchromous (비동기)" 가 핵심이다.

비동기를 이해하기 위해서는 HTTP 프로토콜의 "connectionless" 라는 특징을 이해해야 한다.

기본적으로 HTTP 프로토콜은 "connectionless" 라는 특징을 갖고 있다.

"connectionless" 란, 클라이언트가 request 를 서버에 보내면, 서버는 클라이언트에게 요청에 맞는 response 를 보내고 그 연결을 끊어버리는 것이다. 그래서 HTTP 프로토콜에서는 화면을 갱신하기 위해 request 를 다시 서버에 보내고, reponse 를 받아 페이지 전체를 갱신하게 되어있다.

즉, 페이지를 리로드하기 위해 웹페이지의 리소스를 전부 다시 불러와야 한다는 것이다.
예를 들어서, 쇼핑몰 사이트를 만든다고 생각해보자.
쇼핑몰 사이트에서 사용자가 클릭한 상품의 정보를 홈페이지 상단에 보여주려고 한다. 비동기적인 방식을 사용하지 않으면, 상품을 클릭할 때마다 웹페이지의 모든 리소스 중에서 상단의 상품정보만 바뀌는 것이지만, 웹페이지를 구성하는 모든 리소스를 다시 불러오게 된다.

이러한 방식은 엄청난 자원낭비와 시간낭비를 초래한다

그러나, 비동기 방식을 이용하면, 웹페이지를 리로드하지 않고 데이터를 불러올 수 있다.

Ajax 는 html 페이지 전체가 아닌 일부분만 갱신할 수 있도록 Xml HttpRequest 객체를 통해 서버에 request 를 한다. 이 경우, Json 이나 xml 형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.

 

4. Ajax 를 사용하는 방법

JavaScript 만으로 Ajax 를 할 수는 있지만, 코딩량이 많아지고 브라우저별로 구현방법이 다르다는 단점이 있다.

jquery 를 사용하면 코딩량도 적어지고 같은 코드로 대부분의 브라우저에서 같은 동작을 할 수 있게 한다.

아래는 vanilla JavaScript 로 Ajax 를 하는 예제이다.

var xhr = new XMLHttpRequest();
xhr.open('http method', url, true);
xhr.onload = function () {

        if (this.readyState === 4 && this.status == 200) {
        // status 는 HTTP 통신의 결과를 의미
        // 200 은 통신이 성공했다는 뜻
        document.getElementById("result").innerHTML = this.responseText;

        } else {
            alert("ERROR LOADING FILE!"+this.status);
        }
};
    
xhr.send();

먼저, XMLHttpRequest 객체를 생성해주고, 
open 메서드를 이용하여
GET/POST 둘 중 어떤 메서드로 요청할 것인지,
어디에 요청할 것인지,
비동기 방식으로 요청하는것이 맞는지 지정해준다.
그다음, onload 메서드를 이용해 통신이 완료되었을때 실행할 함수를 작성하고
send 로 요청을 보낸다.

 

 

참고 사이트>>>

https://www.w3schools.com/whatis/whatis_ajax.asp

https://coding-factory.tistory.com/143

https://myeonguni.tistory.com/1526