[AJAX] AJAX가 뭐야?

 

 

🚀 일단 AJax를 알기 전 사전 지식이 필요하다

html,css,javascript,dom.xml 등 여러 기술 등을 함께 사용하는 개발 기법이다

---

AJax(Asynchronous JavaScript and XML)의 약자이다.

빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다.

 

JavaScript를 이용한 비동기 통신, 클라이언트와 서버간에 데이터를 주고 받는다.

 

웹 페이지 전체를 다시 로딩하지 않고도, 웹페이지의 일부분만을 갱신할 수 있다.

즉, AJax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

 

이 때 서버와는 JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고 받을 수 있게 된다.

 

쉽게 풀면, 자바스크립트를 통해 서버에 데이터를 요청을 하는 것이다.

 

---

🚀 AJAX 장단점

1. AJAX 장점

         1 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있다.

         2 웹 페이지가 로드 된 후에 서버로 데이터 요청을 보낼 수 있다.

         3 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있다.

         4 백그라운드 영역에서 서버로 데이터를 보낼 수 있다.

         5 서버에서 Data만 전송 하면 되므로 전체적인 코딩의 양이 줄어든다.

         6 기존 웹에서 불가능했던 다양한 UI를 가능하게 해 준다. (Flickr의 경우, 사진의 제목. 태그를 페이지의 리로드 없이 수정 가능)

 

 

2. AJAX 단점

        1 페이지 이동없는 통신으로 인한 보안 문제

        2 연속으로 데이터를 요청하면 서버 부하

        3 Script로 작성되기 때문에 디버깅이 용이하지 않다.

        4 AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.

 

 

---

🚀 AJAX 사용법

1. XMLHttpRequest 객체를 이용한 방법

2. Fetch API를 이용한 방법 - XHR보다 간단하게 코드를 짜 서버와 통신을 쉽게 할 수 있다. 익스플로러에서는 적용이 안됨

 

 

예제 XHR 

function ajax(data) {
 var xhr = new XMLHttpRequest();
 xhr.addEventListener("load", function() {
   console.log(this.responseText);
 });    
 xhr.open("GET", "http://www.example.org/getData?data=data");
 xhr.send();
}

XMLHTTPRequest 객체를 생성하면서, open 메서드로 요청을 하고, send 메서드로 서버에 전송을 한다.

서버에서 응답이 오면 load Event가 발생하고, callback함수가 실행이 된다.

callback함수가 실행이 될 땐, 이미 AJAX함수는 반환하고 call stack에서 사라진 상태이다.

이는 비동기로직이다.

 

1. open 메서드

     - 첫 번째 파라미터     xhr.open("GET", "http://www.example.org/getData?data=data");

        : HTTP 요구 방식(request method)

     - 두 번째 파라미터    xhr.open("GET", "http://www.example.org/getData?data=data");

        : 요구하고자 하는 URL 주소

- 세 번째 파라미터(옵션)

        : 요구가 비동기식(Asynchronous)으로 수행될지를 결정한다. True(기본값)이면 자바스크립트 함수가 지속적으로 수행될 수 있어 서버              로부터 응답을 받기 전에도 유저와 페이지의 상호작용이 계속 진행된다. 이것이 AJAX 의 첫 번째 A (Asynchronous : 비동기성)이다.

 

2. send 메서드

     - GET 방식으로 요청을 하는 경우에는 파라미터가 없다

     - send() 메서드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다.

       데이터는 서버에서 쉽게 parse할 수 있는 형식(format)이어야 한다. JSON, XML 등과 같은 다른 형식도 가능하다.

 

 

  예제 Fetch

function getFactFetch() {
        let number = numberInput.value;

        fetch("http://numbersapi.com/" + number)
          .then((response) => response.text())
          .then((data) => {
            if (number != "") {
              fact.style.display = "block";
              factText.innerText = data;
            }
          })
          .catch((err) => console.log(err));
      }