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

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

  • XMLHttpRequest en el objeto de navegador sin formato que jQuery ajusta en una forma más fácil de usar y simplificada, y con la funcionalidad consistente de cross browser.

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

  • jQuery.get y jQuery.post por otro lado, solo pueden 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.ajax pero usan configuraciones particulares que usted no tiene que configurar usted mismo, lo que simplifica la solicitud GET o POST en comparación con el uso de 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 raramente utilizados).

Todas las funciones de jQuery usan el objeto XMLHttpRequest en segundo plano, pero proporcionan una funcionalidad adicional que no tiene que hacer usted mismo.

Uso

Entonces, si está utilizando jQuery, le recomiendo encarecidamente que use solo la funcionalidad de jQuery. Olvídate de XMLHttpRequest completo. Use variaciones adecuadas de la función de solicitud jQuery y en todos los demás casos use $.ajax() . Así que no olvide que hay otras funciones comunes relacionadas con jQuery Ajax en $.get() , $.post() y $.ajax() . Bueno, puede usar $.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 comprar un motor de automóvil que tendrías que crear todo un auto alrededor con dirección, frenos, etc. Los fabricantes de automóviles producen autos completos, con una interfaz amigable (pedales, volante, etc.) para que no tenga que hacerlo todo usted mismo.

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

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

jQuery.get es un contenedor para jQuery.ajax , que es un contenedor de XMLHttpRequest.

La API XMLHttpRequest y Fetch (experimental en este momento) son las únicas en DOM, por lo que deberían ser las más rápidas.

Vi una gran cantidad de 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 usa demasiado ajax, en el móvil, tomará mucho tiempo cargar un sitio simple.

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

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

jQuery.ajax y XMLHttpRequest son cargas de página similares a post y get, excepto que la página no cambia. Cualquiera que sea la información que el servidor devuelve puede ser utilizada por javascript localmente para ser utilizada de cualquier manera, incluida la modificación del diseño de la página. Normalmente se utilizan para realizar trabajos asincrónicos mientras el usuario puede navegar por la página. Un buen ejemplo de esto serían las capacidades de autocompletar cargando dinámicamente desde 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 recomiendo que se quede con jQuery.ajax.

Publicación anterior. pero aún quiero responder, una diferencia que tuve al trabajar con Web Workers (javascript)

los trabajadores de la web no pueden tener acceso a nivel de IU. 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 la ventana, el documento y el elemento primario en el código del trabajador web.

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

En cuanto a los métodos jQuery, .post y .get simplemente hacen .ajax internamente, su propósito es abstraer algunas de las opciones innecesarias de .ajax y proporcionar algunos valores por defecto apropiados para ese tipo de solicitud, respectivamente.

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

El método .ajax en sí mismo hace un XMLHttpRequest, se optimizará en gran medida según el rest de jQuery, pero probablemente no será tan eficiente como si se adaptara a toda la interacción usted mismo … pero esa es la diferencia entre escribir muchos código o escribiendo jQuery.ajax .