Angularjs $http ajax request slow comparing to Jquery ajax

Question

I recently started moving from jQuery to Angularjs. The issue I encountered is that angular $http call is really slow comparing to jquery ajax call. When I'm doing angular's $http requests to my server, I get responses after 1.3s to around 1.7s. But when I do simple

$.ajax({
        type: "POST",
        url: '?lang_page=1'
    })
    .done(function(data) {
    });

response times are 200ms to 300ms. I don't see to much on the Chrome Dev Tools CPU Profiler page. From what I tried to debug, it looks like the problem is in $http method, I don't have any watches that could make digest running slowly. Has anyone got similar problems ? Or is it just Angular being super slow ?

Chrome profiler view for the request: https://i.sstatic.net/R2jKx.png

Chrome profiler view for AJAX response: https://i.sstatic.net/Q8h1u.png

main.html:

<html>
    <head><script data-main="/staticfiles/js/require-patterns.js" 
            src="/staticfiles/js/bower_components/requirejs/require.js"></script>
    </head>

    <body><div ng-controller="PatternsCtrl"></div></body>
</html>

require-patterns.js:

require.config({
    paths: {
        angular: 'bower_components/angular/angular',
        jQuery: 'bower_components/jquery/dist/jquery',
    },
    shim: {
        'angular' : {
            'exports' : 'angular'
        },
        'jQuery': {
            'exports' : '$'
        },
    },
    priority: [
        "angular",
        'jQuery',
   ],
    deps: [],
    callback: null,
    baseUrl: '/staticfiles/js'
});
require([
    'angular',
    'jQuery',
    'patterns.module',
    ], function(angular, app, $) {
        var $html = angular.element(document.getElementsByTagName('html')[0]);
        angular.element().ready(function() {
            angular.bootstrap($html, ['myApp']);
        });
    }
);

patterns.module.js:

'use strict';
define([
    'angular',
    'components/patterns/patternsController'
], function(angular, pCtrl) {
    return angular.module('mymod', [
        'mymod.patterns',
    ]);
});

patternsController.js:

'use strict';
define([
    'angular'
], function(angular) {
    return angular.module('mymod.patterns', []).controller('PatternsCtrl', PatternsCtrl);

    PatternsCtrl.$inject = ['$http'];

    function PatternsCtrl($http) {
        console.log('patterns controler');
        $http({
            method: 'POST',
            url: '?lang_page=1'
        })
        .success(function(data, status) {
        });
    };
});

i work with ngResource and is super fast, although i am not sure what could be the problem in your situation, but using factory with ng-resource works great. — Igor
– Igor, Commented Mar 17, 2015 at 18:53

paul983 · Accepted Answer · 2015-03-18 16:02:57Z

2

I've found the issue. I'm using Django with Django Debug Toolbar on the backend, and angular's $http request doesn't add "X-Requested-With" header by default, where jQuery ajax request add this header. So I just added this header in angular:

angular.module('mymod', []).config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }]);

and response times in angular are now similar to jQuery response times.

answered Mar 18, 2015 at 16:02

paul983

512 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs $http ajax request slow comparing to Jquery ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related