AJAX Tutorial: Hvad AJAX er, og hvordan man bruger det

Hvad er AJAX?

AJAX står for Asynchronous JavaScript And XML . Det er ikke et programmeringssprog. Det er en teknologi til udvikling af bedre, hurtigere og interaktive webapplikationer ved hjælp af HTML, CSS, JavaScript og XML.

  1. HTML: Hypertext Markup Language (HTML) bruges til at definere strukturen i en webapplikation.
  2. CSS: Cascading Style Sheet (CSS) bruges til at give udseende og stil til en webapplikation.
  3. JavaScript: JavaScript bruges til at gøre en webapplikation interaktiv, interessant og brugervenlig.
  4. XML: Extensible Markup Language (XML) er et format til lagring og transport af data fra webserveren.

Hvad er meningen med Asynchronous i AJAX?

Asynkron betyder, at webapplikationen kunne sende og modtage data fra webserveren uden at opdatere siden. Denne baggrundsproces til afsendelse og modtagelse af data fra serveren sammen med opdatering af forskellige sektioner på en webside definerer Asynkron egenskab / funktion i AJAX.

Sådan fungerer AJAX

AJAX bruger et indbygget browser- XMLHttpRequest-objekt til at anmode om data fra en webserver og HTML DOM til at få vist eller bruge dataene.

XMLHttpRequest-objekt : Det er en API i form af et objekt, hvis metoder hjælper med overførsel af data mellem en webbrowser og en webserver.

HTML DOM : Når en webside indlæses, opretter browseren en dokumentobjektmodel på siden.

Opret et XMLHttpRequest-objekt:

var xhttp = new XMLHttpRequest();

Egenskaber for XMLHttpRequest-objekt:

readystate er en egenskab for XMLHttpRequest-objektet, der har status for XMLHttpRequest.

  • 0: anmodning ikke initialiseret
  • 1: serverforbindelse oprettet
  • 2: anmodning modtaget
  • 3: behandlingsanmodning
  • 4: anmodning færdig, og svaret er klar

`` onreadystatechange '' er en egenskab for XMLHttpRequest-objektet, der definerer en funktion, der skal kaldes, når egenskaben readyState ændres.

`` `` status '' er en egenskab for XMLHttpRequest-objektet, som returnerer statusnummeret på en anmodning

  • 200: "OK"
  • 403 forbudt"
  • 404 Ikke fundet"

XMLHttpRequest-objektmetoder: For at sende en anmodning til en webserver bruger vi de åbne () og send () -metoder for XMLHttpRequest-objektet.

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

Opret en funktionsændringsindhold () ved hjælp af 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 at ændre indholdet 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 rodmappen til webapplikationen.