Diferencia entre $ .ajax () y $ .get () y $ .load ()

¿Cuál es la diferencia entre $.ajax() y $.get() y $.load() ?

¿Qué es mejor usar y en qué condiciones?

$.ajax() es el más configurable, donde obtienes un control detallado sobre los encabezados HTTP y tal. También puede obtener acceso directo al objeto XHR utilizando este método. También se proporciona un manejo de errores ligeramente más preciso. Por lo tanto, puede ser más complicado y a menudo innecesario, pero a veces muy útil. Debe lidiar con los datos devueltos usted mismo con una callback.

$.get() es solo una abreviatura de $.ajax() pero abstrae algunas de las configuraciones, estableciendo valores predeterminados razonables para lo que oculta. Devuelve los datos a una callback. Solo permite solicitudes GET, por lo que se acompaña de la función $.post() para abstracción similar, solo para POST

.load() es similar a $.get() pero agrega funcionalidad que le permite definir en qué parte del documento se insertan los datos devueltos. Por lo tanto, realmente solo se puede usar cuando la llamada solo resultará en HTML. Se llama de forma ligeramente diferente que las otras llamadas globales, ya que es un método vinculado a un elemento DOM envuelto en jQuery en particular. Por lo tanto, uno haría: $('#divWantingContent').load(...)

Cabe señalar que todos los $.get() , $.post() , .load() son todos envoltorios para $.ajax() como se llama internamente.

Más detalles en la documentación de Ajax de jQuery: http://api.jquery.com/category/ajax/

Los métodos proporcionan diferentes capas de abstracción.

  • $.ajax() te da control total sobre la solicitud de Ajax. Debe usarlo si los otros métodos no satisfacen sus necesidades.

  • $.get() ejecuta una solicitud Ajax GET . Los datos devueltos (que pueden ser cualquier dato) se pasarán a su manejador de callback.

  • $(selector).load() ejecutará una solicitud Ajax GET y establecerá el contenido de los datos devueltos seleccionados (que deberían ser texto o HTML).

Depende de la situación qué método debe usar. Si quieres hacer cosas simples, no hay necesidad de molestarte con $.ajax() .

Por ejemplo, no usará $.load() , si los datos devueltos serán JSON, que es necesario seguir procesando. Aquí, puede usar $.ajax() o $.get() .

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

Descripción: realice una solicitud HTTP asincrónica (Ajax).

La monty completa, te permite hacer cualquier tipo de pedido de Ajax.


http://api.jquery.com/jQuery.get/

jQuery.get()

Descripción: carga datos del servidor usando una solicitud HTTP GET.

Solo le permite hacer solicitudes HTTP GET, requiere un poco menos de configuración.


http://api.jquery.com/load/

.load()

Descripción: Cargue los datos del servidor y coloque el HTML devuelto en el elemento coincidente.

Especializado para obtener datos e insertarlos en un elemento.

Muy básico pero

  • $.load() : carga un trozo de html en un contenedor DOM.
  • $.get() : $.get() si quieres hacer una llamada GET y jugar mucho con la respuesta.
  • $.post() : utilice esto si desea realizar una llamada POST y no desea cargar la respuesta a algún contenedor DOM.
  • $.ajax() : $.ajax() si necesitas hacer algo cuando XHR falla, o necesitas especificar opciones ajax (ej. caché: verdadero) sobre la marcha.

Nota importante: el método jQuery.load () no solo puede hacer peticiones GET sino también POST , si se proporciona un parámetro de datos (ver: http://api.jquery.com/load/ )

Tipo de datos : PlainObject o String Un objeto simple o cadena que se envía al servidor con la solicitud.

Método de solicitud El método POST se usa si los datos se proporcionan como un objeto; de lo contrario, se supone GET .

 Example: pass arrays of data to the server (POST request) $( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } ); 

Todos tienen razón. Las funciones .load , .get y .post son formas diferentes de utilizar la función .ajax .

Personalmente, creo que la función raw .ajax es muy confusa y prefiero usar load, get o post cuando lo necesito.

POST tiene la siguiente estructura:

 $.post(target, post_data, function(response) { }); 

GET tiene lo siguiente:

 $.get(target, post_data, function(response) { }); 

LOAD tiene lo siguiente:

 $(*selector*).load(target, post_data, function(response) { }); 

Como puede ver, existen pequeñas diferencias entre ellos, porque es la situación la que determina cuál usar. ¿Necesitas enviar la información a un archivo internamente? Use .post (esta sería la mayoría de los casos). ¿Necesita enviar la información de manera que pueda proporcionar un enlace al momento específico? Usa .get. Ambos permiten una callback donde puede manejar la respuesta de los archivos.

Una nota importante es que .load actúa de dos maneras diferentes. Si solo proporciona la url del documento de destino, actuará como un acto de obtención (y lo digo porque probé la comprobación de $_POST en el PHP llamado mientras usaba el comportamiento predeterminado de .load y detecta $_POST , no $_GET ; tal vez sería más preciso decir que actúa como .post sin ningún argumento); sin embargo, como dice http://api.jquery.com/load/ , una vez que proporcione una matriz de argumentos a la función, se ENVIARÁ la información al archivo. En cualquier caso, la función .load insertará directamente la información en un elemento DOM, que en MUCHOS casos es muy legible y muy directo; pero aún proporciona una callback si desea hacer algo más con la respuesta. Además, .load le permite extraer un determinado bloque de código de un archivo, ofreciéndole la posibilidad de guardar un catálogo, por ejemplo, en un archivo html, y recuperar partes (elementos) directamente en elementos DOM.

 $.get = $.ajax({type: 'GET'}); 

$.load() es una función auxiliar que solo se puede invocar en los elementos.

$.ajax() te da el mayor control. puede especificar si desea POSTAR datos, obtuvo más devoluciones de llamada, etc.

Todos explicaron el tema muy bien. Hay un punto más que me gustaría agregar sobre el método .load ().

Según el documento de carga, si agrega un selector con sufijo en la url de datos, no ejecutará las secuencias de comandos al cargar el contenido.

Plunker de trabajo

  $(document).ready(function(){ $("#secondPage").load("mySecondHtmlPage.html #content"); }) 

Por otro lado, después de quitar el selector en url, se ejecutarán scripts en el nuevo contenido. Prueba este ejemplo

después de eliminar # contenido en url en el archivo index.html

  $(document).ready(function(){ $("#secondPage").load("mySecondHtmlPage.html"); }) 

No existe tal característica incorporada provista por otros métodos en discusión.

Ambos se utilizan para enviar algunos datos y recibir alguna respuesta con esos datos.

OBTENER : obtener información almacenada en el servidor. (es decir, búsqueda, tweet, información de la persona). Si desea enviar información, obtenga la solicitud de envío de solicitud usando process.php?name=subroto Por lo tanto, básicamente envía información a través de url. Url no puede manejar más de 2036 char. Entonces, ¿puede recordar que no es posible para una publicación de blog?

POST : Publicar hace lo mismo que OBTENER. Registro de usuario, inicio de sesión de usuario, envío de Big Data, publicación de blog. Si necesita enviar información segura, utilice la publicación o para big data ya que no pasa por la url.

AJAX : $.get() y $.post() contienen características que son subconjuntos de $.ajax() . Tiene más configuración.

$.get () método, que es una especie de abreviatura de $.ajax() . Cuando se usa $.get () , en lugar de pasar un objeto, se pasan argumentos. Como mínimo, necesitará los dos primeros argumentos, que son la URL del archivo que desea recuperar (por ejemplo, test.txt) y una callback exitosa.