Example for the grab.js AJAX Library

Result of each call:

Click on the buttons to demonstrate different examples:

grab.js requests for this example:

performSpecificHeaderPOST() {
            grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
                .here('consoleOutput', yourCallbackFunction)
                .setData(JSON.stringify({ title: 'Post Title 1', body: 'Post Body 1', userId: 1 }))
                .setHeaders({ 'Content-type': 'application/json' })
                .done();
        }
performMultipleHeadersPOST() {
            grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
                .here('consoleOutput', yourCallbackFunction)
                .setData(JSON.stringify({ title: 'Post Title 2', body: 'Post Body 2', userId: 1 }))
                .setHeaders({
                    'Content-type': 'application/json',
                    'Authorization': 'Bearer your_access_token'
                })
                .done();
        }
performSpecificHeaderGET() {
            grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/1', true)
                .here('consoleOutput', yourCallbackFunction)
                .setHeaders({ 'Accept': 'application/json' })
                .done();
        }
performAllHeadersGET() {
            grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/2', true)
                .here('consoleOutput', 'all')
                .done();
        }
performAbort() {
            setTimeout(function () {
                grab.abort();
            }, 2000);
        }
performCORS(enable) {
            grab.enableCors = enable;
            grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/3', true, enable)
                .here('consoleOutput', yourCallbackFunction)
                .done();
        }
performErrorHandling() {
            grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
                .here('consoleOutput', yourCallbackFunction)
                .setData(JSON.stringify({ title: 'Invalid Post' }))
                .setHeaders({ 'Content-type': 'application/json' })
                .error(function () {
                    console.log('Error occurred during the request.');
                })
                .done();
        }
yourCallbackFunction(response) {
            document.getElementById('consoleOutput').innerText = JSON.stringify(response, null, 2);
        }

The dummy data being used in this example are provided by: JSONPlaceholder

API Data used:

Post 1

Title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit

Body: quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

User ID: 1


Post 2

Title: qui est esse

Body: est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla

User ID: 1


Post 3

Title: ea molestias quasi exercitationem repellat qui ipsa sit aut

Body: et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut

User ID: 1