Shows the implementation of a method which uses a #javascript #Promise to report the success or failure of an XMLHttpRequest. Based on Mozilla Developer Network documentation.

XMLHttpRequestPromise.js

/*jslint devel: true, browser: true, es5: true */
/*global Promise */

// $http function is implemented in order to follow the standard Adapter pattern
function $http(url) {
    'use strict';
    
    var core = {
        // Method that performs the ajax request
        ajax : function (method, url, args) {
            // Creating a promise
            var promise = new Promise(function (resolve, reject) {
                // Instantiates the XMLHttpRequest
                var client = new XMLHttpRequest(),
                    uri = url,
                    argcount,
                    key;

                if (args && (method === 'POST' || method === 'PUT')) {
                    uri += '?';
                    argcount = 0;
                    for (key in args) {
                        if (args.hasOwnProperty(key)) {
                            if (argcount > 0) {
                                uri += '&';
                            }
                            argcount += 1;
                            uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);
                        }
                    }
                }

                client.open(method, uri);
                client.send();

                client.onload = function () {
                    if (this.status >= 200 && this.status < 300) {
                        // Performs the function "resolve" when this.status is equal to 2xx
                        resolve(this.response);
                    } else {
                        // Performs the function "reject" when this.status is different than 2xx
                        reject(this.statusText);
                    }
                };

                client.onerror = function () {
                    reject(this.statusText);
                };
            });

            // Return the promise
            return promise;
        }
    };

    // Adapter pattern
    return {
        'get' : function (args) {
            return core.ajax('GET', url, args);
        },
        'post' : function (args) {
            return core.ajax('POST', url, args);
        },
        'put' : function (args) {
            return core.ajax('PUT', url, args);
        },
        'delete' : function (args) {
            return core.ajax('DELETE', url, args);
        }
    };
}


function makeHttpRequest() {
    'use strict';
    /*
    Cross-site XMLHttpRequest
    Modern browsers support cross-site requests by implementing the web applications working group's Access Control for Cross-Site Requests standard.  
    As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work.  
    Otherwise, an INVALID_ACCESS_ERR exception is thrown.
    https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    */
    
    var mdnAPI = 'https://developer.mozilla.org/en-US/search.json', // Does not allow cross-site requests
        payload = {
            'topic' : 'js',
            'q'     : 'Promise'
        },
    
        testAPI = "http://jsonplaceholder.typicode.com/posts/1", // Allows cross-site requests

        callback = {
            success : function (data) {
                console.log(1, 'success', JSON.parse(data));
            },
            error : function (data) {
                console.log(data);
                //console.log(2, 'error', JSON.parse(data));
            }
        };
    
    $http(testAPI)
        .get()
        .then(callback.success)
        .catch(callback.error);
    
    /*
    // Executes the method call 
    $http(mdnAPI)
        .get(payload)
        .then(callback.success)
        .catch(callback.error);
    
    // Executes the method call but an alternative way (1) to handle Promise Reject case 
    $http(mdnAPI)
        .get(payload)
        .then(callback.success, callback.error);

    // Executes the method call but an alternative way (2) to handle Promise Reject case 
    $http(mdnAPI) 
        .get(payload)
        .then(callback.success)
        .then(undefined, callback.error);
    */
}