Ajax with jQuery

XMLHttpRequest를 포스트와 연관된 내용이니 아래 링크를 참고해 주세요. https://chanwhekim.github.io/2018/09/26/ajaxwithxhr/

차례 - XHR을 jQuery Ajax로 변경하기 - jQuery Ajax 소스코드 살펴보기 - jQuery의 다른 Async Method 살펴보기

다른 포스트에서 XMLHttpRequest 객체를 이용해 비동기 요청을 하고, 사진과 뉴욕타임즈 기사를 검색하는 웹앱을 만들어 봤습니다. XHR 대신 이번에는 jQuery를 사용해 보겠습니다.

jQuery는 웹이 표준화되기 전 브라우저별 맞춤 작업을 대신에 해 주었기 때문에, 웹개발자에게 많은 도움이 되었습니다. 현재는 웹이 많이 표준화되었고, jQuery가 웹개발에 있어 필수적인 라이브러리는 아닙니다. 하지만, 아직도 많이 사용되고 있으며 특히 Ajax 요청을 할 때 jQuery를 이용하면 간결한 코드로 작업을 할 수 있습니다.

Ajax 요청 시 jQuery의 Syntax를 먼저 살펴보겠습니다. Ajax 설정 객체만 전달하면 되는 두 번째 방식이 더 많이 사용됩니다.

$.ajax(<url-to-fetch>, <a-configuration-object>);
or
$.ajax(<a-configuration-object>);

XHR 객체에서는 reponse를 함수를 통해 처리했습니다. jQuery에서는 .done 메서드를 이용할 수 있습니다.

function handleResponse(data) {
  console.log('the ajax request has finished.');
  console.log(data);
}
$.ajax({
  url: 'https://swapi.co/api/people/1/'
}).done(hansdleResponse);

그러면 이전에 XHR로 만들었던 검색 애플리케이션을 jQuery ajax 메서드로 변경해 보겠습니다.

const imgRequest = new XMLHttpRequest();
imgRequest.onload = addImage;
imgRequest.open('GET', `https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`);
imgRequest.setRequestHeader('Authorization', 'Client-ID <your-client-id-here>');
imgRequest.send();

// ↓ jQuery ajax 메소드로 변경

$.ajax({
  url: `https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`
}).done(addImage);

위와 같이 XHR 객체를 jQuery ajax 메서드로 변경했습니다. 코드가 많이 간결해 진걸 확인하실 수 있습니다.

jQuery를 사용하면,    - XHR 객체를 생성하지 않아도 됩니다.    - HTTP request를 명시하지 않아도 되며, 'GET'이 기본값입니다.    - onload나 'load'이벤트를 사용하지 않고, .done 메서드를 사용할 수 있습니다.

upsplash API를 이용하기 위해 header를 포함해야 합니다. jQuery 메서드 이용시 아래와 같이 설정해 주면 됩니다.

$.ajax({
  url: `https://api.unsplash.com/search/photos?page=1&query=${searchedForText}`,
  headers: {
    Authorization: 'Client-ID 123abcd456efg'
  }
}).done(addImage);

XML에서는 response를 JSON.parse를 통해 javascript 객체로 변경을 했습니다. jQuery는 이 작업을 대신해 줍니다. 아래 코드를 살펴봐주세요.

function addImage() {
  const data = JSON.parse(this.responseText);
  const firstImage = data.results[0];

  responseContainer.insertAdjacentHTML(
    'afterbegin',
    `
    <figure>
        <img src="${firstImage.urls.small}" alt="${searchedForText}">
        <figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
    </figure>`
  );
}

// ↓ jQuery 방식

function addImage(images) {
  const firstImage = images.results[0];

  responseContainer.insertAdjacentHTML(
    'afterbegin',
    `
    <figure>
        <img src="${firstImage.urls.small}" alt="${searchedForText}">
        <figcaption>${searchedForText} by ${firstImage.user.name}</figcaption>
    </figure>`
  );
}

jQuery 역시 javascript로 보지이 않는 곳에서 우리 대신 XHR 요청을 발송합니다. 다음으로 jQuery의 ajax 메서드가 어떻게 작성하는지 살펴보겠습니다.

아래의 jQuery 소스 코드와 같이, 우리가 jQuery Ajax 메서드를 호출할 때마다, jQuery는 우리를 대신해 XMLHttpRequest 객체를 생성합니다.

크롬의 개발자도구를 열어서 jQuery ajax 호출시 call stack을 살펴보겠습니다.   - 익명함수에서 $.ajax를 호출합니다.   - .ajax()는 .send()를 호출합니다.   - .send()는 options.xhr()을 호출합니다.   - options.xhr()은 jQuery.ajaxSettings.xhr를 호출하고 이 메서드가 XHR 객체를 생성합니다.

따라서, jQuery ajax 메소드를 호출할 때마다, 새로운 XHR 객체가 생성되는 것을 확인할 수 있습니다. 그리고 아래와 같이 header를 포함해야 할 때 for..in loop를 사용하는 것도 확인할 수 있습니다.

- .get() - .getJSON() - .get() - .get() - .get()

본질적으로 ajax 메소드를 사용하지만, jQuery의 ajax 메소드가 호출되기 전 default 값을 설정한 후 호출이 됩니다. 예를 들어, get 메서드를 이용하면, get 메서드가 ajax 메서드를 호출하기 전 type을 'get'으로 설정합니다. 유사하게, post 메서드의 경우 ajax 메서드를 호출하기 전 type을 'post'로 설정합니다