grab.js Documentation

Introduction

grab.js is a lightweight AJAX library that simplifies making XMLHttpRequests in JavaScript. It provides a convenient and chainable interface for configuring and executing AJAX requests with features such as handling headers, enabling CORS, setting timeouts, and more.

Current Version

grab.js is a currently in BETA v0.1.0.

Table of Contents

1. Initialization
2. Configuration Methods
   • perform
   • here
   • setData
   • setHeaders
   • enableCors
   • error
   • abort
3. Request Execution
   • done
4. Examples

Initialization

Include the grab.js script in your HTML file to use it:

<script src="https://cdn.jsdelivr.net/gh/kostastepetes/grab-js/dist/grab.min.js"></script>

Configuration Methods

perform(method, url, async)

Specify the HTTP method, URL, and asynchronous flag for the request.

grab.perform("GET", "https://jsonplaceholder.typicode.com/posts", true);

here(targetElement, callback)

Set the target HTML element and callback function for the request.

grab.here('HTMLElement', yourCallbackFunction);

setData(data)

Set the request payload data.

grab.setData(JSON.stringify({ title: 'Post Title', body: 'Post Body', userId: 1 }));

setHeaders(headers)

Set the headers for the request.

grab.setHeaders({ 'Content-type': 'application/json' });

enableCors(enable)

Enable or disable Cross-Origin Resource Sharing (CORS) globally for all requests made using the grab.js library.

grab.enableCors = true; 
grab.enableCors = false;

error(callback)

Set a callback function to handle errors during the request.

grab.error(function() {
    console.error('An error occurred during the request.');
});

abort()

Abort the ongoing request.

grab.abort();

Request Execution

done()

Execute the configured request.

grab.done();

Examples

Specific Header with POST and Custom Content-Type

function performSpecificHeaderPOST() {
    grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
        .here('HTMLElement', yourCallbackFunction)
        .setData(JSON.stringify({ title: 'Post Title', body: 'Post Body', userId: 1 }))
        .setHeaders({ 'Content-type': 'application/json' })
        .done();
}

Multiple Headers

function performMultipleHeadersPOST() {
    grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
        .here('HTMLElement', yourCallbackFunction)
        .setData(JSON.stringify({ title: 'Post Title', body: 'Post Body', userId: 1 }))
        .setHeaders({
            'Content-type': 'application/json',
            'Authorization': 'Bearer your_access_token'
        })
        .done();
}

Specific Header

function performSpecificHeaderGET() {
    grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/1', true)
        .here('HTMLElement', yourCallbackFunction)
        .setHeaders({ 'Accept': 'application/json' })
        .done();
}

All Headers

function performAllHeadersGET() {
    grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/1', true)
        .here('HTMLElement', 'all')
        .done();
}

Aborting the Request

function performAbort() {
    setTimeout(function() {
        grab.abort(); // Simulate aborting the request after a delay
    }, 2000); // Abort after 2 seconds
}

Enabling CORS

function performCORS(enable) {
    grab.enableCors = enable;
    grab.perform('GET', 'https://jsonplaceholder.typicode.com/posts/1', true, enable)
        .here('HTMLElement', yourCallbackFunction)
        .done();
}

Error Handling

function performErrorHandling() {
    grab.perform('POST', 'https://jsonplaceholder.typicode.com/posts', true)
        .here('HTMLElement', yourCallbackFunction)
        .setData(JSON.stringify({ title: 'Invalid Post' }))
        .setHeaders({ 'Content-type': 'application/json' })
        .error(function() {
            console.log('Error occurred during the request.');
        })
        .done();
}