¿Cuál es la diferencia entre XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get?


121

¿Cómo puedo saber qué método es mejor para una situación? ¿Alguien puede proporcionar algunos ejemplos para conocer la diferencia en términos de funcionalidad y rendimiento?


4
Con respecto al rendimiento (apenas respondido): de acuerdo con jsperf, usar XMLHttpRequest regular es mucho más rápido que pasar por jQuery.
e2-e4

Respuestas:


145
  • XMLHttpRequest es el objeto de navegador sin formato que jQuery envuelve en una forma más utilizable y simplificada y una funcionalidad coherente entre navegadores.

  • jQuery.ajax es un solicitante general de Ajax en jQuery que puede realizar cualquier tipo de solicitud de contenido.

  • jQuery.gety, jQuery.postpor otro lado, solo puede emitir solicitudes GET y POST. Si no sabe cuáles son, debe verificar el protocolo HTTP y aprender un poco. Internamente, estas dos funciones usan, jQuery.ajaxpero usan configuraciones particulares que no tiene que configurar usted mismo, lo que simplifica la solicitud GET o POST en comparación con el uso jQuery.ajax. GET y POST son los métodos HTTP más utilizados de todos modos (en comparación con DELETE, PUT, HEAD o incluso otros exóticos que se usan poco).

Todas las funciones de jQuery usan XMLHttpRequestobjetos en segundo plano, pero brindan una funcionalidad adicional que no tiene que hacer usted mismo.

Uso

Entonces, si está usando jQuery, le recomiendo que use solo la funcionalidad jQuery . Olvídate por XMLHttpRequestcompleto. Utilice variaciones adecuadas de la función de solicitud de jQuery y, en todos los demás casos, utilice $.ajax(). Así que no olvide que hay otras funciones comunes relacionadas con jQuery Ajax para $.get(), $.post()y $.ajax(). Bueno, puede usarlo $.ajax()para todas sus solicitudes, pero tendrá que escribir un poco más de código, porque necesita un poco más de opciones para llamarlo.

Analogía

Es como si pudieras comprarte un motor de automóvil que tendrías que crear un automóvil completo a su alrededor con dirección, frenos, etc. Los fabricantes de automóviles producen automóviles completos, con una interfaz amigable (pedales, volante, etc.) para que no tenga que hacerlo todo usted mismo.


¿Hay alguna ventaja en usar $ .ajax () en términos de rendimiento?
Rodrigues

1
@Rodrigues: en realidad no. Si lo piensa $.posty $.getlo único que es más lento es una pequeña cantidad de código antes de que $.ajaxse llame. Pero si escribiera sus propias rutinas usando XHR directamente, las cosas podrían estar un poco optimizadas pero podrían tener más errores. Le sugiero que se mantenga del lado de jQuery. Hará tu vida más fácil. Y teniendo en cuenta el hecho de que la llamada asíncrona está tardando mucho más que el código que la emite, probablemente no notará una diferencia obvia entre estas llamadas.
Robert Koritnik

Gracias Robert Koritnik. así que lo obtendré con $ .post y $ .get.
Rodrigues

También puede $.ajaxhacer que sus llamadas sean consistentes en todas partes si lo desea. Siempre que no use XHR directamente, puede hacerlo de cualquier manera.
Robert Koritnik

1
@RobertKoritnik ¿qué pasa con el problema del almacenamiento en caché en IE? ¿Es lo mismo al usar XMLHttpRequest y $ .ajax ()?
Bhargavi Gunda

28

Cada uno de ellos usa XMLHttpRequest. Esto es lo que usa el navegador para realizar la solicitud. jQuery es solo una biblioteca de JavaScript y el método $ .ajax se usa para hacer una XMLHttpRequest.

$ .post y $ .get son solo versiones abreviadas de $.ajax. Hacen prácticamente lo mismo, pero hacen que escribir una solicitud AJAX sea más rápido: $.postrealiza una solicitud HTTP POST y $.getuna solicitud HTTP GET.


¿Qué pasa con el límite de transferencia de datos de cada función para cargar y descargar?
Rodrigues

Una GETsolicitud enviará todos los datos en la cadena de URL, que puede estar limitada por cliente / servidor ( stackoverflow.com/questions/2659952/… ). Una POSTsolicitud envía todos los datos en los encabezados, por lo que el límite de tamaño de la URL no debería ser un problema (¡a menos que tenga nombres de archivo y carpeta realmente largos en su secuencia de comandos!).
Jonathon Bolster

Okay. Entonces, en resumen, quiere decir, para enviar más datos, use la publicación y reciba más datos, use, ¿verdad?
Rodrigues

@Rodrigues - Sí, prácticamente :) Generalmente, si solo está buscando leer algo (por ejemplo, una solicitud para obtener una lista de tweets de Twitter), use GET. Si usted está buscando para enviar algo (por ejemplo, publicar un tweet) y luego use POST,
Jonathon Bolster

7

jQuery.getes un contenedor de jQuery.ajax, que es un contenedor de XMLHttpRequest.

