Ajax - jQuery vs Fetch

js

// Varje gång man laddar en hemsida görs ett HTTP-anrop till servern. Svaret från servern är det som webbläsaren visar.
// Ett ajax-anrop är ett likadant anrop fast det görs i bakgrunden. 
// Om man öppnar webbläsarens nätverkstabb och filtrerar på Fetch/XHR kan man se 
// alla ajax-anrop som görs på hemsidan ihop med deras response, parametrar, headers osv.

// Här är ett par exempel som visar hur man gör ajax-anrop med jQuery (används typ inte längre) och fetch (det nya sättet). 
// Du kan klistra in dessa i en <script>-tagg i en html-fil och se svaret du får från jsonplaceholder.typicode.com.
// Kom ihåg att ladda in jQuery på sidan bara om du vill använda det :)

// jQuery (the old way)
$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1", // exempel-API
  // GET används för att hämta data, POST för att skriva data. 
  // PUT/PATCH för att uppdatera befintlig data, DELETE för att radera data.
  type: "GET",
  success: function (data) {
    console.log("Svar från jQuery Ajax:", data);
  },
  error: function (xhr, status, error) {
    console.error("Något gick fel:", error);
  }
});

// Fetch (the right way)
fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => {
    if (!response.ok) throw new Error("Nätverksfel");
    
    return response.json();
  })
  // I första then() kollar man efter eventuella fel i svaret här. Sen skickar man enbart json-datan i svaret vidare.
  // I denna then() bearbetar man datan i svaret. Detta hade man lika gärna kunnat göra i första...
  .then(data => {
    console.log("Svar från fetch:", data);
  })
  // Eventuella errors (tex Nätverksfel ovan) landar här så man kan hantera det (typ visa felmeddelanden och sånt tjafs).
  .catch(error => {
    console.error("Något gick fel:", error);
  });