Custom XHR vs jQuery AJAX (v6)

Revision 6 of this benchmark created by Ted on September 30, 2014

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Setup

function xhr(options, callback) {
        var xhr = new XMLHttpRequest(),
            method = options.method || 'get';
    
        xhr.onreadystatechange = function() {
            if (this.readyState === 4) {
                callback(this.response || this.responseText || this.responseXML);
            }
        }
    
        xhr.onerror = function() {
            callback(null);
        }
    
        xhr.open(method, options.uri);
    
        if (options.headers) {
            Object.keys(options.headers).forEach(function(key) {
                xhr.setRequestHeader(key, options.headers[key]);
            });
        }
    
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    
        //xhr.send((options.data) ? urlstringify(options.data) : null);
    
        return xhr;
    };

Test runner

// async test
xhr({ method: 'get',
      uri: 'http://jsperf.com',
     }, function() {}
);

// async test
var request = $.ajax({
  type: "GET",
  url: "http://jsperf.com",
  success: function() {},
  data: null
});

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Tommy Bergeron on May 17, 2012
• Revision 2: published by daiyam on June 14, 2012
• Revision 3: published by Przemyslaw Ciezkowski on April 4, 2013
• Revision 5: published on April 23, 2014
• Revision 6: published by Ted on September 30, 2014