jQuery: Improve API Calls With an Event, Request, Class Structure
First of all happy new year to all of you, I hope you enjoyed the holiday season.
Anyway I'm going to share with you a simple way to improve the structure of your jQuery code. It's what I call the Event, Request, Class Structure. And I find it particularly useful when dealing with API or server requests in jQuery.
I'm sure some of you will have seen something similar or know of something better. But this is for the many coders who still use procedural jQuery when making server requests. Just take a look at OpenCart as a prime example.
We all know this kind of jQuery event, request and response set up...
$('#button').bind('click',function(e){ e.preventDefault(); var inp1 = $('#input1').val(); $.ajax({ type: 'GET', url: 'http://example.com/API/GetData', dataType: 'json', data: 'inp='+inp1, cache: false, success: function (result) { //Do something with the response alert(result); } }); });
This works fine, but it means the event, request and response handling are all done in the same place. In addition every time you make a request you have to type out the same $.ajax bullshit over and over again. So your code becomes a clutter and or 'soggy'...
So how can we improve things? Well we can use an Event, Request, Class Structure or something similar. And if you're cool with MVC you going to get the idea pretty quickly.
Basically we split out our events into one file, we then create a request class with routing features and finally create a set of classes for handling the responses...
So let's create an events file called events.js...
$(document).ready(function(){ //Instantiate your requests class srv = new Server(); $('#button1').bind('click',function(e){ e.preventDefault(); var inp1 = $('#input1').val(); //Call the request method srv.Request('GET','json','/API/RequestOne','inp='+inp1,'ClassOne_ResponseOne'); }); $('#button2').bind('click',function(e){ e.preventDefault(); var inp2 = $('#input2').val(); srv.Request('POST','json','/API/RequestTwo','inp='+inp2,'ClassTwo_ResponseTwo'); }); });
Above you will see we just instantiate our request class, called Server() in this instance. It's request method is passed standard $.ajax variables plus a route string at the end.
The route string contains the class and the method we want the response handled by, separated by an underscore.
Next we create our request class (server.class.js) for handling and routing all our requests...
function Server() { this.Request = function(type,response,url,data,route) { $.ajax({ type: type, url: url, dataType: response, data: data, cache: false, success: function (result) { //Split route into class and method var cm = route.split('_'); //Class var c = cm[0]; //Method var m = cm[1]; //Instantiate our class by adding it to the window. var myclass = new window[c](); //Call the class' method and pass it the relevant data myclass[m](result); } }); } }
The above is just a simple way of instantiating a class and method based on a string. Very similar to the way it is done in PHP MVC. And of course the important bit is the bit after 'success' and I explain this in more detail in a previous post...
I hope you can see where this is going. The final task is to create our classes for handling the results. So let's create responses.class.js...
function ClassOne { this.ResponseOne = function(result) { alert(result); } } function ClassTwo { this.ResponseTwo = function(result) { alert(result); } }
See simple. We can now handle our responses in whatever way we want.
The above code can be extended to become as complicated as you want. I've even built a version that handles file uploads which I'll share at a later date.
The benefits of the above approach should be obvious. It will keep your code DRY; It will be better structured so it is easier to debug; And you will be able to produce code quicker.
I hope you find it useful, but please don't think I believe my way is the best way or the only way. If you know of improvements or better ways please share them with me.
titsay
andulkaphoto
annaxmalina
prguitarman
turnnoffyourmind
janainaart
izzy806