Ajax with jQuery

jQuery는 각종 브라우저들이 아직 완전히 표준화되어 있지 않을 때, 개발자들이 <script> 태그 안에 jQuery를 포함시킴으로써 여러 브라우저에서 모두 JavaScript 코드가 잘 작동하도록 해주었다.

최근에는 브라우저들이 꽤나 align 되어있는 상황이고, 따라서 jQuery가 꼭 필요하지는 않은 것이 사실이다. 하지만 jQuery가 제공하는 ajax() 메소드 만큼은 아주 강력하다.

$.ajax(<just a configuration object>);

$.ajax({
    url: 'https://swapi.co/api/people/1/'
});

위와 같은 방식으로 사용한다.

즉 괄호 안에 Object를 넣어주면 된다.

하지만 이렇게만 하면 response를 받을 수 없다. done() 메소드를 사용해야 한다.

function handleResponse(data) {
    console.log('the ajax request has finished!');
    console.log(data);
}

$.ajax({
    url: 'https://swapi.co/api/people/1/'
}).done(handleResponse);

jQuery 코드는:

• XHR object를 만들 필요가 없고
• GET request라고 따로 쓰지 않는다. 기본값으로 GET이 설정되어 있고 우리는 요청하는 자원의 URL만 넣어주면 된다.
• onload 대신 .done() 메소드를 사용한다.

API를 사용할 때 Client ID Header를 포함하는 방법은 아래와 같다.

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

기존 XHRHttpRequest 객체의 onload 속성에 사용했던 addImage() 코드:

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를 사용해 위의 3줄을 더 간단하게 바꾼다.

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>`
    );
}

• 함수가 images라는 매개변수를 받는다
• 이 매개변수는 이미 JSON에서 JavaScript object로 자동으로 변환되어 있다. 따라서 JSON.parse()는 더 이상 필요 없다.
• firstImage라는 변수가 images.results의 첫번째 아이템으로 설정되어 있다.

개발자 도구를 켜고 Source 패널에서 jQuery.js를 연 뒤,

return new window.XMLHttpRequest();

부분에 breakpoint를 걸어주고 페이지를 실행시켜 보면, .ajax() 메소드로부터 어떤 메소드들이 호출되었는지 Call Stack 부분에서 모두 확인할 수 있다.

그 순서는 다음과 같다.

1. JavaScript 코드에서, 익명 함수가 .ajax()를 호출함
2. .ajax()가 .send() 메소드를 호출함
3. .send()가 options.xhr()을 호출함
4. options.xhr()이 jQuery.ajaxSettings.xhr(새로운 XHR object를 생성하는 메소드)를 호출함

즉 정리하면, .ajax() 메소드는

• 호출될 때마다 새로운 XHR object를 생성한다
• 모든 XHR property와 method들을 설정한다
• XHR 요청을 보낸다

이 외에도 비동기 호출을 만들어내기 위해 사용될 수 있는 메소드들이 여러가지 있다.

• .get()
• .getJSON()
• .getScript()
• .post()
• .load()

이 함수들 각각은 차례로 jQuery의 main .ajax () 메소드를 호출한다. 이들은 편리한 인터페이스를 제공하고 .ajax()를 호출하기 전에 요청의 기본 구성을 수행하기 때문에, "convenience methods"라고 불린다.