¿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?
jquery
ajax
xmlhttprequest
Rodrigues
fuente
fuente
Respuestas:
XMLHttpRequestes el objeto de navegador sin formato que jQuery envuelve en una forma más utilizable y simplificada y una funcionalidad coherente entre navegadores.jQuery.ajaxes 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 usojQuery.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.
fuente
$.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.$.ajaxhacer que sus llamadas sean consistentes en todas partes si lo desea. Siempre que no use XHR directamente, puede hacerlo de cualquier manera.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.fuente
GETsolicitud enviará todos los datos en la cadena de URL, que puede estar limitada por cliente / servidor ( stackoverflow.com/questions/2659952/… ). UnaPOSTsolicitud 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!).GET. Si usted está buscando para enviar algo (por ejemplo, publicar un tweet) y luego usePOST,jQuery.getes un contenedor dejQuery.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.
fuente
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.
fuente
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.
fuente
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 escriturajQuery.ajax.fuente