Qual è la differenza tra XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

Come posso scoprire quale metodo è il migliore per una situazione? Qualcuno può fornire alcuni esempi per conoscere la differenza in termini di funzionalità e prestazioni?

  • XMLHttpRequest nell’object browser non elaborato che jQuery esegue il wrapping in una forma più utilizzabile e semplificata e funzionalità coerenti tra browser.

  • jQuery.ajax è un richiedente Ajax generale in jQuery che può eseguire qualsiasi tipo e richiesta di contenuto.

  • jQuery.get e jQuery.post d’altra parte possono solo emettere richieste GET e POST. Se non sai cosa sono, dovresti controllare il protocollo HTTP e imparare un po ‘. Internamente queste due funzioni usano jQuery.ajax ma usano impostazioni particolari che non devono essere impostate, semplificando così la richiesta GET o POST rispetto all’uso di jQuery.ajax . GET e POST sono comunque i metodi HTTP più utilizzati (rispetto a DELETE, PUT, HEAD o anche altri esotici raramente usati).

Tutte le funzioni di jQuery usano l’object XMLHttpRequest in background, ma forniscono funzionalità aggiuntive che non devi fare da te.

uso

Quindi, se stai usando jQuery, ti consiglio vivamente di utilizzare solo la funzionalità jQuery. Dimentica completamente XMLHttpRequest . Utilizzare le variazioni della funzione di richiesta jQuery appropriate e in tutti gli altri casi utilizzare $.ajax() . Quindi non dimenticare che esistono altre comuni funzioni relative a jQuery Ajax per $.get() , $.post() e $.ajax() . Bene, puoi semplicemente usare $.ajax() per tutte le tue richieste, ma dovrai scrivere un po ‘di codice in più, perché ha bisogno di un po’ più di opzioni per chiamarlo.

Analogia

È come se tu potessi comprarti un motore per auto che dovresti creare un’intera macchina con sterzo, freni ecc … Le case automobilistiche producono automobili complete, con un’interfaccia amichevole (pedali, volante, ecc.) quindi non devi fare tutto da solo.

Ognuno di loro utilizza XMLHttpRequest. Questo è ciò che il browser usa per fare la richiesta. jQuery è solo una libreria JavaScript e il metodo $ .ajax viene utilizzato per creare una richiesta XMLHttpRequest.

$ .post e $ .get sono solo versioni abbreviate di $.ajax . Fanno praticamente la stessa cosa ma rendono più veloce scrivere una richiesta AJAX – $.post effettua una richiesta POST HTTP e $.get effettua una richiesta HTTP GET.

jQuery.get è un wrapper per jQuery.ajax , che è un wrapper per XMLHttpRequest.

XMLHttpRequest e Fetch API (sperimentale al momento) sono gli unici in DOM, quindi dovrebbe essere il più veloce.

Ho visto molte informazioni che non sono più accurate, quindi ho creato una pagina di test in cui chiunque può provare la versione dalla versione che è la migliore in qualsiasi momento:

https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch

Dai miei test oggi emerge che solo jQuery non è una soluzione pulita o addirittura veloce, i risultati per me in mobile o desktop mostrano che jQuery è, almeno, 80% più lento di XHR2, se usi troppo ajax, in mobile ci vorrà molto tempo per caricare un sito semplice.

Anche l’uso è nel link.

jQuery.post e jQuery.get simulano i tipici carichi di pagina, ovvero, si fa clic su un pulsante di invio e si accede a una nuova pagina (o si ricarica la stessa pagina). pubblicare e differire leggermente nel modo in cui i dati vengono inviati al server (un buon articolo su di esso può essere trovato qui .

jQuery.ajax e XMLHttpRequest sono carichi di pagine simili a post e get, tranne per il fatto che la pagina non cambia. Qualunque informazione il server ritorni può essere utilizzata da javascript localmente per essere utilizzata in qualsiasi modo, inclusa la modifica del layout della pagina. Solitamente sono utilizzati per eseguire lavori asincroni mentre l’utente può comunque navigare nella pagina. Un buon esempio di ciò sarebbe la capacità di completamento automatico mediante il caricamento dinamico da un valore di database per completare un campo di testo. La differenza fondamentale tra jQuery.ajax e XMLHttpRequest è che jQuery.ajax utilizza XMLHttpRequest per ottenere lo stesso effetto ma con un’interfaccia più semplice. Se usi jQuery, ti incoraggio a continuare con jQuery.ajax.

Vecchio post. ma voglio ancora rispondere, una differenza che ho affrontato mentre lavoravo con i Web Workers (javascript)

i web worker non possono avere accesso a livello di interfaccia utente. Ciò significa che non è ansible accedere ad alcun elemento DOM nel codice JavaScript che si intende eseguire utilizzando i web worker. Non è ansible accedere a oggetti come finestra, documento e genitore nel codice web-worker.

Come sappiamo, la libreria jQuery è legata al DOM HTML e consente di violare la regola “nessun accesso DOM”. Questo può essere un po ‘ complicato perché metodi come jQuery.ajax, jQuery.post, jQuery.get non possono essere utilizzati nei web worker. Fortunatamente, puoi usare l’object XMLHttpRequest per fare richieste Ajax.

Per quanto riguarda i metodi jQuery, .post e .get semplicemente fanno .ajax internamente, il loro scopo è quello di astrarre alcune delle opzioni non necessarie di .ajax e fornire alcuni valori predefiniti appropriati per quel tipo di richiesta rispettivamente.

Dubito che ci sia molta differenza nelle prestazioni tra nessuno dei 3.

Il metodo .ajax per sé fa un XMLHttpRequest, sarà fortemente ottimizzato come per il resto di jQuery, ma probabilmente non sarà efficiente come se tu stessi adattando l’intera interazione tu stesso .. ma questa è la differenza tra scrivere un sacco di codice o scrivere jQuery.ajax .