How to add mozSystem property to $http service in angular?

StackOverflow https://stackoverflow.com//questions/25084877

Question

Change jquery to angular in my application, but do not know how this property is added to the service $http, was something in jquery: var xhr = new XMLHttpRequest({mozSystem: true});

more information:

https://github.com/angular/angular.js/pull/7903#issuecomment-49966671

Firefox OS packaged apps and XMLHttpRequests

Was it helpful?

Solution

As of 2015-April-30 (AngularJS v1.3.15)

There is no way to dynamically create an XHR object in angular, but it is being discussed.

Angular Modified for FxOS

Here are patched versions of angular that only vary in that their XHR has been patched for use with systemXHR on FxOS

Note: Don't try to use those links as a CDN.

Workaround

https://angularjs.org/ has a CDN link from which you can download the latest version (which is fine, because you're going to be packaging the app on the device anyway).

For example: * https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js

You'll probably want the uncompressed source so that it's easier to work with.

Search in the file for XHR, createXHR, or XMLHttpRequest and you'll see function that needs to be patched.

As stated by @jan you'll be replacing something that looks like

return new window.XMLHttpRequest()

with

return new window.XMLHttpRequest({ mozSystem: true })

You can either minify the file using uglify-js, download and edit the minified version (if that's not too scary for you), or go commando and use the unminified version.

OTHER TIPS

You'll have to do some framework hacking actually at the moment. In angular.js file, look for

var XHR = window.XMLHttpRequest || function() {
  try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e1) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e2) {}
  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e3) {}
  throw new Error("This browser does not support XMLHttpRequest.");
};

And replace it by:

var XHR = function(){
  return new window.XMLHttpRequest({mozSystem: true});
};

You need to first config HTTP header

// Define HTTP header for .NET
.config(function($httpProvider, $routeProvider){
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8';
    var param = function(obj){
        var query = '', name, value, fullSubName, subName, subValue, innerObj, i;

        for(name in obj){
            value = obj[name];

            if(value instanceof Array){
                for(i=0; i<valuel.length; ++i){
                    subValue = value[i];
                    fullSubName = name + '[' + i +']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if(value instanceof Object) {
                for(subName in value) {
                    subValue = value[subName];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            }
            else if(value !== undefined && value !== null)
                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
        }

        return query.length ? query.substr(0, query.length - 1) : query;
    };

    $httpProvider.defaults.transformRequest = [function(data){
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];

})

Once you configured HTTP header. You need URL for HTTP method. Angular's $HTTP return promise. You can call async HTTP request if you needed.

Here is the example of code 

.service('PromisesQ',function AjaxService($http, $q){
    var ajaxService = this; 

    ajaxService.countTargetRecords = function countTargetRecords(targetXML){
        var AjaxURL =  url_dev;
        var AjaxData = 'InputParam1=input&InputParam2=anotherInput;

        return $http.post(AjaxURL, AjaxData)
                    .success(function(response){
                        return response;
                    })
                    .error(function(data, status, headers, config) {
                        console.log('[CountTargetRecords] Error '+ data);
                    })
    }

Hope this helpful.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top