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

author-avatar
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:'http://httpbin.org/post', type: 'POST', data:{ a:1,b:2 } }); [/code]

In Smartjax:

[code language="javascript"] Smartjax.ajax({ url:'http://httpbin.org/post', 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.

Smartjax

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

force

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:'http://httpbin.org/post', type: 'POST', data:{ a:1,b:2 }, force:true }); [/code] Defaulty the value is false.

store

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

group

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:'http://httpbin.org/post', type: 'POST', data:{ a:1,b:2 }, group:"group1" }); [/code]

cleanStore(param)

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.

cleanAll()

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

setDefaults(param)

[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

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All