Come effettuare una chiamata ajax in javascript?
In questo post, vedremo cos'è l'Ajax e come fare una chiamata ajax in JavaScript con l'aiuto di un esempio.
Cos'è l'Ajax?
Ajax è diventato popolare nel 2005 quando Google lo ha messo nel loro suggerimento di Google e sta per JavaScript asincrono e XML. XML sta per un linguaggio di markup estensibile che viene utilizzato per crittografare i messaggi che possono essere letti da esseri umani e macchine. XML è simile a HTML, ma ti consente di creare e personalizzare i tuoi tag. La funzione di AJAX è quella di trasmettere le richieste a un server e quindi ricevere dati da quel server in modo asincrono.
Il vantaggio di Ajax è che svolge la sua funzione senza la necessità di rinfrescare l'intera pagina. Ad esempio, quando si digita qualcosa da cercare nella barra di ricerca di Google, con ogni tasto Premere la barra di ricerca effettua chiamate Ajax e l'utente riceve suggerimenti senza effettivamente aggiornare la pagina.
Va notato che l'AJAX comunica con il server utilizzando l'oggetto XMLHTTPREQUEST, JavaScript/Dom per effettuare richieste e XML come meccanismo di trasmissione dei dati.
L'Ajax viene attivato con un evento e quindi esegue la sua funzionalità creando prima un XMLHTTPREQUEST oggetto e quindi inviare il file Httprequest al server dove il Httprequest viene elaborato e viene generata una risposta che viene quindi inviata al browser con alcuni dati. Il browser elabora i dati restituiti e aggiorna il contenuto della pagina utilizzando JavaScript.
Ora che sappiamo cos'è l'Ajax e come effettuare una chiamata Ajax usando JavaScript.
Ajax Call usando JavaScript
In questo esempio, inizializzamo prima l'oggetto XMLHTTPREQUEST che viene utilizzato per comunicare con il server o per metterlo semplicemente, fare una chiamata AJAX. XMLHTTPREQUEST ha molti metodi integrati che possiamo usare per manipolare o giocare con il server inviando, interrompendo le risposte e ricevendo dati dal server. Ci connetteremo a un'API falsa gratuita per testare la nostra chiamata Ajax. Il collegamento dell'API che useremo è di seguito:
https: // jsonplaceholder.tipicode.com/
Di seguito è riportato il codice completo per effettuare una chiamata AJAX:
functionmyfunc ()// Inizializzazione dell'oggetto XMLHTTPREQUEST
varxhttp = newxmlhttpRequest ();
// stabilisci connessione con API falsa
varurl = 'https: // jsonplaceholder.tipicode.com/todos/1 ';
// Ottieni API dall'URL
xhttp.aperto ("get", url, vero);
// Quando la richiesta ha esito positivo la funzione di seguito
xhttp.onreadystatechange = function ()
// Se la richiesta è completa e di successo
se questo.ReadyState == 4 && questo.status == 200)
console.registro (questo.risposta);
// Invia richiesta
xhttp.Inviare();
// chiama la funzione myfunc
myFunc ();
Nel codice sopra, in primo luogo, abbiamo inizializzato una funzione con il nome di myfunc (), E all'interno di questa funzione, abbiamo creato un XMLHTTPREQUEST oggetto. Successivamente, stabiliamo la connessione con un'API usando un URL. Per ottenere l'API usiamo il xhttp.aprire() metodo e passare il metodo HTTP OTTENERE e il URL. Il metodo GET viene utilizzato quando otteniamo alcuni dati da un server e il INVIARE Il metodo viene utilizzato quando stiamo scrivendo o aggiornando i dati sul server.
Ora quando la richiesta finirà di eseguire e se avrà successo, il onreadystatechange L'evento eseguirà dove stiamo utilizzando una condizione che se la richiesta è completa e la richiesta ha avuto esito positivo, registri console i dati. Il codice di stato 200 viene utilizzato, il che significa ok. IL 400 Codice di stato significa errore e il file 300 Codice di stato significa reindirizzare a una pagina. Il prossimo passo è inviare la richiesta utilizzando il metodo Send ().
Alla fine, chiamiamo la funzione MyFunc () e vedremo il seguente output nel registro della console:
Il codice di stato visto negli strumenti per sviluppatori è 200, il che significa OK:
Conclusione
Ajax sta per JavaScript asincrono e XML in cui XML viene utilizzato per crittografare i messaggi realizzati in formato leggibile per esseri umani e macchine, tranne per il fatto che XML ti consente di personalizzare i tuoi tag. Ajax consente di trasmettere i dati al server senza dover aggiornare l'intera pagina. Esegue il suo funzionamento in modo asincrono quindi migliorando la velocità poiché il codice non deve attendere che il codice precedente completi la sua esecuzione. In JavaScript, l'oggetto XMLHTTPREQUEST viene utilizzato per effettuare una chiamata AJAX.
In questo post, in primo luogo, abbiamo discusso di cosa sia l'Ajax e poi ha continuato a discutere su come effettuare una chiamata Ajax in JavaScript usando l'oggetto XMLHTTPREQUEST.