Javascript Module Template with Ajax Callback
I have a website with multiple categories for which data needs to be pulled from mongo database. So far I've been writing ajax call plan, but since this requirement requires me to keep using the same ajax calls for different things, I started thinking about code / template reuse. I'm new to Javascript Module Templates, but so far what I've read and understood, it looks like the Revealing Module Template might be a good start for me, and not too confusing with the rest of the OO stuff.
I know there are many links, documents available on SOF and on the internet, but I really couldn't get a straight answer to my simple requirement to start by taking it to the next level with understanding.
I wrote some test code here ...
var myApp = new function () {
var Var1 = [];
getData = function (sendData) {
return $.ajax({
type: "POST",
url: URL,
data: sendData,
datatype: "json",
success: function (results) {}
});
};
getOffers = function (sendData) {
getData(sendData);
};
return {
getOffers: getOffers
};
}();
getData is kept private to fetch records from the database, and getOffers is public, which is a call from the outside as I understand it. But how do I get a successful return from my ajax call outside of these?
What I want to achieve is an easy way to call my functions like below.
myApp.getOffers({
'showData': 1,
'myLocation': "Location1",
'clientID': "Client1"
});
myApp.getOffers({
'showData': 1,
'myLocation': "Location2",
'clientID': "Client2"
});
which fetches data from my mongodb so that I can modify it as per my requirement. Each of them, when returning values, I could manipulate to show them in a diff Div so that the action is not outside my definition as they are not static.
How can I achieve this, since it works when I return something from the function directly, but when it should return from ajax, it has nothing to do with the callback I have to write. But how is this generally written so that we can reuse code and change the dispatch of various fields with the simplest approach?
Please modify this code so that I understand it better and start with something very basic to suit my requirements. OR send me some links that really explain my basics.
Also, I am sticking to the ajax "POST" method for myApp for some reason, I think when the "GET" method is used, users who know which variable I am passing through (from the source code) can send them directly as an action. php variable = 1 &? variable = 2. How can I avoid this if I can safely use the GET method?
source to share
But how do I get a successful return from my ajax call outside of these?
Make getOffers
return jqXHR getData
as shown below -
var myApp = (function () {
var Var1 = [];
var getData = function (sendData) {
return $.ajax({
type: "POST",
url: URL,
data: sendData,
datatype: "json",
success: function (results) {}
});
};
var getOffers = function (sendData) {
// return the jqXHR returned by getData
return getData(sendData);
};
return {
getOffers: getOffers
};
})();
The object jqXHR
returned $.ajax({})
is Promise
- When you get a success response for an Ajax request - you can attach a success handler like this outside of your ajax request
myApp.getOffers({
'showData': 1,
'myLocation': "Location1",
'clientID': "Client1"
}).done(function (data, textStatus, jqXHR) {
// work with DOM here
});
More details about JQuery Deferreds / Promises here -
You did getData
, getOffers
global, skipping var
ahead of the announcement.
As per your usage comment, POST
instead of the GET
general rule - it GET
is for retrieving data, POST for saving - just because you are using POST
, which does not mean that some you cannot sniff the data you are sending, it is just part of the request body instead Request urls. If you think the data you are sending is indeed sensitive, you should look into enabling it SSL(HTTPS)
for your application.
source to share