Marija Gorbunova portfoolio TARpv23

VEEBITEENUSED

SOAP ja REST.

Mis on nende erinevus?

SOAP on standard, mis kirjeldab sõnumite vormingut, mida veebiteenus ja selle klient üksteisega vahetavad. REST on aga kogumik mittekohustuslikke soovitusi (best practices), kuidas hästikäituvad rakendused võiksid andmeid üle veebi (see tähendab kasutades HTTP protokolli) vahetada ja igal veebiteenuse ehitajal on RESTist oma spetsiifiline nägemus, kuigi suures osas nad kattuvad.

REST API näide:

GET /api/products/123
Host: example.com

Serveri vastus võib olla JSON-vormingus:

{
  "id": 123,
  "name": "Laptop",
  "price": 1200
}

SOAP-päringu näide:



<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:web="http://example.com/webservices">
   <soapenv:Header/>
   <soapenv:Body>
      <web:GetProductDetails>
         <web:ProductId>123</web:ProductId>
      </web:GetProductDetails>
   </soapenv:Body>
</soapenv:Envelope>

Serveri vastus on samuti XML-vormingus:



<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/">
   <soapenv:Body>
      <web:GetProductDetailsResponse>
         <web:Product>
            <web:Id>123</web:Id>
            <web:Name>Laptop</web:Name>
            <web:Price>1200</web:Price>
         </web:Product>
      </web:GetProductDetailsResponse>
   </soapenv:Body>
</soapenv:Envelope>

H2: Andmete lugemine ja töötlemine JSON andmevahetusformaadist

Ülesande eesmärk on õppida töötama objektide ja massiividega JavaScriptis, pääsema ligi nende omadustele ja väljastama andmeid HTML-is mallide abil.

Esmalt lõin nimekirja (massiivi) , mis sisaldab objekte koos teabega. See on ühe objekti massiiv, mis kirjeldab masinat:

const myjson = [
  {
    Car: {
      color: "black",
      "Tinted windows": true,
      Mark: "Nissan",
      "Roof cargo": null,
      Audiosystem: "Radio, Appleplay",
      Accessories: "navigation system, self drive system, luggage cover,",
      image:
        "https://photoref.carboatservices.fr/TklTU0FO/SlVLRQ==/85e3bcf7b9489f53ef370a0af047a012/MQ==/6a317e5a1612b2df627cd32f4929b4d3.png",
    },
  },
];

Enne andmete väljastamist peab HTML-dokumendis olema element id=”app”, kuhu ma info paigutan.

<div id="app"></div>

Seejärel kasutasin JavaScripti, et saada element id=”app” ja lisada sellesse HTML-kood, mis sisaldab väärtusi js-faili objektist.

document.getElementById("app").innerHTML = `
    <div id="json">
      <h1>Car properties</h1>
      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">
      <p>Color: ${myjson[0].Car.color}</p>
      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
      <p>Wheels: ${myjson[0].Car.Wheels}</p>
      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}</p>
      <p>Audiosystem: ${myjson[0].Car.Audiosystem}</p>
      <p>Accessories: ${myjson[0].Car.Accessories}</p>
    </div>
  `;
  • Iga sisestus ${…} on viide objekti omadusele.
  • myjson[0] on massiivi esimene objekt.
  • myjson[0].Car on objekt, mis sisaldab auto omadusi.

Terve kood

const myjson = [
  {
    Car: {
      color: "black",
      "Tinted windows": true,
      Mark: "Nissan",
      "Roof cargo": null,
      Audiosystem: "Radio, Appleplay",
      Accessories: "navigation system, self drive system, luggage cover,",
      image:
        "https://photoref.carboatservices.fr/TklTU0FO/SlVLRQ==/85e3bcf7b9489f53ef370a0af047a012/MQ==/6a317e5a1612b2df627cd32f4929b4d3.png",
    },
  },
];

document.getElementById("app").innerHTML = `
    <div id="json">
      <h1>Car properties</h1>
      <img src="${myjson[0].Car.image}" alt="Car image" style="max-width:300px; display:block; margin-bottom:10px;">
      <p>Color: ${myjson[0].Car.color}</p>
      <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
      <p>Wheels: ${myjson[0].Car.Wheels}</p>
      <p>Roof cargo: ${myjson[0].Car["Roof cargo"]}</p>
      <p>Audiosystem: ${myjson[0].Car.Audiosystem}</p>
      <p>Accessories: ${myjson[0].Car.Accessories}</p>
    </div>
  `;