2010-01-16 29 views
31

Qualcuno sa qual è la differenza tra $("#id").load e $.ajax?

+0

per ulteriori informazioni: http://stackoverflow.com/questions/3870086/difference-between-ajax-and-get-and-load – cregox

risposta

75

Vorrei chiarire le cose per voi un po ':

$.ajax() è la funzione ajax di base e di basso livello jQuery fornisce il che significa che puoi fare ciò che vuoi che tu possa lavorare conOggetto. Ma una volta, jQuery Developers pensava che in realtà oltre allo $.ajax(), potevano fornire metodi più specifici agli sviluppatori in modo che non avessero bisogno di passare più parametri per fare in modo che il metodo $.ajax() funzionasse nel modo desiderato. Ad esempio, hanno detto invece di passare come parametro a $.ajax() per indicare il tipo di dati di ritorno, hanno fornito $.getJSON() in modo da sapere che il tipo di reso previsto era json oppure invece di indicare il metodo di invio come post o get, è possibile utilizzare $.post() o $.get() rispettivamente.

Quindi load() è la stessa cosa, può aiutarti a inserire dati html nel tuo html. con il metodo load() si sa che è prevista una porzione html.

Non è bello?

Penso di essermi innamorato.

Per ulteriori informazioni, è possibile visitare jquery.com, stanno anche fornendo la loro nuova libreria e la pagina di tutorial api.

Edit:

$.ajax({ 
    type: "POST", 
    url: "some.php", 
    data: "name=John&location=Boston", 
    success: function(msg){ 
    alert("Data Saved: " + msg); 
    } 
}); 

è la stessa come di seguito:

$.post("some.php", { name: "John", time: "2pm" }, 
    function(data){ 
    alert("Data Loaded: " + data); 
    }); 

Ora, come si può vedere, è la versione semplificata di $.ajax(), per effettuare chiamate post, è necessario passare alcune informazioni sul tipo di metodo send che è post come mostrato nel primo esempio, ma invece di farlo puoi usare $.post() perché sai cosa stai facendo è post s o questa versione è più semplificata e facile da lavorare.

Ma non dimenticare qualcosa. Fatta eccezione per load(), tutti gli altri metodi ajax restituiscono XHR (istanza XmlHttpRequest) in modo da poter trattarli come se si stesse lavorando con XmlHttpRequest, in realtà si sta lavorando con esso tho :) e ma load() restituisce jQuery che significa:

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] }); 

nell'esempio precedente, è possibile iniettare facilmente l'html di ritorno nell'elemento #objectID. Non è bello? Se non restituisse jQuery, avresti dovuto lavorare con la funzione di callback in cui probabilmente ottieni il risultato come data e lo inserisci manualmente nell'elemento html che desideri. Quindi sarebbe seccante ma con il metodo $.load(), è davvero semplificato in jQuery.

$("#feeds").load("feeds.php", {limit: 25}, function(){ 
    alert("The last 25 entries in the feed have been loaded"); 
}); 

È anche possibile inviare i parametri, in modo secondo quei parametri che è possibile fare un po 'di lavoro sul server-side e inviare porzione html al client e il codice simpatico jQuery lo prende e iniettare in #feeds elemento HTML in l'esempio sopra.

+2

grazie compagno che era una descrizione perfetta. quindi .getJSON e .post e .get sono tutte chiamate ajax troppo huh? simpatico! –

+0

yeap .. sono tutte chiamate ajax, versioni più semplificate di '$ .ajax()' – Tarik

+0

Ho apportato qualche miglioramento al mio post, forse può anche aiutarti di più. Felice di aiutarti. – Tarik

3

Dalla documentazione ...

$(selector).load(..)

carico HTML da un file remoto e iniettarlo nel DOM.

$.ajax(...)

caricare una pagina remota utilizzando una richiesta HTTP. Questa è l'implementazione AJAX di basso livello di jQuery.

load è specifico per il recupero (tramite GET soltanto se sono disponibili i parametri, quindi POST viene utilizzato) una pagina HTML e direttamente inserendolo in nodi selezionati (quelle selezionate dalla $(selector) porzione di $(selector).load(...).

$.ajax(...) è un metodo più generale che permette di effettuare richieste GET e POST, e non fa nulla di specifico con la risposta.

vi incoraggio a leggere la documentazione.

+0

if .load è asincrono, quindi utilizza anche xhtmlrequestobject? –

+0

quale è la migliore documentazione su questo? è il sito web di jquery? –

+0

Tutte le richieste remote in jQuery utilizzano HttpXmlRequest o il controllo Active X a seconda dell'ambiente. E sì, la documentazione di jquery è la migliore documentazione. –

17

load() avvia una richiesta Ajax per recuperare l'HTML che, quando restituito, viene impostato sul selettore specificato.

Tutto il jQuery Ajax functions sono wrapper semplicemente per $.ajax() così:

$("#id").load(...); 

è probabilmente equivalente a:

$.ajax({ 
    url: "...", 
    dataType: "html", 
    success: function(data) { 
    $("#id").html(data); 
    } 
}); 
+0

cosa fa questo? $ ("# Id"). Html (dati)? sovrascrive il file .innerHtml con i "dati"? –

+0

quindi con .load almeno non hai bisogno di offrire un metodo riuscito/fallito ... ho ragione? –

+0

Sì. html() è equivalente a element.innerHTML = "...". load() offre un'opzione callback di successo (vedi la pagina collegata sopra) ma nessun hook di errore. – cletus

4

Un riepilogo più conciso e la differenza più importante è che $.ajax consente di impostare content-type e datatype.

Queste due sono importanti per effettuare richieste JSON o richieste XML. ASP.NET è più esigente con un campo del tipo di contenuto mancante (almeno quando si utilizza [WebMethod]) e verrà semplicemente restituito l'HTML della pagina anziché JSON.

$.load() è progettato per restituire semplicemente HTML diretto. $.ajax ti dà anche

  • caching
  • la gestione degli errori
  • filtraggio dei dati
  • di password

più altri.

0

La risposta sopra potrebbe non essere più valida alla luce dell'uso di oggetti differiti e promettenti. Credo che con .ajax puoi usare .quando non puoi farlo con .load. In breve, credo che .ajax sia più potente di .load.Ad esempio:

 some_promise = $.ajax({....}); 
     .when(some_promise).done(function(){.... }); 

È possibile ottenere un controllo più dettagliato sul caricamento HTML. C'è anche .fail e .always for failure e "non importa cosa". Non si ottiene questo carico. Spero di essere corretto su questo.

Problemi correlati