Custom AJAX Wrapper for jQuery
|
That's one of the reasons why I wrote and use my custom AJAX wrapper for jQuery.
The idea.
The code.
I will base the example loosely on a CRUD schema.
Example:
switch (action){
// Call the global AJAX method
};
// If dataType wasn't specified in the payload, default to 'html'
// jQuery AJAX object
// Normal properties
// Global beforeSend wrapper with user defined function
// Execute some global method here
// Execute user defined method
// Execute some global method here
// Execute user defined method
// Create the AJAX property object
data: {
// Success callback function
};
// Fire the bundle off
};
Karl Stanton - Developer @ Fi Stockholm
Report Inappropriate Content
CloseThank You!
The safety and legitimacy of Kontain's content is paramount to us. We will be investigating this content shortly. Here is what you reported:
Additional Information
Lorem ipsum dolor sit amet consectetuer adipiscing elit penubrum purous
-
Paul
3 months ago
Great stuff. I often add in a timestamp to wrappers (which are returned as part of the script's response) so that if there are a lot of requests in quick succession you can compare the timestamp of the response to the most recently dispatched request. That's saved my bacon a good number of times.
I am a big fan of this kind of centralization and wrapping - keeps thing very neat and easy to test / debug :]
-
Author
fi_labs
3 months ago
For sure! It's also often best to suffix the endpoint with a timestamp to help break cached responses. I hope people can take this as the base and extend upon it for their own applications!
Thanks for your comment, Paul!
-
decembersoul
3 months ago
Nice one Karl! Makes it so easy to add global handles for exceptions and hook in functionality like re-login and re-execute last action if the session has expired.
-
Tekkaman S...
3 months ago
So much brain power in this post.
-
Everardo
3 months ago
Great article. How can I add the beforeSend callback like in this example:
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction",'http://mycompany.org/myservice/WebService.GetOrder');
},
type: "POST",
dataType: "xml",
data: soapMessage,
complete: endSaveProduct,
contentType: "text/xml; charset=utf-8"
});Thanks,
Everardo
-
Sebastian
2 months ago
Very nice object. however You can optimize the code.
/*** Outline our webservices* @param {String} action - AJAX action to perform* @param {Object} payload - Javascript object containing AJAX method properties*/Website.Webservice = function (action, payload) {var setAction = (action === "read")?"get":actionpayload.type = (setAction !== "get")?'POST':'GET';payload.url = '/ajax/' + setAction + '_data.php';
// Call the global AJAX methodWebsite.AJAX(payload);};
-
karlstanton
2 months ago
Quoted from: Everardo - "Great article. How can I add the beforeSend callback like in this example:
$.ajax({
url: url,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction",'http://mycompany.org/myservice/WebService.GetOrder');
},
type: "POST",
dataType: "xml",
data: soapMessage,
complete: endSaveProduct,
contentType: "text/xml; charset=utf-8"
});Thanks,
Everardo
"
It would be added in the updateUserData function. Notice how the object replicates the AJAX object.
-
karlstanton
2 months ago
Quoted from: Sebastian - "Very nice object. however You can optimize the code.
/*** Outline our webservices* @param {String} action - AJAX action to perform* @param {Object} payload - Javascript object containing AJAX method properties*/Website.Webservice = function (action, payload) {var setAction = (action === "read")?"get":actionpayload.type = (setAction !== "get")?'POST':'GET';payload.url = '/ajax/' + setAction + '_data.php';
// Call the global AJAX methodWebsite.AJAX(payload);};
"
We do optimize our code for production, however this article is deliberately verbose for the purpose of easy reading. Thanks for your comment!
-
Alan Smith
2 months ago
Great article!
Comments (9)