Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
fetch vs ajax call fixed
(version: 0)
Comparing performance of:
Ajax vs Fetch
Created:
5 years ago
by:
Guest
Jump to the latest result
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:
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>
Run tests (2)
Previous results
Fork
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):
Let's break down the provided JSON and explain what is tested, compared, and other considerations. **Benchmark Definition** The benchmark measures the performance difference between making an AJAX call using jQuery (`$.ajax`) versus using the `fetch` API to make a GET request. The script preparation code sets up a function `showResult` that logs the received data to the console. The HTML preparation code includes the jQuery library. **Options Compared** Two options are compared: 1. **jQuery's $.ajax**: This is an older way of making AJAX calls in JavaScript. It uses the XMLHttpRequest object internally. 2. **Fetch API**: This is a modern API introduced in HTML5 for making HTTP requests. It provides a simpler and more concise way of making requests. **Pros and Cons** **$.ajax** Pros: * Widely supported and compatible with older browsers * Allows for more fine-grained control over the request (e.g., headers, method) Cons: * Can be verbose and difficult to read * Uses the older XMLHttpRequest object, which can be slower **Fetch API** Pros: * Modern, concise syntax * Faster and more efficient than XMLHttpRequest * Supports promises and async/await syntax Cons: * Not supported in older browsers (before Chrome 5 or Firefox 19) * Requires additional setup for certain features (e.g., CORS) **Library: jQuery** jQuery is a popular JavaScript library that provides a simplified way of making AJAX calls, among other things. It's widely used and well-maintained. **Special JS Feature: Promises** The Fetch API uses promises to handle asynchronous operations. A promise represents the eventual completion (or failure) of an operation. In this benchmark, the fetch request returns a promise that is then handled using `.then()` and `.catch()` methods. **Benchmark Preparation Code** The script preparation code includes two functions: * `showResult`: logs the received data to the console * `newUrl`: defines the URL for the API request The HTML preparation code includes the jQuery library, which is used to make the AJAX call. **Other Alternatives** If you want to make a GET request without using either jQuery or the Fetch API, you could use other libraries like: * Axios: a modern promise-based HTTP client * Request: a lightweight asynchronous HTTP client Alternatively, you can also use native JavaScript functions like `XMLHttpRequest` (if supporting older browsers) or `curl` in Node.js. **Test Users** This benchmark is likely targeting developers who are interested in performance optimization and want to compare the execution times of two different approaches. The test results will help them decide which approach is faster for their specific use case.
Related benchmarks:
fetch vs ajax call
fetch vs ajax call (fixed)
new fetch vs ajax call
fetch vs ajax call - updated 2021
fetch vs ajax call V2
Comments
Confirm delete:
Do you really want to delete benchmark?