XMLHttpRequest y Fetch API (experimentales en este momento) son los únicos en DOM, por lo que deberían ser los más rápidos.

Vi mucha información que ya no es precisa, así que hice una página de prueba donde cualquiera puede probar la versión de la versión que es mejor en cualquier momento:

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

De mis pruebas de hoy muestra que solo jQuery no es una solución limpia o incluso rápida, los resultados para mí en dispositivos móviles o de escritorio muestran que jQuery es, al menos, un 80% más lento que XHR2, si está usando demasiado ajax, en dispositivos móviles, tomará mucho tiempo cargar un sitio simple.

El uso en sí también está en el enlace.


2

jQuery.post y jQuery.get simulan cargas de página típicas, es decir, haces clic en un botón de envío y te lleva a una nueva página (o recarga la misma página). post y get difieren ligeramente en la forma en que se envían los datos al servidor (puede encontrar un buen artículo al respecto aquí .

jQuery.ajax y XMLHttpRequest son cargas de página similares a publicar y obtener, excepto que la página no cambia. Cualquier información que devuelva el servidor puede ser utilizada por javascript localmente para ser utilizada de cualquier forma, incluida la modificación del diseño de la página. Normalmente se utilizan para realizar trabajos asincrónicos mientras el usuario aún puede navegar por la página. Un buen ejemplo de esto serían las capacidades de autocompletar cargando dinámicamente los valores de una base de datos para completar un campo de texto. La diferencia fundamental entre jQuery.ajax y XMLHttpRequest es que jQuery.ajax usa XMLHttpRequest para lograr el mismo efecto pero con una interfaz más simple. Si usa jQuery, le animo a seguir con jQuery.ajax.


¿Cuál es la ventaja de usar jquery sobre la creación de un objeto XMLHttpRequest xmlhttp.open, send () y responseText?
Rodrigues

El objeto XMLHttpRequest se instancia de manera diferente según su navegador actual para una cosa. Sería necesario que cargues con un poco de mantenimiento de JavaScript para proporcionar una interfaz básica usando XMLHttpRequest. Si ya tiene jQuery, lo hace todo por usted. Es realmente una cuestión de conveniencia, no de funcionalidad, ya que técnicamente puede hacer lo mismo con cualquiera de ellos. Sin mencionar que dado que jQuery envuelve el objeto XMLHttpRequest, significa que se lo proporciona en caso de que quisiera hacer algo en particular con él.
Neil

ok .. Gracias Neil por tu sugerencia ... ¿hay algún IDE como Visual Studio disponible para usar y depurar jquery con php o aspx?
Rodrigues

Es difícil encontrar un IDE que le permita depurar tanto javascript como php o aspx simplemente porque uno está en el servidor y el otro en el cliente. Significa que, desafortunadamente, debe depurar el javascript por separado. Sin embargo, descubrí que firebug ( getfirebug.com ) es maravilloso para depurar javascript en general. Coloque un punto de interrupción en la función de devolución de llamada y le mostrará todo lo que le proporciona el servidor y, paso a paso, todo lo que su javascript hace con él. Espero que ayude.
Neil

1

Publicación antigua. pero aún quiero responder, una diferencia que enfrenté mientras trabajaba con Web Workers (javascript)

los trabajadores web no pueden tener acceso a nivel de interfaz de usuario. Eso significa que no puede acceder a ningún elemento DOM en el código JavaScript que desea ejecutar utilizando trabajadores web. No se puede acceder a objetos como ventana, documento y padre en el código de trabajador web.

Como sabemos, la biblioteca jQuery está vinculada al DOM HTML, y permitirlo violaría la regla de "no acceso al DOM". Esto puede ser un poco doloroso porque métodos como jQuery.ajax, jQuery.post, jQuery.get no se pueden utilizar en los trabajadores web. Afortunadamente, puede utilizar el objeto XMLHttpRequest para realizar solicitudes Ajax.


0

En lo que respecta a los métodos jQuery, .posty .getsimplemente lo hacen .ajaxinternamente, su propósito es abstraer algunas de las opciones innecesarias .ajaxy proporcionar algunos valores predeterminados apropiados para ese tipo de solicitud, respectivamente.

Dudo que haya mucha diferencia en el rendimiento entre cualquiera de los 3.

El .ajaxmétodo en sí mismo hace una XMLHttpRequest, estará muy optimizado según el resto de jQuery, pero probablemente no será tan eficiente como si hubiera adaptado toda la interacción usted mismo ... pero esa es la diferencia entre escribir mucho código o escritura jQuery.ajax.


¿Hay alguna ventaja en personalizar jQuery.ajax?
Rodrigues

Supongo que con eso te refieres a usarlo en lugar de los métodos abreviados, en mi experiencia, encuentro que los métodos abreviados son útiles si la mayoría de los valores predeterminados son los que quieres, si necesitas ser muy específico sobre cómo obtener los datos que necesitas. ajax suele ser el camino a seguir.
Steve

Gracias Steve. usará post y get. Si das algunos ejemplos de .ajax, puedo hacer una comparación.
Rodrigues
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.