Geeks With Blogs

News Please visit me at my new blog!!

profile for Aligned at Stack Overflow, Q&A for professional and enthusiast programmers
"free in Christ Jesus from the law of sin and death." Romans 8:2 (ESV) Check out the Falling Plates video on YouTube.
more about the Gospel
And then listen to Francis Chan speaking at LifeLight in SD.



Programming and Learning from SD

Here is what I’ve been using to make my JavaScript more modular and testable. I’m using JQuery’s promises and the Revealing Module Pattern.

I got the idea for the DataServices from John Papa's Pluralsight course on Knockoutjs, but modified it to work with promises, instead of passing in the callback as a parameter.

// DataService example:
dataService.UiDataService = (function (ajaxService) {
    'use strict';
    var webServiceUrl = "/api/UiApi/",
        /**
        * @brief Get all the components from the service.
        */
        getComponents = function (success) {
            ajaxService.AjaxGetJson(webServiceUrl + "GetComponents", true, success,
                function (errorMessage) {
                    ajaxService.CommonFailHandling(errorMessage + " in GetComponents");
                });
        };
    return{
        GetComponents: getComponents;
    };
}());

// Ajax Service example
dataService.AjaxService = (function (window, $) {
    'use strict';
    /**
     * @brief Get JSON from the service and return a promise.
     * @param url The url for the request.
     * @param cache bool to cache the request.
     * return a promise.
     */
    ajaxGetJsonAsync = function (url, cache) {
        return $.ajax({
            type: "GET",
            url: url,
            dataType: "json",
            accepts: {
                json: "application/json"
            },
            cache: cache === undefined ? false : cache,
            statusCode:
                {
                    401: function () {
                        // un-authorized, the session timed out
                        // re-direct to the login page
                        window.location = "/?ReturnUrl=" + window.location.pathname;
                    }
                }
        });
    },    
    /**
     * @brief Post the JSON data to the url and return a promise.
     * @param url The url to post to.
     * @param data The JSON data to post.
     * @param success The callback to call on success.
     * @param fail The callback to call on failure (400 or 500 errors from the service).
     *
     * @return The promise.
     */
    ajaxPostJsonAsync = function (url, data) {
        return $.ajax({
            type: "POST",
            url: url,
            data: data,
            dataType: "json",
            contentType: "application/json",
            statusCode:
                {
                    401: function () {
                        // un-authorized, the session timed out
                        // re-direct to the login page
                        window.location = "/?ReturnUrl=" + window.location.pathname;
                    }
                }
        });
    },
    /**
     * @brief Delete
     * @param url The url with the item id as a query string.
     * @param success The callback to call on success.
     * @param fail The callback to call on failure (400 or 500 errors from the service).
     */
    ajaxDeleteAsync = function (url) {
        return $.ajax({
            type: "DELETE",
            url: url,
            statusCode:
                {
                    401: function () {
                        // un-authorized, the session timed out
                        // re-direct to the login page
                        window.location = "/?ReturnUrl=" + window.location.pathname;
                    }
                }
        });
    };
     return {
        AjaxGetJsonAsync: ajaxGetJsonAsync,
        AjaxDeleteAsync: ajaxDeleteAsync,
        AjaxPostJsonAsync: ajaxPostJsonAsync,
        CommonFailHandling: commonFailHandling
    };
}(window, $));


Update 5/8/2013 ~ This post shows using the promises. If you upgrade to jQuery 1.9.1 + then make sure you use this instead of the call backs. The jQuery post page says "Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callback methods introduced in jQuery 1.5 are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead."

Posted on Friday, April 12, 2013 8:54 AM Knockout Js , Unit Testing , JavaScript | Back to top


Comments on this post: DataService and AjaxService for JavaScript

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Aligned | Powered by: GeeksWithBlogs.net