Hvordan sende postforespørsel ved hjelp av XMLHttpRequest i JavaScript

XmlhttpRequest er et API i form av objekter som brukes til å sende eller motta data fra servere. Send () -metoden til XMLHTTPRequest foretar en forespørsel til serveren. Forespørselen er asynkron som standard, men kan også være synkron. Hvis forespørselen er synkron, returnerer metoden bare når responsen kommer ellers leveres svar ved hjelp av hendelser.

HMLHTTPREQUEST er en del av Ajax som er nettutviklingsteknikker som kan brukes til å utvikle asynkrone webapper. På asynkrone websider kan vi sende og motta data fra servere og oppdatere websider uten å laste inn websidene på nytt.

Forespørselen sendt av xmlhttpRequest kan enten være en get eller etter forespørsel. Vi kan få i de fleste tilfeller, men post er sikrere og bør brukes når vi har store datamengder eller ukjent brukerinngang.

Sende en postforespørsel ved hjelp av XMLHttpRequest

For å sende en forespørsel via XMLHttpRequest, må vi først lage et nytt XMLHTTPRequest -objekt:

const Request = new XmlHttpRequest ();

For å sende en forespørsel må vi bruke Open () og Send () -metodene. Open () -metoden tar tre parametere som er metoden (GET/POST), URL (filplassering på serveren) og en boolsk verdi for asynkron eller synkron karakter av forespørselen:

be om.Åpne ("Post", "File_Path", True);

For en synkron forespørsel:

be om.Åpne ("Post", "File_Path", falsk);

Med asynkrone forespørsler venter ikke JavaScript på at forespørselen skal fullføre og kan kjøre andre skript mens forespørselen er fullført. Det anbefales ikke å bruke synkrone forespørsler, da webappen kan stoppe fullstendig hvis serveren er opptatt.

Før vi sender dataene etter Send () -metoden, kan vi også bruke SetRequestHeader () til å sende dataene som en HTML -skjema med et overskriftsnavn og en overskriftsverdi:

be om.setRequestheader (header, verdi);

Nå kan vi sende data med en valgfri parameter som spesifiserer forespørselen:

be om.send (kropp);

OnreadyStateChange -egenskapen kan brukes på XMLHTTPRequest -objektet for å utføre en funksjon når en respons er mottatt fra serveren:

be om.onreadyStateChange =>
hvis dette.ReadyState == XMLHttpRequest.Ferdig && dette.status == 200)
// kode som skal utføres når forespørselen er ferdig

;

Alt i alt vil en enkel asynkron postforespørsel ved bruk av xmlhttpRequest se ut som dette:

const Request = new XmlHttpRequest ();
be om.Åpne ("Post", "File_Path", True);
be om.setRequestheader (header, verdi);
be om.onreadyStateChange =>
hvis dette.ReadyState == XMLHttpRequest.Ferdig && dette.status == 200)
// kode som skal utføres når forespørselen er ferdig

;
be om.send (kropp);

Konklusjon

Ajaxs XMLHttpRequest kan brukes til å sende og motta data fra serveren og oppdatere websiden i henhold til den. Denne teknikken er rent gull for utviklere, da de kan gjøre alt dette uten å måtte laste inn siden på nytt.