AjaxQ jQuery Plugin

A tiny, simple jQuery plugin for sequential ajax requests.

Features

Installation

View Project On Github Just the JavaScript, Please

Or using bower

bower install ajaxq

Usage

Using AjaxQ is easy. Add the plugin into your project, then instead of calling $.ajax(opts); call $.ajaxq(name, opts);

Any requests added with the same queue name will be processed sequentially. It is possible to have more than one queue running in parallel by using different queue names. See the demo below to see two queues running together at the same time.

$.ajaxq

    // See full $.ajax documentation.  The only difference is the first parameter (the queue name).
    $.ajaxq ('MyQueue', {
        url: 'http://jsfiddle.net/echo/jsonp/',
        type: 'post',
        dataType: 'jsonp'
    });

$.ajaxq([qname], [function opts])

    // Provide a function to be executed at dequeue to retrieve options
    var data = {
      foo: 'bar'
    };
    function getOpts() {
      return {
          url: 'path/to/your/resource',
          type: 'post',
          data: data
      };
    }
    $.ajaxq ('MyQueue', getOpts);

$.postq

    // See full $.post documentation documentation.
    $.postq ('MyQueue', 'path/to/your/resource', onsuccess);

$.getq

    // See full $.get documentation documentation.
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);

$.ajaxq.isRunning([qname])

    // Returns boolean representing whether there are any requests running in any queue, or in the given queue, if provided
    
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
    $.ajaxq.isRunning(); // Will return true since request just started.

    $.ajaxq.isRunning('NotMyQueue') // Will return false since the queue hasn't been added to.
    
    function onsuccess() {
        $.ajaxq.isRunning(); // Will return false since request is finished.
    }

$.ajaxq.getActiveRequest(qname)

    // Returns the currently processing jqXHR for the given queue
    
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
    var xhr = $.ajaxq.getActiveRequest('MyQueue');
    xhr.abort(); // will abort the current request

$.ajaxq.clear(qname)

    // Clears queued requests in the given queue, without cancelling the current request
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
    $.getq ('MyQueue', 'path/to/another/resource', onsuccess);
    
    // Will clear future requests without cancelling the current one
    $.ajaxq.clear('MyQueue'); 

$.ajaxq.abort(qname)

    // Aborts the current request, and clears the current queued items in the given queue
    $.postq ('MyQueue', 'path/to/another/resource', onsuccess);
    $.postq ('MyQueue', 'path/to/another/resource', onsuccess);
    $.postq ('MyQueue', 'path/to/another/resource', onsuccess);
    
    // Will cancel the current request and clear future ones
    $.ajaxq.abort('MyQueue'); 

Demo

Click the buttons below to add requests onto two separate queues. Requests for this demo are generated using the jsFiddle echo API.


Queue #1

Queue #2


Tests

Mocha Tests

About

AjaxQ was developed by Foliotek, Inc. for use in Foliotek Presentation. It is licensed under the MIT License. See the LICENSE file.

You can find some more of our code and projects on our development blog.