Fyrirlestur – Ajax

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

JSON

• JavaScript Object Notation
• Létt gagna format sem er auðvelt að lesa og skrifa, bæði fyrir menn og vélar
• Byggir á almennum gagnastrúktúrum
  • Heiti/gildi pörum (objects, dictionary, hash table o.s.fr.)
  • Röðuðum listum (array, vector o.s.fr.)

---

Munur á JSON og JS hlutum

• Lyklar verða að vera strengir, vegna frátekinna orða
• Strengir verða að vera skilgreindir með ", ekki '
• Takmarkanir á tölum, t.d. hex form ekki leyft (0xea)
• Búið að takmarka týpur, t.d. ekki undefined eða RegExp

---

JSON dæmi

{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  }
}

---

JSON útfærslur

• Höfum JSON hlut í vöfrum, node.js og í fleiri umhverfum gegnum forritasöfn
• stringify – breytir gagnahlut í JSON streng
• parse – breytir JSON streng í gagnahlut
  • Ef við reynum að breyta ólöglegum streng fáum við exception

---

const obj = {
  a: 1,
  string: 'Halló, heimur',
  obj: {
    c: [1, 2, 3],
  },
};
const json = JSON.stringify(obj);
// "{"a":1,"string":"Halló, heimur","obj":{"c":[1,2,3]}}"
const back = JSON.parse(json);

---

try {
  JSON.parse('{');
} catch (e) {
  console.log(e);
}

// SyntaxError: Unexpected end of JSON input

---

• json dæmi

---

Ajax

• Asynchronous JavaScript and XML
• Skilgreint 2005
  • Ajax: A New Approach to Web Applications
• Í dag ekki ein tækni heldur hugtakið að sækja gögn ósamstillt (async) til að koma í veg fyrir að hlaða allri síðunni aftur

---

---

XMLHttpRequest

• Upprunalega framkvæmtmeð XMLHttpRequest hlutnum
  • Fyrst skilgreindur í IE5!
• Þungt og flókið API, notar ekki promises
• Notum fetch í dag

---

fetch

• fetch er API til að eiga ajax samskipti
• Einfalt fyrir einfaldar fyrirspurnir, en getum gert flóknari með góðu API
• Notar promises

---

fetch notkun

• Búum til request, einfaldasta leiðin er einfaldlega fetch(url) sem framkvæmir GET á url og skilar Promise
• Getum líka sent inn options hlut sem annað viðfang og gert þá t.d. POST
• Fáum til baka response hlut sem við athugum status á eða hvort response.ok sé true (ef status er 200–299)

---

• Eftir að við fáum response þurfum við að ákveða hvernig við fáum gögnin
  • JSON með response.json()
  • Texta með response.text()
  • Binary gögn með response.blob()
• Skilar allt Promise

---

fetch('url')
  .then((result) => {
    if (!result.ok) {
      throw new Error('Non 200 status');
    }
    return result.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

---

eða með async await

async function fetchData() {
  try {
    const result = await fetch(url);

    if (!result.ok) {
      throw new Error('result not ok');
    }

    return await result.json();
  } catch (e) {
    console.warn('unable to fetch', e);
    return null;
  }
}

---

const options = {
  body: { /* object af post data */ },
  cache: '', /* cache header */
  headers: { /* auka headers */ },
  method: 'POST',
};

fetch('url', options);

---

• fetch dæmi

---

Vefþjónustur

• Margt fellur undir hugtakið vefþjónusta
• Í grunninn einhver samskipti milli tölva yfir net
• Verið til í einhverri mynd síðan farið var að tengja saman tölvur

---

• Geta verið á ýmsu formi
• Algengast eru REST eða RESTful þjónustur
• Líka SOAP (eldri tækni) og GraphQL (nýrri tækni)

---

REST

• REST er arkitektúrsstíll sem hunsar útfærslu og samskipti
• Frekar heimspekilegt
• Oftast notar það HTTP (methods og status codes) fyrir samskipti og JSON fyrir gögn

---

Same-origin og CORS

• Same-origin policy segir til um að ekki megi hlaða gögnum frá annari síðu nema protocol, port og host sé það sama
• Megum þó vísa í og nota JavaScript, CSS, myndir o.fl.

---

• https://foo.example.org/ má…
  • sækja https://foo.example.org/data.json
  • ekki sækja http://bar.example.org/data.json

---

Cross-origin resource sharing (CORS)

• Þar sem same-origin policy bannar sjálfgefið að sækja gögn cross-origin þurfum við leið til að geta sótt gögn á milli þjóna
  • Hvað ef við vitum af skrá á banki.is og gerum fetch request í client á hana í nafni notanda..?

---

• Cross-origin resource sharing (CORS) skilgreinir leið til að leyfa það
  • Verðum að ákveða að leyfa gögnum að vera aðgengileg og með hvaða aðferðum

---

• Setjum headera í HTTP svör (á bakenda) sem segja til um hvað má
  • Access-Control-Allow-Origin: http://example.com eða *
  • Access-Control-Allow-Methods: GET

---

• cors dæmi

---

Að vinna með URL

• url standard skilgreinir hvernig URL virkar og API tengt því
• Skilgreinir URL og URLSearchParams API

---

const s = `
  http://user:pass@www.example.org/a/b
  ?foo=bar&bar=baz#hash`;
const url = new URL(s);
console.log(url);

{
  "origin": "http://www.example.org",
  "protocol": "http:",
  "username": "user",
  "host": "www.example.org",
  "pathname": "/a/b",
  "search": "?foo=bar&bar=baz",
  "hash": "#hash"
  // …
}

---

const qs = 'category=teaching&foo=bar';
const params = new URLSearchParams(qs);

params.set('name', 'Óli');
params.delete('foo');

console.log(params.toString());
// category=teaching&nafn=%C3%B3li

---

• Þegar við viljum gera köll í vefþjónustur getum við verið að eiga við og breyta einhverjum URLum
  • const url = `${API_URL}/post`;
• Getum gert með strengjum, en fyrir flóknari slóðir, notum við URL og URLSearchParams API

---

• Viljum ekki þurfa að muna hvort við enduðum á / eða ekki
  • https://example.orgpost
  • https://example.org//post
• URL og URLSearchParams leyfa okkur að setja saman slóðir
  • const url = new URL('post', API_URL).href;

---

Stöður

Þegar gögn eru sótt yfir vefþjónustu getum við lent í mismumandi stöðum:

• loading, hvað sýnum við meðan við erum að sækja gögn? Það getur tekið allt frá örfáfum ms uppí fleiri sek
• error, hvað sýnum við ef þjónustan skilar villu?
• empty, þjónustan svaraði en við fáum „tóma“ svarið
• data, allt gekk upp

---

• fetch stöðu dæmi