NA VRH
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

JavaScript: JavaScript načini Sintaksa Spremenljivke Števila Objekti Funkcije Pogoji Zanke Nizi Datum in čas DOM Array AJAX: - xmlhttpRequest - metode objekta xmlhttpRequest - lastnost xmlhttpRequest objekta - pošiljanje zahteve strežniku - GET ali POST - Primer: XML Aplikacije - Primer: MySQL - Primer: XML (Slovenske občine) Knjižnica

AJAX

AJAX za mene predstavlja nekaj najboljšega izmed vseh spletnih orodij, saj je celoten iskalnik izdelan v AJAX-u. Že, ko sem začel oziroma, dobil idejo, da bi si izdelal spletno stran, sem razmišljal o iskalniku. Mislim, kaj ti bo spletna stran brez iskalnika, sploh, če je malo bolj obsežna. In sem iskal MySQL, da bi si izdelal neko bazo in potem naredil iskalnik, ampak mi ni šlo. Kasneje po dolgem času, ko sem se učil JavaScript, je predavatelj omenil AJAX, in to je to, to me je pripeljalo do sem.

AJAX
  1. AJAX ni programski jezik.
  2. AJAX uporablja kombinacije XMLHttpRequest (pridobivanje podatkov iz strežnika), ki je vgrajen v brskalniku, JavaScript in HTML DOM (za prikaz ali uporabo podatkov).
  3. AJAX ni ravno najboljše izbrano ime, ker za prenos podatkov uporablja XML, vendar pa je enako prenašati tekstovna besedila ali JSON.
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
    <div id="result">
        <button type="button" onclick="prikazi()">AJAX primer</button>
    </div>

    <script>
        function prikazi() {
            var prikaz = new XMLHttpRequest();
            prikaz.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            prikaz.open("GET", "celotno ime povezave kjer je dokument shranjen", true);
            prikaz.send();
        }
    </script>
    </body>
    </html>

    DATOTEKA:
    <!DOCTYPE html>
    <html lang="si">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
    </head>
    <body>
    <p>S klikom na gumb smo odprli povezavo AJAX do tega dokumenta. Ta dokument je mogoče shraniti v txt,
          html ali kaj drugega. Dokument mora biti shranjen v isti mapi kot index datoteka.</p>

    <img src="povezava do slike" alt="">
    </pre>
    </body>
    </html>
            

AJAX omogoča, da se spletne strani posodabljajo asinhrono, pomeni da samo osvežimo stran, ko so podatki posodobljeni. Vsi sodobni brskalniki podpirajo XMLHttpRequest, in se uporablja za izmenjavo podatkov s spletnim strežnikom. Pomeni, da je spletne strani mogoče posodobiti brez ponovnega nalaganja celotne strani.

Delovanje
    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
      <button type="button" onclick="primerXMLHttpRequest()">AJAX primer</button>
      <div id="primer"></div>

      <script>
        function primerXMLHttpRequest() {
            var primer = new XMLHttpRequest();
            primer.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    document.getElementById("primer").innerHTML = this.responseText;
                }
            };
            primer.open("GET", "celotno ime povezave dokumenta", true);
            primer.send();
        }
      </script>
    </body>
    </html>

    DATOTEKA:
    <!DOCTYPE html>
    <html lang="si">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <p>Smo pri drugem AJAX primeru, ki govori o objektu XMLHttpRequest, ki se uporablja za izmenjavo podatkov.
        Naredimo dokument, ki je lahko txt, img, html, php, po želji, in ga shranimo na strežnik, v ISTO mapo kot
        je index datoteka. Lokalno ne bo delal, moramo datoteko v kateri želimo demoXMLHttpRequest datoteko
        videti, dati na strežnik.</p>

    <img src="celotna povezava do slike" alt="">
    </body>
    </html>
            

Iz varnostnih razlogov sodobni brskalniki ne dovoljujejo dostopa med domenami, pomeni da mora biti XML datoteka, naložena na istem strežniku kot je index datoteka. Sodobni brskalniki lahko namesto XMLHttpRequest uporabljajo API za pridobivanje informacij iz strežnika.

METODA OPIS
new XMLHttpRequest() naredi nov XMLHttpRequest objekt
abort() prekliče trenutno zahtevo
getAllResponseHeaders() vrne informacije o glavi
getResponseHeader() vrne specifične informacije o glavi
open(metoda, url, async, uporabnik, geslo) določi zahtevo: metoda (vrsta zahteve "GET" ali "POST"), url (lokacija datoteke), async (true(asinhrono) ali false (sinhrono)), uporabnik (uporabniško ime, ki ni obvezno) in geslo (ni obvezno)
send() pošlje zahtevo strežniku, in se uporablja za zahteve "GET"
send(string) strežniku pošlje zahtevo, in se uporablja za zahteve "POST"
setRequestHeader() doda par oznak/vrednosti, glavi, ki jo želimo poslati
LASTNOSTI OPIS
onreadystatechange določi funkcijo, ki se jo pokliče, ko je lastnost readyState spremenjena
readyState
    Zadrži status XMLHttpRequest zahteve:
  1. zahteva ni inicializirana
  2. vzpostavljena je povezava s strežnikom
  3. zahtevek prejet
  4. obdelava procesa
  5. zahteva končana, in odgovor pripravljen
