AJAX Tutorial: Hva AJAX er og hvordan du bruker det

Hva er AJAX?

AJAX står for Asynchronous JavaScript And XML . Det er ikke et programmeringsspråk. Det er en teknologi for å utvikle bedre, raskere og interaktive webapplikasjoner ved hjelp av HTML, CSS, JavaScript og XML.

  1. HTML: Hypertext Markup Language (HTML) brukes til å definere strukturen til en webapplikasjon.
  2. CSS: Cascading Style Sheet (CSS) brukes til å gi utseende og stil til en webapplikasjon.
  3. JavaScript: JavaScript brukes til å gjøre en webapplikasjon interaktiv, interessant og brukervennlig.
  4. XML: Extensible Markup Language (XML) er et format for lagring og transport av data fra webserveren.

Hva er betydningen av Asynchronous i AJAX?

Asynkron betyr at webapplikasjonen kan sende og motta data fra webserveren uten å oppdatere siden. Denne bakgrunnsprosessen med å sende og motta data fra serveren sammen med oppdatering av forskjellige seksjoner på en webside definerer Asynchronous property / feature of AJAX.

Hvordan AJAX fungerer

AJAX benytter seg av et innebygd nettleser- XMLHttpRequest-objekt for å be om data fra en webserver og HTML DOM for å vise eller bruke dataene.

XMLHttpRequest Object : Det er et API i form av et objekt hvis metoder hjelper i overføring av data mellom en nettleser og en webserver.

HTML DOM : Når en webside lastes inn, oppretter nettleseren en dokumentobjektmodell for siden.

Opprett et XMLHttpRequest-objekt:

var xhttp = new XMLHttpRequest();

Egenskaper for XMLHttpRequest-objekt:

readystate er en egenskap for XMLHttpRequest-objektet som har statusen for XMLHttpRequest.

  • 0: forespørsel ikke initialisert
  • 1: serverforbindelse opprettet
  • 2: mottatt forespørsel
  • 3: behandlingsforespørsel
  • 4: forespørsel ferdig og svaret er klart

`` onreadystatechange '' er en egenskap for XMLHttpRequest-objektet som definerer en funksjon som skal ringes når egenskapen readyState endres.

`` status '' er en egenskap for XMLHttpRequest-objektet som returnerer statusnummeret til en forespørsel

  • 200: "OK"
  • 403 Forbudt"
  • 404 ikke funnet"

XMLHttpRequest Object Methods: For å sende en forespørsel til en webserver bruker vi de åpne () og send () -metodene til XMLHttpRequest-objektet.

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

Opprett en funksjonsendring Innhold () ved hjelp av 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(); }

AJAX-eksempel for å endre innholdet på en webside:

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

Filen content.txtskal være til stede i rotkatalogen til webapplikasjonen.