Benchmark: fetch vs ajax call V2

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Script Preparation code:

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

Tests:

Ajax
var request = jQuery.ajax({ type: "GET", url: newUrl, success: showResult, data: null });
Fetch
fetch(newUrl) .then( function(response) { response.json().then(function(data) { showResult(data); }); } ) .catch(function(err) { console.log('Fetch Error :-S', err); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Ajax
Fetch

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Linux

View result in a separate tab

Test name	Executions per second
Ajax	1338.4 Ops/sec
Fetch	2496.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Overview**

The benchmark compares the performance of two approaches: making an AJAX call using jQuery and making a fetch request to retrieve data from Google's API.

**Script Preparation Code**

The script preparation code is responsible for setting up the environment before running the benchmark. In this case, it defines:

1. A function `showResult` that logs the received data to the console.
2. A URL `newUrl` used in both AJAX and fetch requests.

**HTML Preparation Code**

The HTML preparation code includes a script tag that loads the jQuery library, which is used for making the AJAX call.

**Individual Test Cases**

There are two test cases:

1. **Ajax**: This test case uses the jQuery library to make an AJAX call to `newUrl`. The `jQuery.ajax` method sends a GET request with the specified URL, success callback (`showResult`), and no data.
2. **Fetch**: This test case uses the fetch API to retrieve data from Google's API at `newUrl`. It sets up a promise chain to handle both successful and error responses.

**Comparison**

The benchmark is comparing the performance of these two approaches:

* AJAX (using jQuery)
* Fetch

**Pros and Cons**

Here are some pros and cons of each approach:

### AJAX (using jQuery)

Pros:

* Well-established library with extensive documentation
* Easy to use for simple requests
* Can be used for both synchronous and asynchronous requests

Cons:

* Can add unnecessary overhead due to the library's complexity
* May not perform well with large datasets or complex requests
* Not as modern or widely adopted as fetch API

### Fetch

Pros:

* Part of the modern web platform, making it easy to use
* Lightweight and efficient compared to jQuery
* Supports both synchronous and asynchronous requests

Cons:

* Less mature than jQuery, which can lead to fewer resources available for documentation and community support
* May require more code to achieve similar functionality

**Library: jQuery**

jQuery is a popular JavaScript library used for making AJAX calls. It provides an easy-to-use API for sending HTTP requests, manipulating the DOM, and handling events.

In this benchmark, jQuery is used to make an AJAX call to Google's API. The `jQuery.ajax` method sends a GET request with the specified URL and success callback (`showResult`). This approach uses the browser's native support for XMLHTTPRequest objects under the hood.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax used in this benchmark, such as async/await or Promises.

**Other Alternatives**

If you're looking for alternatives to jQuery and the fetch API, consider:

* Axios: A popular promise-based HTTP client library that provides a simple and intuitive way to make requests.
* Modern Promise APIs (e.g., async/await): For handling asynchronous code in a more modern and concise way.

Note that these alternatives may require adjustments to your codebase and workflow.

Related benchmarks:

fetch vs ajax call V2 (version: 0)

fetch vs ajax call

Comparing performance of: Ajax vs Fetch

Created: 4 years ago by: Registered User

Jump to the latest result

Ajax

Fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):