Basic requests

Warning

This example uses an JavaScript with a very “old” way of creating and sending XHR-requests.
You will only need this, if you are still forced to optimize for Internet Explorer 11 and below.

For a more modern approach we would recommend using the promise-based fetch() or a library that saves a lot of headaches like Axios

How to make a request with pure JavaScript (no libraries) that supports older browsers (like Internet Explorer 11 and below).

Tip

Want to play, not read?
Here is a ready-to-go codepen that demonstrates how to use VanillaJS to make requests. Run and have fun!

Sending a simple request (for older browsers)

If you can drop support for IE11 and below, the easiest way to send a request is using the promise-based fetch() command that comes with ES6+.

Let’s create a GET request to the nnrestapi backend:

// By default this will be routed to Index->getIndexAction()
var url = 'https://www.mywebsite.com/api/index';

var xhr = new XMLHttpRequest();
xhr.open('GET', url);

xhr.onload = function () {
    var data = JSON.parse( xhr.responseText );
    if (xhr.status != 200) {
        alert("Error " + xhr.status + ": " + data.error );
        return false;
    }
    console.log( data );
};

xhr.onerror = function () {
    alert('Some other error... probably wrong url?');
};

xhr.send();

Of course you can also send a payload / JSON data using a POST, PUT or PATCH request:

// By default this will be routed to Index->postIndexAction()
var url = 'https://www.mywebsite.com/api/index';

var json = {
    title: 'My Title',
    text: 'And some text'
};

var xhr = new XMLHttpRequest();
xhr.overrideMimeType('application/json');
xhr.open('POST', url);

xhr.onload = function () {
    var data = JSON.parse( xhr.responseText );
    if (xhr.status != 200) {
        alert("Error " + xhr.status + ": " + data.error );
        return false;
    }
    console.log( data );
};

xhr.onerror = function () {
    alert('Some other error... probably wrong url?');
};

xhr.send(JSON.stringify(json));

VanillaJS Starter Template

Here is a full example you can copy and paste to get you started.

You can also test and play with it on this codepen

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>nnrestapi VanillaJS Demo</title>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <style>
            #json-data {
                min-height: 100px;
            }
            #result {
                min-height: 100px;
                white-space: pre-wrap;
                border: 1px dashed #aaa;
                background: #eee;
                padding: 0.75rem;
            }
        </style>
    </head>
    <body>
        <div class="container my-5">
            <div class="form-floating mb-4">
                <select class="form-select" id="request-method">
                <option>GET</option>
                <option>POST</option>
                <option>PUT</option>
                <option>PATCH</option>
                </select>
                <label for="request-method">Request method</label>
            </div>
            <div class="form-floating mb-4">
                <input class="form-control" id="url" value="https://www.mysite.com/api/index/" />
                <label for="url">URL to endpoint</label>
            </div>
            <div class="form-floating mb-4">
                <input class="form-control" id="title" value="This is the title" />
                <label for="json-data">Title</label>
            </div>
            <div class="form-floating mb-4">
                <textarea class="form-control" id="text">This is the bodytext</textarea>
                <label for="json-data">Text</label>
            </div>
            <div class="form-floating mb-4">
                <button id="submit" class="btn btn-primary">Send to API</button>
            </div>
            <pre id="result">Result</pre>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <script>

            var $method = document.getElementById('request-method');
            var $url = document.getElementById('url');
            var $title = document.getElementById('title');
            var $text = document.getElementById('text');
            var $button = document.getElementById('submit');
            var $result = document.getElementById('result');

            /**
             * Helper-function to requests for older
             * browsers not supporting fetch()
             *
             */
            function sendRequest( url, payload, method, done, fail ) {

                if (typeof payload == 'object') {
                    payload = JSON.stringify(payload);
                }

                var xhr = new XMLHttpRequest();
                xhr.overrideMimeType('application/json');
                xhr.open(method, url);

                // The JWT we stored after authenticating
                var token = localStorage.getItem('token');
                if (token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + token);
                }

                xhr.onload = function () {
                    var data = JSON.parse( xhr.responseText );
                    if (xhr.status != 200) {
                        if (fail) fail( data );
                        return false;
                    }
                    if (done) done( data );
                };

                xhr.onerror = function () {
                    fail({
                        status: 0,
                        error: 'Some other error... probably wrong url?'
                    });
                };

                if (['GET', 'DELETE'].indexOf(method) == -1) {
                    xhr.send( payload );
                } else {
                    xhr.send();
                }
            }

            $button.addEventListener('click', submitData);

            function submitData() {

                var url = $url.value;
                var method = $method.value;

                var json = {
                    title: $title.value,
                    text: $text.value
                };

                sendRequest( url, json, method, onResponse, onError );

                function onResponse( data ) {
                     $result.innerText = JSON.stringify( data );
                }

                function onError( error ) {
                    alert( `Error ${response.status}: ${data.error}` );
                }

            }

        </script>
    </body>
</html>