태야

[AJAX] - Asynchronous JavaScript and XML

웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 시작됐으며, 더 좋은 UX를 제공할 수 있는 기술이다. 간단하게 AJAX는 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고받을 수 있습니다. 요즘 가장 많이 사용되는 데이터 포맷 형식은 JSON이다.

[특징]

1. 페이지 새로고침 없이 서버에 요청할 수 있다.

2. 서버로부터 데이터를 받고 작업을 수행한다.

[사용법]

1. XMLHttpRequest 객체를 이용한 방법

2. Fetch API를 이용한 방법 - XHR보다 간단하게 코드를 짜 서버와 통신을 쉽게 할 수 있다. 하지만 익스플로러에서는 적용이 되지 않는다고 하니, 참고해서 사용해야 한다.

[예제 - XHR(1)]

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");//parameter를 붙여서 보낼수있음. 
 xhr.send();
}

XMLHttpRequest객체를 생성해서, open메서드로 요청을 준비하고, send메서드로 서버로 보낸다.

요청처리가 완료되면(서버에서 응답이 오면) load이벤트가 발생하고, 콜백 함수가 실행된다.

콜백 함수가 실행될 때는 이미 ajax함수는 반환하고 콜 스택에서 사라진 상태다.

이는 setTimeout함수의 콜백함수의 실행과 유사하게 동작하는 '비동기'로직이다.

[XMLHttpRequest 객체의 메서드]

1. open 메서드

- 첫 번째 파라미터 

: HTTP 요구 방식(request method) ─ GET, POST, HEAD 중의 하나이거나 당신의 서버에서 지원하는 다른 방식이다.(반드시 대문자로)

- 두 번째 파라미터

: 요구하고자하는 URL 주소

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

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

2. send 메서드

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

: send() 메소드의 파라미터는 POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능하다. 데이터는 서버에서 쉽게 parse 할 수 있는 형식(format)이어야 한다.  JSON, XML, SOAP 등과 같은 다른 형식(format)도 가능하다.

예시) "name=value&anothername="+encodeURIComponent(myVar)+"&so=on" 

[Response 속성들]

1. readyState

• 0 (uninitialized) - (request가 초기화되지 않음)

• 1 (loading) - (서버와의 연결이 성사됨)

• 2 (loaded) - (서버가 request를 받음)

• 3 (interactive) - (request(요청)을 처리하는 중)

• 4 (complete) - (request에 대한 처리가 끝났으며 응답할 준비가 완료됨)

2. status

• 200: "OK"

• 403: "Forbidden"

• 404: "Page not found"

3. statusText

: "OK" or "Not Found" 반환

[예제 - XHR(2)]

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

        let xhr = new XMLHttpRequest();
        xhr.open("GET", "http://numbersapi.com/" + number);// url에 값을 추가

        xhr.onload = function () {
          if (this.status == 200 && number != "") {
            fact.style.display = "block";
            factText.innerText = this.responseText;
          }
        };

        xhr.send();
        }

[예제 - 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));
      }