Asinchroninis JavaScript ir XML

Parengė: Martynas Kašelionis

From zero to hero

Ajax 

Apie AJAX

Tradicinių svetainių atnaujinimas(reload) našyklėje realizuotas kaskart kreipiantis į serverį.

Pavyzdžiui, užpildžius anketą (ar formą), kreipiamasi į serverį ir užkraunamas naujas puslapis. Tokiu būdu bereikalingai iššvaistomi resursai, nes didelė dalis informacijos nepakinta ir siunčiama kaskart iš naujo. 

 

AJAX svetainės gali siųsti užklausas serveriui, gauti atsakymą tam tikra apsibrėžta forma (SOAP ar kita XML paremta), bei naudojant JavaScript programavimą atnaujinti tik reikiamą puslapio dalį. 

Apie AJAX

AJAX arba Asinchroninis JavaScript ir XML programavimas – terminas, apibrėžiantis svetainių programavimo technologiją, naudojančią šias priemones maksimaliam interaktyvumui pasiekti:

• HTML  bei stilius (Cascading Style Sheets) informacijos vaizdavimui
• Dokumento Objektinį Modelį (DOM) bei JavaScript kalbą dinamiškam vaizdavimui bei interaktyvumui
• XML, XSLT ir XMLHttpRequest objektą asinchroniniam duomenų apsikeitimui su serveriu (AJAX tam galėtų naudoti ir kitas technologijas).

Asinchroninis JavaScript

Sinchroninis JavaScript, kai  vykdoma pirma kodo eilutė, paskui antra ir t.t.

 

Asinchroninis JavaScript, kai antra kodo eilutė, vykdoma nesibaigus pirmos kodo eiluės vykdymui.

XML

<asmenys>

  <asmuo pasonumeris="MP123456">

    <vardas>Petras</vardas>

    <pavarde>Petraitis</pavarde>

  </asmuo>

  <asmuo pasonumeris="PK123456">

    <vardas>Jonas</vardas>

    <pavarde>Jonaitis</pavarde>

  </asmuo>

  <papildoma_informacija x="123"/>

</asmenys>

JSON

JSON (JavaScript Object Notation) yra atviro standarto formatas, perduodantis duomenų objektus, sudarytus iš atributo ir reikšmės porų, lengvai skaitomame tekste.

Tai yra pirminis asinchroninio naršyklės/serverio bendravimo (AJAX) duomenų formatas.

Ajax veikimo principas

Ajax veikimo principas

HTML, XML, JSON arba plain tekstas, gali būti užkrauti, kada reikia ir toje vietoje, kur reikia.

Vienas iš būdų, kaip realizuoti Ajax funkcionalumą, naudoti XMLHttpRequest API arba Fetch API.

Šios aukščiau paminėtos technologijos bendrauja su serveriu siunčiant HTTP užklausas, formatuoja duomenis prieš atvaizdavimą ir juos atvaizduoja.

Ajax veikimo principas

  1. Sukuriamas  XMLHTTP užklausos objektas

Pasiruošimo būsena.

  2. Sukuriama callback funkcija

Funkcija, kuri apdoroja atsakymą ir atnaujina HTML.

  3. Atidaroma užklausa

Nurodomas siuntomo būdas (GET arba POST) ir paduodamas URL

  4. Siunčiama užklausa

Ajax veikimo principas

XMLHttpRequest.readyState

Būsena:

• 200: "OK"
• 403: "Forbidden"
• 404: "Page not found"
• kt.

XMLHttpRequest.readyState

JSON parsinimas

JSON.parse();

Pvz:

JSON.parse(xhr.responseText);

JSON esantys duomenys sudedami į masyvą.

Užduotis

Pagal JSON failą atvaizduoti mokinių HTML sąrašą. Jeigu mokinio klaseje nera, šalia jo vardo  turi būti atsirasti raudonas ženkliukas rodantis, kad jis yra neaktyvus.

Mokinių JSON