AJAX - XMLHttpRequest

XMLHttpRequest-objektet används för att utbyta data med servern.

Skicka förfrågan till servern

För att skicka förfrågan till servern använder vi XMLHttpRequest-objektets open() och send() Metod:

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

Bestäm förfrågans typ

  • method：Förfrågans typ: GET eller POST
  • url：Serverns (fil) plats
  • async：true (asynkron) eller false (synkron)
send() Skicka förfrågan till servern (används för GET)
send(string) Skicka förfrågan till servern (används för POST)

GET eller POST?

GET är enklare och snabbare än POST och kan användas i de flesta fall.

Men använd alltid POST i följande fall:

  • Cache-filer är inte ett alternativ (uppdatera filer eller databaser på servern)
  • Skicka stora mängder data till servern (POST har ingen storleksbegränsning)
  • Skicka användarinput (kan innehålla okända tecken), POST är kraftfullare och säkrare än GET

GET-förfrågan

En enkel GET-förfrågan:

Exempel

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

Prova själv

I de ovanstående exemplen kan du få ett cachat resultat. För att undvika detta, lägg till en unik ID till URL:en:

Exempel

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

Prova själv

Om du behöver skicka information med GET-metoden, lägg till dessa informationer till URL:en:

Exempel

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

Prova själv

POST-förfrågan

En enkel POST-förfrågan:

Exempel

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

Prova själv

Om du vill POST data som ett HTML-formulär, använd setRequestHeader() Lägg till en HTTP-huvud. Vänligen använd send() Metoden specificerar de data som du behöver skicka:

Exempel

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

Prova själv

metod beskrivning
setRequestHeader(header, value)

Lägg till HTTP-header till förfrågan

  • header：ange header-namnet
  • value：ange header-värdet

url - filen på servern

open() metoden url parametern är adressen till filen på servern:

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

Filen kan vara av vilket typ som helst, som .txt och .xml, eller server-side skriptfil, som .asp och .php (de kan köra operationer på servern innan de skickar tillbaka ett svar).

Asynkront - true eller false?

För att skicka förfrågningar asynkront:open() metoden async parametern måste sättas till true:

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

Att skicka asynkrona förfrågningar är en stor framgång för webbutvecklare. Många operationer som utförs på servern tar mycket tid. Innan AJAX kunde detta orsaka att applikationen fryser eller stannar.

Genom att skicka asynkront behöver JavaScript inte vänta på serverns svar utan kan:

  • Kör andra skript medan du väntar på serverns svar
  • Hantera svar när det är klart

onreadystatechange-egenskapen

Genom XMLHttpRequest-objektet kan du definiera vilken funktion som ska köras när en förfrågan mottar ett svar.

Denna funktion är i XMLHttpResponse-objektets onreadystatechange definieras i egenskapen:

Exempel

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

Prova själv

Du kommer att lära dig mer om onreadystatechange i senare kapitel.

synkrona förfrågningar

För att utföra synkrona förfrågningar, vänligen sätt open() den tredje parametern i metoden sätts till false:

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

Async = false används ibland för snabba tester. Du kommer också att se synkrona förfrågningar i äldre JavaScript-kod.

Eftersom koden väntar på att servern ska bli klar behöver du inte en onreadystatechange-funktion:

Exempel

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

Prova själv

Vi rekommenderar inte synkrona XMLHttpRequest (async = false), eftersom JavaScript kommer att stoppa att köra tills svaret från servern är klart. Om servern är upptagen eller långsam kommer applikationen att hänga eller stanna.

Synkrona XMLHttpRequest kommer att tas bort från webbstandarder, men processen kan ta många år.

Moderna utvecklingsverktyg uppmuntras att varna för användning av synkrona förfrågningar och kan kasta InvalidAccessError-undantag när detta inträffar.