Come inviare la richiesta di post utilizzando XMLHTTPREQUEST in JavaScript

XMLHTTPREQUEST è un'API sotto forma di oggetti utilizzati per inviare o ricevere dati dai server. Il metodo Send () di XMLHTTPREQUEST fa una richiesta al server. La richiesta è asincrona per impostazione predefinita ma può anche essere sincrona. Se la richiesta è sincrona, il metodo restituisce solo quando la risposta arriva altrimenti la risposta viene consegnata utilizzando eventi.

HMLHTTPREQUEST fa parte dell'Ajax che sono tecniche di sviluppo web che possono essere utilizzate per sviluppare app Web asincrone. Nelle pagine Web asincrone possiamo inviare e ricevere dati dai server e aggiornare le pagine Web senza ricaricare le pagine Web.

La richiesta inviata da XMLHTTPREQUEST può essere una richiesta GET o POST. Possiamo arrivare nella maggior parte dei casi, ma il post è più sicuro e dovrebbe essere utilizzato ogni volta che abbiamo grandi quantità di dati o input dell'utente sconosciuto.

Invio di una richiesta post utilizzando XMLHTTPREQUEST

Per inviare una richiesta tramite XMLHTTPREQUEST, dobbiamo prima fare un nuovo oggetto XMLHTTPREQUEST:

const richiedono = new xmlhttpRequest ();

Per inviare una richiesta, dobbiamo utilizzare i metodi Open () e Send (). Il metodo Open () richiede tre parametri che sono il metodo (get/post), l'URL (posizione del file sul server) e un valore booleano per la natura asincrona o sincrona della richiesta:

richiesta.open ("post", "file_path", true);

Per una richiesta sincrona:

richiesta.aprire ("post", "file_path", false);

Con le richieste asincroni JavaScript non attende il completamento della richiesta e può eseguire altri script mentre la richiesta viene completata. Non è consigliabile utilizzare richieste sincroni poiché l'app Web può arrestarsi completa se il server è occupato.

Prima di inviare i dati tramite il metodo Send () possiamo anche utilizzare SetRequestHeader () per inviare i dati come un modulo HTML con un nome di intestazione e un valore di intestazione:

richiesta.setrequestheader (intestazione, valore);

Ora possiamo inviare dati con un parametro opzionale che specifica il corpo della richiesta:

richiesta.inviare (corpo);

La proprietà OnreadyStateChange può essere utilizzata sull'oggetto XMLHTTPREQUEST per eseguire una funzione una volta che una risposta è stata ricevuta dal server:

richiesta.onreadystatechange =>
se questo.ReadyState == XMLHTTPREQUEST.Fatto && questo.status == 200)
// codice da eseguire una volta terminata la richiesta

;

Tutto sommato, una semplice richiesta di post asincrono utilizzando XMLHTTPREQUEST sarà qualcosa di simile:

const richiedono = new xmlhttpRequest ();
richiesta.open ("post", "file_path", true);
richiesta.setrequestheader (intestazione, valore);
richiesta.onreadystatechange =>
se questo.ReadyState == XMLHTTPREQUEST.Fatto && questo.status == 200)
// codice da eseguire una volta terminata la richiesta

;
richiesta.inviare (corpo);

Conclusione

XMLHTTPREQUEST di Ajax può essere utilizzato per inviare e ricevere dati dal server e aggiornare la pagina Web in base ad essa. Questa tecnica è oro puro per gli sviluppatori in quanto possono fare tutto questo senza dover ricaricare la pagina.