jQuery AJAX och HTTP Metoder

AJAX står för ”asynchronous JavaScript and XML” och är ett sätt för dig som webbutvecklare att bygga asynkrona webbappar/webbplatser. En asynkron applikation behöver inte stanna upp och vänta på att data skickas/tas emot utan kan fortsätta användas under ett pågående anrop mot server.

Läs mer om AJAX på Wikipedia

Detta har många fördelar, inte minst att användare upplever din app/sajt som snabbare och mer ”modern” då den inte hänger sig lika ofta som en synkron applikation hade gjort.

En annan fördel med att hämta och skicka data via AJAX är att det sänker mängden inital data som en applikation behöver för att starta upp. I praktiken betyder det att din app/sajt laddar betydligt snabbare initialt (med en liten mängd data) och sedan hämtar/skickar den data först när det behövs.

Sammanfattning av AJAX styrkor och svagheter.

jQuery kommer med inbyggd AJAX functionalitet, som oftast används genom $.ajax() metoden. Med $.ajax() kan du skicka olika typer av HTTP anrop och genom dem, tillsammans med data, uttrycka vad du vill göra.

Vad som är väldigt viktigt att komma ihåg med AJAX är att den som sagt kör asynkront. Detta betyder att du inte vet när ett anrop är klart (kan ibland ta lång tid på sig), och om det kommer att lyckas. För att lösa detta använder du ”callbacks”, functioner som körs först när anropet är klart. I $.ajax() kallas de för ”.done()” och ”.fail()”.

jQuery $.ajax()

HTTP methods

De viktigaste metoderna att kunna är: POST (create), GET (read), PUT (update), och DELETE (delete). Dessa fyra metoder tillsammans kallas även för CRUD (Create, Read, Update, Delete), som är en hörnsten i REST som vi ska titta på nästa vecka.

POST (Create) anrop skickar ingen data i sin URL utan endast i sin ”payload” (datapaket). Med $.ajax() representeras detta i ”data” egenskapen.

$.ajax({
  method: "POST",
  // the destination (route) of this request
  // POST (Create) an item from the data we send
  url: "/api/item",
  // tell the server we want to recieve JSON
  dataType: "json",
  // "data" contains the request "payload" to the server
  data: { name: "John", location: "Boston" }
})
.done(function(response) {
  // a function that runs when a request is successful
  ourSuccessFunc(response);
})
.fail(function(error) {
  // a function that runs when a request fails.
  ourErrorFunc(error);
});

GET (Read) anrop skickar endast data i sin URL. Med $.ajax() representeras detta i ”url” egenskapen.

$.ajax({
  method: "GET",
  // the destination (route) of this request
  // example: GET (Read) ID 1
  url: "/api/item/1",
  // tell the server we want to recieve JSON
  dataType: "json",
  // GET has no payload
  // data: {}
})
.done(function(response) {
  // a function that runs when a request is successful
  ourSuccessFunc(response);
})
.fail(function(error) {
  // a function that runs when a request fails.
  ourErrorFunc(error);
});

PUT (Update) anrop skickar data i sin URL och i sin payload. Med $.ajax() representeras detta i ”url” egenskapen och i data egenskapen.

$.ajax({
  method: "PUT",
  // the destination (route) of this request
  // PUT (Update) ID 1 from the data we send
  url: "/api/item/1",
  // tell the server we want to recieve JSON
  dataType: "json",
  // "data" contains the request "payload" to the server
  data: { name: "Jonas", location: "Malmö" }
})
.done(function(response) {
  // a function that runs when a request is successful
  ourSuccessFunc(response);
})
.fail(function(error) {
  // a function that runs when a request fails.
  ourErrorFunc(error);
});

DELETE (Delete) anrop skickar endast data i sin URL. Med $.ajax() representeras detta i ”url” egenskapen.egenskapen.

$.ajax({
  method: "DELETE",
  // the destination (route) of this request
  // example: DELETE (Delete) ID 1
  url: "/api/item/1",
  // tell the server we want to recieve JSON
  dataType: "json",
  // DELETE has no payload
  // data: {}
})
.done(function(response) {
  // a function that runs when a request is successful
  ourSuccessFunc(response);
})
.fail(function(error) {
  // a function that runs when a request fails.
  ourErrorFunc(error);
});

Med dessa fyra olika HTTP metoder kan vi kommunicera till vår server vad vi vill göra (Update) med vilken entitet (ID 1) och vilken data som ska användas (data: { name: ”Jonas”, location: ”Malmö” }) för att göra detta.

0 votes