AJAX - XMLHttpRequest

XMLHttpRequest-object wordt gebruikt voor het uitwisselen van gegevens met de server.

Verstuur een verzoek naar de server

Om een verzoek naar de server te sturen, gebruiken we de open() en send() Methode:

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

Definieer het type verzoek

  • method：Verzoekt type: GET of POST
  • url：Server (bestands)locatie
  • async：true (asynchrone) of false (synchronische)
send() Verstuur een verzoek naar de server (voor GET)
send(string) Verstuur een verzoek naar de server (voor POST)

GET of POST?

GET is eenvoudiger en sneller dan POST en kan in de meeste gevallen worden gebruikt.

Maar gebruik POST altijd in de volgende situaties:

  • Cache-bestanden zijn geen optie (bij het bijwerken van bestanden of databases op de server)
  • Verstuur grote hoeveelheden gegevens naar de server (POST heeft geen groottebeperking)
  • Verstuur de gebruikersinvoer (kan onbekende tekens bevatten), POST is krachtiger en veiliger dan GET

GET-verzoek

Een eenvoudige GET-verzoek:

Voorbeeld

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

Probeer het zelf

In het bovenstaande voorbeeld kunt u een gecachte resultaat krijgen. Om dit te voorkomen, voeg een unieke ID toe aan de URL:

Voorbeeld

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

Probeer het zelf

Als u gegevens wilt verzenden met de GET-methode, voeg deze informatie toe aan de URL:

Voorbeeld

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

Probeer het zelf

POST-verzoek

Een eenvoudige POST-verzoek:

Voorbeeld

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

Probeer het zelf

Als u gegevens wilt POSTen zoals een HTML-formulier, gebruik dan setRequestHeader() Voeg een HTTP-header toe. Voer dit uit in send() Het methodedefinitie vereist de gegevens die u moet verzenden:

Voorbeeld

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

Probeer het zelf

Methode Beschrijving
setRequestHeader(header, value)

Voeg HTTP headers toe aan de verzoek

  • header：stel de headernaam in
  • value：stel de headerwaarde in

url - Bestand op de server

De methode van open(): url Parameter, de adres van het bestand op de server:

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

Het bestand kan van elk type zijn, zoals .txt en .xml, of server script bestanden zoals .asp en .php (ze kunnen op de server worden uitgevoerd voordat het antwoord wordt teruggestuurd).

Asynchrone - true of false?

Om een asynchrone verzoek te verzenden:open() methode async De parameter moet ingesteld worden op true:

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

Het verzenden van asynchrone verzoeken is een grote vooruitgang voor webontwikkelaars. Veel taken die op de server worden uitgevoerd, zijn zeer tijdrovend. Voor AJAX was dit mogelijk leidde dit tot het hangen of stoppen van de applicatie.

Door asynchrone verzending hoeft JavaScript niet te wachten op de serverreactie, maar kan in plaats daarvan:

  • Voer andere scripts uit terwijl je wacht op de serverreactie
  • Behandeling van de respons wanneer deze klaar is

onreadystatechange-eigenschap

Met behulp van het XMLHttpRequest-object kun je een functie definiëren die wordt uitgevoerd wanneer de verzoekantwoord ontvangen wordt.

Deze functie wordt aangeroepen door de XMLHttpResponse-object: onreadystatechange Gedefinieerd in de eigenschappen:

Voorbeeld

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

Probeer het zelf

Je zal in de volgende hoofdstukken meer leren over onreadystatechange.

Synchronische verzoeken

Voor het uitvoeren van synchrone verzoeken, plaats open() De derde parameter in de methode wordt ingesteld op false:

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

Soms wordt async = false gebruikt voor snelle tests. Je ziet ook synchrone verzoeken in oudere JavaScript-code.

Omdat de code wacht tot de server is voltooid, is de onreadystatechange-functie niet nodig:

Voorbeeld

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

Probeer het zelf

We raden synchrone XMLHttpRequest (async = false) af, omdat JavaScript de uitvoering stopt totdat de serverresponse gereed is. Als de server druk of traag is, kan de applicatie hangen of stoppen.

Synchronische XMLHttpRequest wordt verwijderd uit de webnormen, maar dit proces kan veel jaren duren.

Moderne ontwikkelingstools worden aanbevolen om waarschuwingen te geven voor het gebruik van synchrone verzoeken en deze situatie kan leiden tot een InvalidAccessError-exception.