AJAX - XMLHttpRequest

XMLHttpRequest-objektet bruges til at udveksle data med serveren.

Send anmodning til serveren

Hvis du vil sende en anmodning til serveren, bruger vi XMLHttpRequest-objektets open() og send() Metode:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
metode beskrivelse
open(method, url, async)

Regler anmodningstypen

  • method：Anmodningstypen: GET eller POST
  • url：Serverens (fil) placering
  • async：true（asynkron）eller false（synkron）
send() Send anmodning til serveren (brugt til GET)
send(string) Send anmodning til serveren (brugt til POST)

GET eller POST?

GET er enklere og hurtigere end POST og kan bruges i de fleste tilfælde.

Men brug altid POST i følgende situationer:

  • Cache-filer er ikke en mulighed (opdater filer eller databaser på serveren)
  • Send store mængder data til serveren (POST har ingen størrelsesbegrænsning)
  • Send brugerinput (kan indeholde ukendte tegn), POST er mere kraftfuld og sikker

GET-anmodning

En simpel GET-anmodning:

Eksempel

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

Prøv det selv

I de ovennævnte eksempler kan du muligvis få et cache-resultat. For at undgå dette skal du tilføje en unik ID til URL'en:

Eksempel

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

Prøv det selv

Hvis du skal sende information med GET-metoden, skal du tilføje disse oplysninger til URL'en:

Eksempel

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

Prøv det selv

POST-anmodning

En simpel POST-anmodning:

Eksempel

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

Prøv det selv

Hvis du vil POSTe data som en HTML-formular, skal du bruge: setRequestHeader() Tilføj en HTTP-hoved send() Metoden specificerer de data, du skal sende:

Eksempel

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

Prøv det selv

metode beskrivelse
setRequestHeader(header, value)

Tilføj HTTP-header til forespørgslen

  • header：fastsætte header-navnet
  • value：fastsætte header-værdien

url - filen på serveren

open() metoden url parametren er adressen på filen på serveren:

xhttp.open("GET", "ajax_test.asp", true);

Filen kan være af enhver type, såsom .txt og .xml, eller server scripts som .asp og .php (de kan udføre operationer på serveren, før svaret sendes tilbage).

Asynkron - true eller false?

Hvis du vil sende en forespørgsel asynkront:open() metoden async parametren skal sættes til true:

xhttp.open("GET", "ajax_test.asp", true);

At sende asynkrone forespørgsler er en stor fremskridt for webudviklere. Mange opgaver, der udføres på serveren, tager meget tid. Før AJAX kunne dette føre til, at applikationen fryser eller stopper.

Gennem asynkron sendelse behøver JavaScript ikke at vente på serverens svar, men kan i stedet:

  • Udfør anden skript, mens du venter på serverens svar
  • Behandle svar, når svaret er klar

onreadystatechange-egenskaben

Gennem XMLHttpRequest-objektet kan du definere en funktion, der skal udføres, når en forespørgsel modtager et svar.

Denne funktion udføres i XMLHttpResponse-objektets onreadystatechange defineret i egenskaben:

Eksempel

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.responseText;
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

Prøv det selv

Du vil lære mere om onreadystatechange i senere kapitler.

synkron forespørgsel

Hvis du vil udføre en synkron forespørgsel, skal du sætte open() den tredje parameter i metoden sættes til false:

xhttp.open("GET", "ajax_info.txt", false);

Async = false bruges nogle gange til hurtige tests. Du vil også se synkrone anmodninger i ældre JavaScript-kode.

Da koden venter på, at serveren er færdig, er der ikke brug for en onreadystatechange-funktion:

Eksempel

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

Prøv det selv

Vi anbefaler ikke synkrone XMLHttpRequests (async = false), fordi JavaScript vil stoppe med at udføre, indtil serveren er klar med svar. Hvis serveren er travl eller langsom, kan applikationen fryse eller stoppe.

Synkrone XMLHttpRequests fjernes fra webstandarder, men processen kan tage mange år.

Moderne udviklingsværktøjer opfordres til at give advarsler om brug af synkrone anmodninger, og når dette sker, kan der kastes en InvalidAccessError-undtagelse.