Create a JavaScript AJAX GET request

Create a simple function that sends an AJAX GET request and returns a JSON response.

Code

Send a GET request through AJAX with a JSON response.

• ES5 version using XMLHttpRequest
• ES6 version using fetch()

JavaScript ES5 using XMLHttpRequest

Sometimes you need a legacy version for compatibility with legacy code; use the ES5 version.

Simple:

function sendGetHttpRequest(url) {
    var request = new XMLHttpRequest();
    request.open("GET", url);
    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    request.send();
}

With callbacks:

function sendGetRequest(url) {
    var xhr = new XMLHttpRequest();

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.response);
        } else {
            console.error(xhr.statusText);
        }
    };

    xhr.onerror = function() {
        console.error(xhr.statusText);
    };

    xhr.open("GET", url);
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
    xhr.send();
}

JavaScript ES6 using fetch()

function sendGetRequest(url) {
    fetch(url)
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error(error));
}