Fetch ja XHR ovat kaksi tapaa lähettää verkkopyyntöjä JavaScriptissä. Fetch on uudempi API, joka on tullut käyttöön vuodesta 2015 lähtien ja se tarjoaa modernimman ja yksinkertaisemman tavan lähettää verkkopyyntöjä. XHR (XMLHttpRequest) on vanhempi tapa lähettää verkkopyyntöjä ja se on ollut käytössä jo vuodesta 2005.

Fetch käyttää Promise-rajapintaa, joka mahdollistaa asynkronisten operaatioiden hallinnan helposti. Fetchin käyttö on yksinkertaista, sillä se sisältää vain yhden funktion, joka palauttaa Promise-olion. Tämän funktion avulla voidaan lähettää verkkopyyntöjä ja käsitellä vastauksia. Esimerkiksi:

XHR puolestaan käyttää callback-funktioita, jotka ovat hieman monimutkaisempia käyttää. XHR-olio luodaan ensin, sen jälkeen asetetaan halutut parametrit ja lähetetään verkkopyyntö. Kun vastaus saadaan, se käsitellään callback-funktiolla. Esimerkiksi:

Tai jos halutaan lähettää POST pyyntö: 

Yllä olevassa esimerkissä luodaan XHR-olio, asetetaan parametrit, kuten pyynnön URL ja lähetettävä data. Sen jälkeen pyyntö lähetetään käyttäen send()-funktiota, ja vastauksen käsittely tapahtuu callback-funktioiden onload ja onerror avulla.

Jos käytössä on moderni selain, joka tukee Fetch API:a, kannattaa ehdottomasti käyttää sitä sen yksinkertaisuuden ja tehokkuuden vuoksi. XHR puolestaan on hyödyllinen vanhemmissa selaimissa ja monimutkaisempien verkkopyyntöjen käsittelyssä.

Fetch ja XHR ovat kaksi tapaa lähettää verkkopyyntöjä JavaScriptissä. Fetch on uudempi API, joka on tullut käyttöön vuodesta 2015 lähtien ja se tarjoaa modernimman ja yksinkertaisemman tavan lähettää verkkopyyntöjä. XHR (XMLHttpRequest) on vanhempi tapa lähettää verkkopyyntöjä ja se on ollut käytössä jo vuodesta 2005.

## Fetch

Fetch käyttää Promise-rajapintaa, joka mahdollistaa asynkronisten operaatioiden hallinnan helposti. Fetchin käyttö on yksinkertaista, sillä se sisältää vain yhden funktion, joka palauttaa Promise-olion. Tämän funktion avulla voidaan lähettää verkkopyyntöjä ja käsitellä vastauksia. Esimerkiksi:

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

---

## XHR

XHR puolestaan käyttää callback-funktioita, jotka ovat hieman monimutkaisempia käyttää. XHR-olio luodaan ensin, sen jälkeen asetetaan halutut parametrit ja lähetetään verkkopyyntö. Kun vastaus saadaan, se käsitellään callback-funktiolla. Esimerkiksi:

```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('Virhe:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Pyynnön lähettämisessä tapahtui virhe.');
};
xhr.send();

```

Tai jos halutaan lähettää POST pyyntö: 

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

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

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

xhr.onerror = function() {
  console.error('Pyynnön lähettämisessä tapahtui virhe.');
};

xhr.send(data);
```

Yllä olevassa esimerkissä luodaan XHR-olio, asetetaan parametrit, kuten pyynnön URL ja lähetettävä data. Sen jälkeen pyyntö lähetetään käyttäen send()-funktiota, ja vastauksen käsittely tapahtuu callback-funktioiden onload ja onerror avulla.

---

## Kumpaa käyttää?

Jos käytössä on moderni selain, joka tukee Fetch API:a, kannattaa ehdottomasti käyttää sitä sen yksinkertaisuuden ja tehokkuuden vuoksi. XHR puolestaan on hyödyllinen vanhemmissa selaimissa ja monimutkaisempien verkkopyyntöjen käsittelyssä.

---

## Harjoittele

@embed 8fc1db6a1c9c


JavaScript Fetch ja XHR

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy HTML:n, CSS:n, JavaScriptin ja taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa opiskelijoille tarvittavat taidot ja tietämys, jotta he voivat suunnitella ja kehittää ja ymmärtää yksinkertaisia web-sovelluksia.

Tämä kurssi on johdatus web-kehitykseen ja se keskittyy verkkosivustojen peruspalikoiden, eli HTML:n, CSS:n ja JavaScriptin sekä taustajärjestelmien perusteisiin. Kurssin tavoitteena on antaa sinulle tarvittavat taidot ja tietämys, jotta voit suunnitella ja kehittää yksinkertaisia full-stack web-sovelluksia, sekä ymmärtää muiden tekemiä web-sovelluksia.

Ensimmäisessä osassa opiskellaa HTML:ää joka on verkkosivustojen rakentamisessa käytetty merkintäkieli.


Toisessa osassa opiskellaan CSS:n perusteita, kuten tyylitiedoston käyttöä, sääntöjä, selektoreita ja muotoilua. Käsitellään myös CSS:n edistyneitä ominaisuuksia, kuten animaatioita ja responsiivista suunnittelua.


Kolmannessa osassa opiskellaan JavaScriptia joka on nykyisin valtavan tärkeä työkalu sekä frontend että backend -kehityksessä ja sitä kautta myös tietoturvassa ja eettisessä hakkeroinnissa.

Viimeisessä osassa opiskellaan rakentamaan taustajärjestelmiä Python Flask sovelluskehyksellä. Opit taustajärjestelmien perusteet, kuten tietokantojen käytön, autentikoinnin, istunnonhallinnan sekä pääsynhallinnan.

Voit tehdä kurssin tehtäviä omalla koneellasi jos haluat, mutta jokaisessa koodiesimerkissä on nappi jolla voit suoraan selaimessa ajaa kyseisen koodin ja nähdä miltä sivu näyttää, tai mitä skripti tulostaa. Sinun ei siis tarvitse asentaa mitään, mutta voit jos haluat.

On suositeltavaa mutta vapaaehtoista tehdä tili replit.com palvelussa, tällöin voit vain klikata "Fork" koodiesimerkeissä niin saat niistä kopion itsellesi jolla voit leikkiä

JavaScript Fetch ja XHR

Fetch

Hakkeroinnin oppiminen alkaa tästä