Vodič za AJAX: Što je AJAX i kako ga koristiti

Što je AJAX?

AJAX je kratica od Asinkroni JavaScript i XML . To nije programski jezik. To je tehnologija za razvoj boljih, bržih i interaktivnijih web aplikacija pomoću HTML-a, CSS-a, JavaScript-a i XML-a.

  1. HTML: Jezik za označavanje hiperteksta (HTML) koristi se za definiranje strukture web aplikacije.
  2. CSS: Cascading Style Sheet (CSS) koristi se za pružanje izgleda i stila web aplikaciji.
  3. JavaScript: JavaScript se koristi za stvaranje internetske aplikacije interaktivnom, zanimljivom i jednostavnom za upotrebu.
  4. XML: Proširivi označni jezik (XML) format je za pohranu i prijenos podataka s web poslužitelja.

Što znači asinkroni u AJAX-u?

Asinkrono znači da je web aplikacija mogla slati i primati podatke s web poslužitelja bez osvježavanja stranice. Ovaj pozadinski postupak slanja i primanja podataka s poslužitelja zajedno s ažuriranjem različitih odjeljaka web stranice definira Asinkrono svojstvo / značajku AJAX-a.

Kako AJAX radi

AJAX koristi ugrađeni objekt XMLHttpRequest u preglednik za traženje podataka s web poslužitelja i HTML DOM-a za prikaz ili upotrebu podataka.

XMLHttpRequest objekt : To je API u obliku objekta čija metoda pomaže u prijenosu podataka između web preglednika i web poslužitelja.

HTML DOM : Kada se učita web stranica, preglednik kreira objektni model dokumenta na stranici.

Stvorite objekt XMLHttpRequest:

var xhttp = new XMLHttpRequest();

Svojstva objekta XMLHttpRequest:

readystate je svojstvo XMLHttpRequest objekta koji ima status XMLHttpRequest.

  • 0: zahtjev nije inicijaliziran
  • 1: uspostavljena veza s poslužiteljem
  • 2: zahtjev primljen
  • 3: obrada zahtjeva
  • 4: zahtjev završen i odgovor je spreman

`` onreadystatechange`` `` svojstvo je XMLHttpRequest objekta koji definira funkciju koja se poziva kada se promijeni svojstvo readyState.

`` `````` svojstvo je XMLHttpRequest objekta koji vraća statusni broj zahtjeva

  • 200: "U redu"
  • 403 Zabranjeno"
  • 404 nije pronađeno"

Metode objekta XMLHttpRequest: Za slanje zahtjeva web-poslužitelju koristimo metode open () i send () objekta XMLHttpRequest.

xhttp.open("GET", "content.txt", true); xhttp.send();

Stvorite funkciju changeContent () koristeći JavaScript:

function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

Primjer AJAX za promjenu sadržaja web stranice:

The XMLHttpRequest Object

Change Content function changeContent() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("foo").innerHTML = this.responseText; } }; xhttp.open("GET", "content.txt", true); xhttp.send(); }

Datoteka content.txtbi trebala biti prisutna u korijenskom direktoriju web-aplikacije.