Smartjax.js: a jQuery plugin to make your ajax calls smarter

Paul Shan Sat Jan 17 2015
Smartjax stores your api responses and do not ping the server in the same ajax call for the second time. Eg: you display your logged in user's summery in the right top cornor of your site. But to display that in every page you either need to make an ajax call, or have to make a server side processing. But using smartjax, you will get rid of all those processing. It will make the first call to get the user info and will store it internally. For you implementing this is not at all difficult. You don't have to think of all these storing and retrieving thing. You just have to use Smartjax.ajax() instead of $.ajax(), that's it.

Why useful?

Firstly, Smartjax.js is a very light weight plugin. Including this in your page will not make it heavy. Secondly, the syntax is almost exactly similar to $.ajax(), so no overhead of learning. Just few extra flags you need to know about. Thirdly, reducing server-client http interaction really gives a performance boost to your application.

How to use:

This is very very simple to use the smartjax. Below is a comparison.

In jQuery:

[code language="javascript"] $.ajax({ url:'', type: 'POST', data:{ a:1,b:2 } }); [/code]

In Smartjax:

[code language="javascript"] Smartjax.ajax({ url:'', type: 'POST', data:{ a:1,b:2 } }); [/code] Smartjax caches the result in the client side, and response with the same if you make the call again.

How to control data flow:

With some extra parameter in the Smartjax.ajax() call you can control the behavior of storing. Some of them also helps to clear the saved data.


If you include the library smartjax.js, it will create a global variable Smartjax. This variable contains a function ajax().


If *force* property is true in a call, no matter even if the response is saved, but smartjax will make and fresh call and shore the new result. [code language="javascript"] Smartjax.ajax({ url:'', type: 'POST', data:{ a:1,b:2 }, force:true }); [/code] Defaulty the value is false.


If *store* property is set to false in the call, the response will not be saved. [code language="javascript"] Smartjax.ajax({ url:'', type: 'POST', data:{ a:1,b:2 }, store:false }); [/code]


You can group the calls using the *group* parameter. For the time being, the group is useful at the time of cleaning the store. [code language="javascript"] Smartjax.ajax({ url:'', type: 'POST', data:{ a:1,b:2 }, group:"group1" }); [/code]


This function is used to clean the store. Right now group wise cleaning is supported in Smartjax. [code language="javascript"] Smartjax.cleanStore({groups:["g1"]}); [/code] The above syntax make the call record clean for the particular group. Other parameters will be supported soon in this function.


This function is parameterless and cleans all the saved records. [code language="javascript"] Smartjax.cleanAll(); [/code]


[code language="javascript"] Smartjax.setDefaults({ defaultMethod: 'get', alwaysForce: false, alwaysStore: true }); [/code] The function takes an object as a parameter. where you can mention the properties given above. By default the default call method is 'get', but you can change it for all calls. Same in case of force and store.

Pipelined features

  1. support of ID. It will make saving data and retrieving faster.
  2. Record and Mock services, which will help you to develop UI even if your api is not ready.

Demo & Download

VC ProductSmartjaxplugin

Written By

Paul Shan


  • E


  • R

    React JS

  • C


    Cascading style sheets only

  • S


    Search engine optimization

  • E


  • C


    wordpress, drupal, jumla, magento and more

Show All


advanced js
Web development
vue css
social share buttons
react datetime picker
jquery chart library
instant search using vue
event loop
best practices

Show All