AJAXi õpetus: mis on AJAX ja kuidas seda kasutada

Mis on AJAX?

AJAX tähistab asünkroonset JavaScripti ja XML-i . See ei ole programmeerimiskeel. See on tehnoloogia paremate, kiiremate ja interaktiivsete veebirakenduste arendamiseks, kasutades HTML-i, CSS-i, JavaScripti ja XML-i.

  1. HTML: hüperteksti märgistuskeelt (HTML) kasutatakse veebirakenduse struktuuri määratlemiseks.
  2. CSS: veebirakenduse välimuse ja stiili pakkumiseks kasutatakse CSS-i (CSS).
  3. JavaScript: JavaScripti abil muudetakse veebirakendus interaktiivseks, huvitavaks ja kasutajasõbralikuks.
  4. XML: XML (Extensible Markup Language) on vorming veebiserverist andmete salvestamiseks ja transportimiseks.

Mida tähendab asünkroonne AJAX-is?

Asünkroonne tähendab, et veebirakendus võib andmeid veebiserverist saata ja vastu võtta ilma lehte värskendamata. See serverist andmete saatmise ja vastuvõtmise taustprotsess koos veebilehe erinevate jaotiste värskendamisega määratleb AJAX-i asünkroonse omaduse / funktsiooni.

Kuidas AJAX töötab

AJAX kasutab veebiserverilt sisseehitatud XMLHttpRequest objekti, et andmete kuvamiseks või kasutamiseks veebiserverilt ja HTML DOM- ilt andmeid taotleda .

XMLHttpRequest Object : See on objekti kujul olev API, mille meetodid aitavad andmeid veebibrauseri ja veebiserveri vahel üle kanda.

HTML DOM : Veebilehe laadimisel loob brauser lehe dokumendiobjekti mudeli.

XMLHttpRequest objekti loomine:

var xhttp = new XMLHttpRequest();

XMLHttpRequest objekti atribuudid:

readystate on objekti XMLHttpRequest omadus, millel on XMLHttpRequesti olek.

  • 0: taotlust ei lähtestatud
  • 1: serveriühendus loodud
  • 2: taotlus vastu võetud
  • 3: taotluse töötlemine
  • 4: taotlus on valmis ja vastus on valmis

"onreadystatechange" on objekti XMLHttpRequest omadus, mis määratleb funktsiooni, mida kutsutakse atribuudi readyState muutumisel.

"status" on objekti XMLHttpRequest omadus, mis tagastab päringu oleku numbri

  • 200: "OK"
  • 403: "Keelatud"
  • 404: "Ei leitud"

XMLHttpRequest objektimeetodid: Veebiserverisse päringu saatmiseks kasutame objekti XMLHttpRequest meetodeid open () ja send ().

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

Funktsiooni changeContent () loomine JavaScripti abil:

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(); }

AJAX-i näide veebilehe sisu muutmiseks:

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(); }

Fail content.txtpeaks olema veebirakenduse juurkataloogis.