Diferencia entre $ ("# id"). Load y $ .ajax?

Question

¿Alguien sabe cuál es la diferencia entre $("#id").load y $.ajax?

Answer 1

Permítanme aclarar las cosas para usted un poco:

$.ajax() es el la función básica y de bajo nivel de Ajax jQuery proporciona lo que significa que puedes hacer lo que quieras con la que puedes trabajar con XmlHttpRequest objeto. Pero alguna vez los desarrolladores de jQuery pensaron que en realidad además de $.ajax(), podían proporcionar métodos más específicos a los desarrolladores para que no tuvieran que pasar más parámetros para hacer que el método $.ajax() funcionara de la manera que quisieran. Por ejemplo, dijeron que en lugar de pasar json como un parámetro a $.ajax() para indicar el tipo de datos devueltos, proporcionaron $.getJSON() por lo que todos sabríamos que el tipo de devolución que esperábamos era json, o en lugar de indicar el método de envío como post o get, podría usar $.post() o $.get() respectivamente.

Así que load() es lo mismo, puede ayudarte a inyectar datos html en tu html. con el método load(), sabe que se espera una porción html.

¿No es genial?

Creo que me he enamorado.

Para obtener más información, puede visitar jquery.com, incluso están proporcionando su nueva biblioteca y página de tutorial de API.

Editar:

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

es la misma de la siguiente manera:

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

Ahora bien, como se puede ver que es la versión simplificada de $.ajax(), para hacer la llamada posterior, que necesita para aprobar alguna información del tipo de método de envío que es post como se muestra en el primer ejemplo, pero en lugar de hacer esto puede usar $.post() porque sabe lo que está haciendo es post s o esta versión es más simplificada y fácil de trabajar.

Pero no se olvide de algo. A excepción de load(), todos los demás métodos ajax vuelven XHR (ejemplo XmlHttpRequest) para que pueda tratarlos como si estuviera trabajando con XmlHttpRequest, en realidad se está trabajando con Tho :) y load() pero devuelve jQuery que significa:

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

en el ejemplo anterior, puede inyectar fácilmente el html de retorno en el elemento #objectID. ¿No es genial? Si no estaba devolviendo jQuery, deberías haber estado trabajando con la función de devolución de llamada donde probablemente obtienes el resultado de un objeto como data y lo insertas manualmente en el elemento html que deseas. Por lo tanto, sería una molestia, pero con el método $.load(), está realmente simplificado en jQuery.

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

Puede incluso publicar parámetros, por lo que de acuerdo a los parámetros que se pueden hacer algún trabajo en el lado del servidor y enviar parte del HTML de vuelta al cliente y su código linda jQuery lo toma y lo inyecta en #feeds elemento html en el ejemplo justo arriba.

Answer 2

De la documentación ...

$(selector).load(..)

carga HTML a partir de un archivo remoto e inyectarla en el DOM.

$.ajax(...)

carga una página remota mediante una solicitud HTTP. Esta es la implementación de bajo nivel de AJAX de jQuery.

load es específicamente para ir a buscar (a través de GET a menos que se proporcionan parámetros, entonces la POST se utiliza) una página HTML y directamente insertándolo en los nodos seleccionados (los seleccionados por la porción de $(selector) de $(selector).load(...).

$.ajax(...) es un método más general que le permite realizar peticiones GET y POST, y no hace nada específico con la respuesta.

os animo a leer la documentación.

Answer 3

load() inicia una solicitud de Ajax para recuperar HTML que, cuando se devuelve, se establece en el selector dado.

Todo el jQuery Ajax functions son simplemente contenedores para $.ajax() manera:

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

es probablemente equivalente a:

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

Answer 4

Aquí está el código fuente de la función load: http://github.com/jquery/jquery/blob/master/src/ajax.js#L15

Como se puede ver, se trata de un $ajax con el manejo de algunas opciones. En otras palabras, un método de conveniencia.

Answer 5

Un resumen más conciso y la diferencia más importante es que $.ajax le permite establecer content-type y datatype.

Estos dos son importantes para realizar solicitudes JSON o solicitudes XML. ASP.NET es más exigente con un campo de tipo de contenido faltante (al menos cuando usa [WebMethod]) y simplemente devuelve el código HTML de la página en lugar de JSON.

$.load() está destinado a simplemente devolver HTML directamente. $.ajax también le da

• almacenamiento en caché
• manejo de errores
• filtrado de los datos
• contraseña

además de otros.

Answer 6

La respuesta anterior puede que ya no sea válida a la luz del uso de objetos diferidos y prometedores. Creo que con .ajax puedes usar .wow pero no puedes hacerlo con .load. En resumen, creo que .ajax es más poderoso que .load.Por ejemplo:

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

Obtiene un control más granular sobre la carga de html. También hay fallas y fallas siempre y casos de "no importa qué". No obtienes esto en carga. Espero estar en lo correcto en esto.