Fetch and XHR are two ways to send network requests in JavaScript. Fetch is a newer API that has been available since 2015 and it provides a more modern and simpler way to send network requests. XHR (XMLHttpRequest) is an older way to send network requests and it has been in use since 2005.

The Fetch uses the Promise interface, which enables easy management of asynchronous operations. The use of Fetch is simple, as it contains only one function that returns a Promise object. With this function, network requests can be sent and responses can be handled. For example:

XHR, on the other hand, uses callback functions, which are a bit more complicated to use. First, an XHR object is created, then desired parameters are set, and a network request is sent. When the response is received, it is processed with a callback function. For example:

In the example above, an XHR object is created, parameters such as request URL and data to be sent are set. Then the request is sent using the send() function, and the response is handled using the callback functions onload and onerror.

If you have a modern browser that supports the Fetch API, it is highly recommended to use it due to its simplicity and efficiency. XHR, on the other hand, is useful in older browsers and for handling more complex network requests.

Fetch and XHR are two ways to send network requests in JavaScript. Fetch is a newer API that has been available since 2015 and it provides a more modern and simpler way to send network requests. XHR (XMLHttpRequest) is an older way to send network requests and it has been in use since 2005.

## Fetch

The Fetch uses the Promise interface, which enables easy management of asynchronous operations. The use of Fetch is simple, as it contains only one function that returns a Promise object. With this function, network requests can be sent and responses can be handled. For example:

```javascript
fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
```

---

## XHR

XHR, on the other hand, uses callback functions, which are a bit more complicated to use. First, an XHR object is created, then desired parameters are set, and a network request is sent. When the response is received, it is processed with a callback function. For example:

```javascript
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('An error occurred while sending the request.');
};
xhr.send();

```

Or if we want to send a POST request:

```javascript
const xhr = new XMLHttpRequest();
const url = 'https://jsonplaceholder.typicode.com/posts';
const data = JSON.stringify({ title: 'Title', body: 'Content' });

xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log(xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error('An error occurred while sending the request.');
};

xhr.send(data);
```

In the example above, an XHR object is created, parameters such as request URL and data to be sent are set. Then the request is sent using the send() function, and the response is handled using the callback functions onload and onerror.

---

## Which one to use?

If you have a modern browser that supports the Fetch API, it is highly recommended to use it due to its simplicity and efficiency. XHR, on the other hand, is useful in older browsers and for handling more complex network requests.

---

## Practice

@embed 8fc1db6a1c9c


JavaScript Fetch and XHR

This course is an introduction to web development and focuses on the basics of HTML, CSS, JavaScript and backend systems. The aim of the course is to provide students with the necessary skills and knowledge to design, develop and understand simple web applications.

This course is an introduction to web development and focuses on the basics of building websites, namely HTML, CSS, JavaScript, and fundamentals of backend systems. The goal of the course is to provide you with the necessary skills and knowledge to design and develop simple full-stack web applications, as well as understand web applications made by others.

In the first part, HTML is studied, which is a markup language used in building websites.


The second part covers the basics of CSS, such as the use of style sheets, rules, selectors, and formatting. It also covers advanced features of CSS, such as animations and responsive design.

In the third part, we will study JavaScript, which is currently an incredibly important tool in both frontend and backend development, and thus also in cybersecurity and ethical hacking.

In the final part, we will learn how to build back-end systems using the Python Flask framework. You will learn the basics of back-end systems, such as using databases, authentication, session management, and access control.

You can do the course exercises on your own computer if you want, but each code example has a button that allows you to directly run the code in the browser and see what the page looks like or what the script prints. So you do not need to install anything, but you can if you want.

It is recommended but optional to create an account on replit.com service. In that case, you can just click "Fork" on the code examples to make a copy for yourself to play with

JavaScript Fetch and XHR

Fetch

Learn to hack — start here