Javascript AJAX

jQuery 3.*

• http://api.jquery.com/jquery.ajax/

$.ajax({
    method: 'GET', // "GET", "POST", "PUT"
    dataType: 'json',
    url: 'https://example.com/',
    headers: {},
    cache: false
}).done(function(data){
    console.log(data);
}).fail(function(jqXHR,status,errorThrown){
    if(jqXHR.status===500 && jqXHR.responseText){
        console.err(jqXHR.responseText);
    }
}).always(function(data){
    console.log(data);
});

XMLHttpRequest (ES5)

var request = new XMLHttpRequest();
request.open('GET', 'https://example.com/', true);

request.onload = function() {
    if (this.status >= 200 && this.status < 400) {
        // Success!
        var data = JSON.parse(this.response);
    } else {
        // We reached our target server, but it returned an error

    }
};

request.onerror = function() {
  // There was a connection error of some sort
};

request.send();

Fetch (ES6)

• https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
• https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch

fetch(
    'https://example.com/',
    {
        method: 'get', // GET, POST
        headers: {
            'content-type': 'application/json'
        },
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        mode: 'cors', // no-cors, cors, *same-origin
    }
).then((response) => {
    if (!response.ok) {
        throw new Error('HTTP error, status = ' + response.status);
    }
    return response.json();
}).then((myJson) => {
    console.log(myJson);
}).catch((error) => {
    console.log('Error: ' + error.message);
});

Fetch + finally (ES2018)

fetch('https://www.google.com')
    .then((response) => {
        console.log(response.status);
        return response.json();
    })
    .then((json) => {
        console.log(json);
    })
    .catch((error) => { 
        console.log(error);
    })
    .finally(() => { 
        document.querySelector('#spinner').style.display = 'none';
    });

tags: js