AJAX & Fetch

AJAX

ajax(Asynchronos Javascript And XML)는 자바스크립트를 통해서 서버에 데이터를 요청하는것을 의미한다. 이는 html form태그를 통하지 않기에 새로운 html페이지로 갈 필요도 없고, 새로고침도 할 필요가 없다. 또한 일부분만 새로이 로딩되기에 속도 도한 빠르다.

ajax는 다음의 4가지 과정을 거친다.

1. XMLHTTP request object를 만든다.

• request를 보낼 준비를 브라우저에게 시키는 과정이다
• 이것을 위해서 필요한 method를 갖춘 object가 필요하다

2. callback함수를 만든다.

• 서버에서 response가 왔을때 실행시켜야할 함수이다.
• html페이지를 업데이트한다

3. open a request

• 여기서 브라우저에게 두가지 정보를 보내준다. 바로 브라우저가 request를 보내기 위해 사용할 method(ex. post, get)와 request가 갈 URL이 바로 그 정보이다.

4. send a request

이 ajax요청을 보내는 방법은 몇가지가 있다.

XMLHttpRequest

가장 원초적인 방법으로, 거의 사용할 일이 없다.

let xmlHttp = new XMLHttpRequest()

xmlHttp.onreadystatechange = function () {
  if (this.status == 200 && this.readyState == this.DONE) {
    console.log(xmlHttp.responseText)
  }
}

xmlHttp.open('GET', '/yceffort/request.txt', true)

xmlHttp.send()

JQuery AJAX

아직까지 많은곳에서 사용되고 있는 방법이다.

$.ajax({
  url: '/yceffort/request.txt',
  success: function (data) {
    console.log(data)
  },
})

간단해보이지만 jquery를 사용한 요청은 then(success)의 체이닝이 연속해서 겹쳐진다면 콜백헬을 필연적으로 마주하게 된다.

$.ajax({
  url: "/yceffort/request1.json",
  success: function(data) {
    const result = JSON.parse(data);
    $.ajax({
        url: `/yceffort/request2.json?data=${result.data}`
        success: function(data2){
            const result2 = JSON.parse(data2);
            $.ajax({
                url: `/yceffort/request2.json?data=${result2.data}`
                success: function(data3){
                    ......
                }
            })
        }
    })
  },
})

fetch

es7에서 추가된 fetch를 사용하면 강력하고 깔끔하게 사용가능한 ajax요청이 완성된다.

fetch 사용법

fetch()는 첫번째 인자로 URL, 두번째 인자로 옵션 객체를 받고, promise타입을 반환한다. 반환된 객체는 API 호출이 성공했을 경우에는 응답(response) 객체를 resolve하고, 실패했을 경우에는 예외(error) 객체를 reject한다

fetch(url, options)
  .then((response) => console.log("response:", response))
  .catch((error) => console.log("error:", error));

옵션에는 HTTP method(ex. get, post), HTTP 요청 헤더, HTTP 전문등을 설정할 수 있다. 응답으로 읽는 객체는 HTTP 응답상태, HTTP 응답 헤더, HTTP 응답 전문 등을 읽어올 수 있다.