Benchmark: fetch vs ajax call - updated 2021

HTML Preparation code:

<script src="https://cdnjs.cloudflare.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 = $.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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided JSON benchmark.

**Overview**

The benchmark compares the performance of two approaches: making an AJAX call using jQuery and using the native `fetch` API to make a GET request. The goal is to determine which approach is faster for fetching data from a URL.

**Script Preparation Code**

The script preparation code sets up the environment for both test cases. It defines a function `showResult` that logs the received data to the console, and it also sets up the URL for the fetch call using the `newUrl` variable.

**Html Preparation Code**

The HTML preparation code includes a reference to jQuery, which is used in the AJAX test case.

**Test Cases**

There are two test cases:

1. **Ajax**: This test case uses jQuery's AJAX method to make a GET request to the `newUrl`. The `success` callback function is set to `showResult`, which logs the received data to the console.
2. **Fetch**: This test case uses the native `fetch` API to make a GET request to the `newUrl`. The promise chain consists of:
	* Using `fetch` to send the request
	* Converting the response to JSON using `response.json()`
	* Handling errors using `.catch()`

**Library**

In both test cases, jQuery is used as the library for making the AJAX call. jQuery provides a convenient way to make HTTP requests and handle responses.

**Special JS Features/Syntax**

The use of ES6 features such as:

* Arrow functions (`function(response) { ... }`)
* Template literals (e.g., `fetch(newUrl)`)

are not specific to this benchmark, but rather demonstrate the flexibility of modern JavaScript. The `fetch` API is a built-in feature in modern browsers.

**Other Alternatives**

If you were to implement this benchmark using other approaches:

1. **XMLHttpRequest**: Instead of jQuery's AJAX method or the `fetch` API, you could use the built-in `XMLHttpRequest` object to make the request.
2. **Node.js**: You could write a Node.js script to simulate making an HTTP request and compare the performance of different libraries or approaches.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **AJAX (using jQuery)**:
	* Pros: Easy to use, well-maintained library.
	* Cons: Adds overhead due to the jQuery framework.
2. **Fetch API**:
	* Pros: Native support in modern browsers, efficient and lightweight.
	* Cons: Requires understanding of promise chains and error handling.

In general, the `fetch` API is a good choice for making HTTP requests in modern web applications, as it provides a simple and efficient way to handle responses. However, depending on your specific use case, using jQuery's AJAX method might be more suitable if you need to support older browsers or require more advanced features like JSONP.

Related benchmarks:

fetch vs ajax call - updated 2021 (version: 0)

fetch vs ajax call

Comparing performance of: Ajax vs Fetch

Created: 4 years ago by: Guest

Jump to the latest result

Ajax

Fetch

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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