Benchmark: Native XHR vs jQuery Ajax

HTML Preparation code:

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

Script Preparation code:

function showResult(data) {
    console.log(data);
}
var newUrl = "https://www.googleapis.com/discovery/v1/apis";

Tests:

Native XHR
var xhr = new XMLHttpRequest(); xhr.open("GET", newUrl, true); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { showResult(xhr); } } xhr.send();
Native XHR 2
var xhr = new XMLHttpRequest(); xhr.onload = showResult; xhr.open("GET", newUrl, true); xhr.send();
jQuery AJAX
var request = $.ajax({ type: "GET", url: newUrl, success: showResult, data: null });
AJAX Async
var request = $.ajax({ type: "GET", async: true, url: newUrl, success: showResult, data: null });
jQuery GET
var request = $.get(newUrl, showResult);
jQuery GET2
var request = $.get(newUrl).done(showResult);
jQuery GET JSON
$.getJSON(newUrl, null, showResult);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native XHR
Native XHR 2
jQuery AJAX
AJAX Async
jQuery GET
jQuery GET2
jQuery GET JSON

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark definition and explain what's being tested.

**What is being tested?**

MeasureThat.net is testing the performance of two approaches for making AJAX requests: native XMLHttpRequest (XHR) and jQuery AJAX.

The test cases are designed to measure the execution speed of each approach in different scenarios, including:

* Sending a GET request with data
* Sending a GET request without data
* Making an asynchronous request
* Using the $.get method

**Options compared**

Two options are being compared:

1. **Native XHR**: This is the traditional way of making AJAX requests using XMLHttpRequest.
2. **jQuery AJAX**: This uses the jQuery library to make AJAX requests.

**Pros and cons of each approach**

**Native XHR:**

Pros:

* Lightweight and efficient
* No dependencies on external libraries
* Can be used in most JavaScript environments

Cons:

* Requires more manual handling of request parameters and state changes
* Can be error-prone if not implemented correctly

**jQuery AJAX:**

Pros:

* Simplifies the process of making AJAX requests
* Provides a higher-level abstraction that makes it easier to write code
* Offers features like automatic data serialization and JSONP support

Cons:

* Adds an additional dependency on the jQuery library
* Can be slower than native XHR due to the overhead of creating and managing a new request object
* May not work in all JavaScript environments (e.g., some older browsers)

**Library used**

In this benchmark, jQuery is being used as the library for making AJAX requests. Specifically, the `$.ajax()` method is being used.

**Special JS feature or syntax**

None of the test cases use any special JavaScript features or syntax that are not already explained above.

**Other alternatives**

There are other ways to make AJAX requests beyond native XHR and jQuery. Some examples include:

* Fetch API: This is a modern, JavaScript-only API for making network requests.
* Axios: This is a popular third-party library for making HTTP requests.
* ActiveX: This is an older technology that uses COM objects to make web requests.

However, these alternatives are not being tested in this benchmark.

Latest run results:

Run details: (Test run date: 2025 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko

Browser/OS: IE 11 on Windows

View result in a separate tab

Test name	Executions per second
Native XHR	886.2 Ops/sec
Native XHR 2	861.7 Ops/sec
jQuery AJAX	721.2 Ops/sec
AJAX Async	722.1 Ops/sec
jQuery GET	715.0 Ops/sec
jQuery GET2	714.7 Ops/sec
jQuery GET JSON	714.9 Ops/sec

Related benchmarks:

Native XHR vs jQuery Ajax (version: 0)

Same as this: https://www.measurethat.net/Benchmarks/Show/833/13/native-xhr-vs-jquery-ajax but without some test cases since IE11 can't run them

Comparing performance of: Native XHR vs Native XHR 2 vs jQuery AJAX vs AJAX Async vs jQuery GET vs jQuery GET2 vs jQuery GET JSON

Created: 6 years ago by: Guest

Jump to the latest result

Native XHR

Native XHR 2

jQuery AJAX

AJAX Async

jQuery GET

jQuery GET2

jQuery GET JSON

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 27 days ago):