responseText vrne odzivne podatke kot niz (ang. String)
responseXML vrne odzivne podatke kot XML datoteka
status
    Številka stanja zahteve (v script-u if (this.readyState == 4 && this.status == 200))
  1. 200 pomeni v redu
  2. 403 je prepovedano
  3. 404 ni najdeno
  4. 1xx so informacije
  5. 2xx pomeni uspešno
  6. 3xx so preusmeritve
  7. vse številke 4xx pomenijo napako na strani odjemalca (nas)
  8. vse številke 5xx pa pomenijo napako na strani strežnika
statusText vrne besedilo o stanju (na primer "V redu" ali "Ni najdeno")

Za pošiljanje zahteve strežniku, uporabimo metodi open() in send() objekta XMLHttpRequest.

    imeSpremenljivke.open("GET", "imePovezave", true);
    imeSpremenljivke.send();
    
METODA OPIS
open(metoda, url, async) Določa vrsto zahteve
  1. metoda: vrsta zahteve GET ali POST
  2. url: ime povezave, kjer je datoteka
  3. async: true (asinhrono) ali false (sinhrono)
send() pošlje zahtevo strežniku, se uporabi GET
send(string) pošlje zahtevo strežniku, se uporabi POST

GET ali POST

GET je preprostejši in hitrejši kot POST, in je lahko uporaben v večini primerov. Zahtevo POST uporabimo kadar predpomnjena (ang. Cached) datoteka ni na voljo, ko pošiljamo večjo količino podatkov, ker POST nima omejitve podatkov. Uporabimo ga tudi, ko pošljemo uporabniški vnos, ki lahko vsebuje neznane znake (geslo), ker je bolj robusten in varen.

Prvi primer je pridobivanje podatkov z metodo GET.

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>title</title>
    </head>
    <body>
      <button type="button" onclick="zahtevaGet()">ZAHTEVAJ PODATKE Z METODO GET</button>
      <div id="zahteva"></div>

      <script>
        function zahtevaGet() {
            var primerGET = new XMLHttpRequest();
            primerGET.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    document.getElementById("zahteva").innerHTML = this.responseText;
                }
            };
            primerGET.open("GET", "celotno ime povezave dokumenta", true);
            primerGET.send();
        }
      </script>
    </body>
    </html>

    DOKUMENT:
    Ko hočemo podatke sprejeti, enostavno naredimo nov dokument, ki je lahko v txt datoteki narejen v beležnici. Dokument
    lahko naredimo kot HTML ali txt, novo ali dodatno spletno stran. Dokument moramo naložiti na strežnik, v isto mapo kot
    je index dokument, in potem povezavo preprosto kopiramo v ime spremenljivke.open("GET", "TUKAJ PRILEPIMO CELOTNO IME
    POVEZAVE/ime novega dokumenta.html (ali .txt)", true); Ko HTML dokument zaženemo lokalno ne dela nič, vse skupaj je
    potrebno naložiti na strežnik. Obe datoteki, tako index, kot tudi drugi html ali txt dokument.
            

Drugi primer je pošiljanje podatkov z metodo GET.

Tretji primer je pridobivanje podatkov z metodo POST.

Četrti primer je pošiljanje podatkov z metodo POST.

Vpiši ime:
Vpiši priimek:

Sedaj ko smo se naučili vse v zvezi z AJAX-om, in kako deluje, sem dodal še nekaj fenomenalnih primerov, ki jih lahko uporabimo za karkoli želimo. To je lahko za zbirko CD-jev, Filmov, zaposlenih v podjetju, jaz sem recimo naredil Občine v Sloveniji, in zraven dodal še iskalnik, tako da lahko poiščemo občino, ki jo želimo. V glavnem stvar je preprosta, čeprav moram priznati, da na začetku mi je šlo zelo počasi, ker nisem razumel. Stvar je takšna, da, ko nekoga poslušamo, nam je vse logično, ko želimo narediti nekaj sami, se pa vse skupaj zaplete.

Vse primere sem opisal, in jih dodal v tekstovni obliki, tako da lahko kopirate, čeprav svetujem, da jih napišete sami, ker se boste naučili veliko več. Primeri se seveda nahajajo v meniju in iskalniku.