Bir durum için hangi yöntemin en iyi olduğunu nasıl öğrenebilirim? İşlevsellik ve performans açısından farkı bilmek için herhangi bir örnek verebilir misiniz?
Yanıtlar:
XMLHttpRequest jQuery'nin daha kullanışlı ve basitleştirilmiş bir forma ve tarayıcılar arası tutarlı işlevselliğe büründüğü ham tarayıcı nesnesidir.
jQuery.ajax jQuery'de herhangi bir tür ve içerik isteğini gerçekleştirebilen genel bir Ajax istemcisidir.
jQuery.getve jQuery.postdiğer yandan yalnızca GET ve POST isteklerini yayınlayabilir. Bunların ne olduğunu bilmiyorsanız, HTTP protokolünü kontrol etmeli ve biraz öğrenmelisiniz. Dahili olarak bu iki işlev kullanır, jQuery.ajaxancak kendiniz ayarlamanız gerekmeyen belirli ayarları kullanırlar, böylece GET veya POST isteğini kullanmaya kıyasla basitleştirir jQuery.ajax. GET ve POST en çok kullanılan HTTP yöntemleridir (DELETE, PUT, HEAD ve hatta nadiren kullanılan diğer egzotiklerle karşılaştırıldığında).
Tüm jQuery işlevleri, XMLHttpRequest arka planda nesneyi , ancak kendi başınıza yapmanız gerekmeyen ek işlevler sağlar.
Bu nedenle, jQuery kullanıyorsanız, yalnızca jQuery işlevini kullanmanızı şiddetle tavsiye ederim . XMLHttpRequestTamamen unutun . Uygun jQuery isteği işlevi varyasyonlarını kullanın ve diğer tüm durumlarda kullanın $.ajax(). Bu yüzden , ve ile ilgili jQuery Ajax ile ilgili diğer yaygın işlevler olduğunu unutmayın . Eh , tüm isteğiniz için kullanabilirsiniz , ancak biraz daha kod yazmanız gerekecek, çünkü onu çağırmak için biraz daha fazla seçeneğe ihtiyacı var.$.get()$.post()$.ajax()$.ajax()
Kendinize bir araba motoru satın alabileceğiniz gibi, etrafında direksiyon, fren vb. İle bütün bir araba yaratmak zorunda kalacaksınız ... Araba üreticileri, dostça bir arayüzle (pedallar, direksiyon simidi vb.) böylece hepsini kendiniz yapmak zorunda değilsiniz.
$.postve $.getdaha yavaş olan tek şey $.ajax, çağrılmadan önce küçük bir miktar koddur . Ancak doğrudan XHR kullanarak kendi rutinlerinizi yazarsanız, işler biraz optimize edilebilir ancak daha hatalı olabilir. Kendinizi jQuery tarafında tutmanızı öneririm. Hayatınızı kolaylaştıracak. Eşzamansız aramanın onu veren koddan çok daha uzun sürdüğü gerçeğini göz önünde bulundurarak, bu aramalar arasında büyük olasılıkla bariz bir fark görmeyeceksiniz.
$.ajaxaramalarınızı her yerde tutarlı hale getirmek için de gidebilirsiniz . XHR'yi doğrudan kullanmadığınız sürece, her iki şekilde de yapmakta iyidir.
Her biri XMLHttpRequest kullanır. Tarayıcının istekte bulunmak için kullandığı şey budur. jQuery yalnızca bir JavaScript kitaplığı ve $ .ajax yöntemi XMLHttpRequest yapmak için kullanılır.
$ .post ve $ .get öğesinin kısaltılmış halleridir$.ajax . Hemen hemen aynı şeyi yaparlar, ancak bir AJAX isteği yazmayı hızlandırır - $.postbir HTTP POST isteği $.getyapar ve bir HTTP GET isteği yapar.
GETistek, URL dizesindeki tüm verileri gönderir - bu, istemci / sunucu tarafından sınırlandırılabilir ( stackoverflow.com/questions/2659952/… ). Bir POSTistek, üstbilgilerdeki tüm verileri gönderir, bu nedenle URL boyutu sınırı bir sorun olmamalıdır ( betiğiniz için gerçekten uzun dosya ve klasör adlarınız yoksa!).
GET. Bir şey göndermek istiyorsanız (örneğin, bir tweet göndermek) o zaman şunu kullanın POST:
jQuery.get için bir paketleyicidir jQuery.ajax XMLHttpRequest bir sarıcı.
XMLHttpRequest ve Fetch API (şu anda deneysel) DOM'daki tek özelliklerdir, bu nedenle en hızlı olmaları gerekir.
Artık doğru olmayan birçok bilgi gördüm, bu yüzden herkesin herhangi bir zamanda en iyi olan sürümden sürümü test edebileceği bir test sayfası yaptım:
https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch
Bugünkü testlerim, yalnızca jQuery'nin temiz ve hatta hızlı bir çözüm olmadığını gösteriyor, benim için mobil veya masaüstündeki sonuçlar jQuery'nin, çok fazla ajax kullanıyorsanız, XHR2'den en azından% 80 daha yavaş olduğunu gösteriyor. mobilde basit bir sitenin yüklenmesi çok zaman alacaktır.
Kullanımın kendisi de bağlantıda.
jQuery.post ve jQuery.get tipik sayfa yüklemelerini simüle eder, yani bir gönder düğmesine tıklarsınız ve sizi yeni bir sayfaya götürür (veya aynı sayfayı yeniden yükler). Verilerin sunucuya gönderilme biçiminde biraz farklı yayınlama ve alma (bununla ilgili iyi makale burada bulunabilir .
jQuery.ajax ve XMLHttpRequest, sayfanın değişmemesi dışında post ve get'e benzer sayfa yüklemeleridir. Sunucunun döndürdüğü bilgiler, sayfa düzeninin değiştirilmesi de dahil olmak üzere herhangi bir şekilde kullanılmak üzere javascript tarafından yerel olarak kullanılabilir. Normalde kullanıcı sayfada gezinebilirken eşzamansız işler yapmak için kullanılırlar. Bir metin alanını tamamlamak için bir veritabanı değerlerinden dinamik olarak yüklenen otomatik tamamlama yetenekleri buna iyi bir örnek olabilir. JQuery.ajax ile XMLHttpRequest arasındaki temel fark, jQuery.ajax'ın aynı etkiyi elde etmek için XMLHttpRequest'i daha basit bir arayüzle kullanmasıdır. JQuery kullanıyorsanız, jQuery.ajax ile devam etmenizi öneririm.
Eski gönderi. ancak yine de yanıtlamak istiyorum, Web Çalışanları ile çalışırken karşılaştığım bir fark (javascript)
web çalışanları, kullanıcı arayüzü düzeyinde erişime sahip olamaz. Bu, web çalışanlarını kullanarak çalıştırmayı planladığınız JavaScript kodundaki herhangi bir DOM öğesine erişemeyeceğiniz anlamına gelir. Pencere, belge ve üst öğe gibi nesnelere web çalışanı kodundan erişilemez.
Bildiğimiz gibi jQuery kitaplığı HTML DOM'a bağlıdır ve buna izin verilmesi "DOM erişimi yok" kuralını ihlal eder. Bu biraz acı verici olabilir çünkü jQuery.ajax, jQuery.post, jQuery.get gibi yöntemler web çalışanlarında kullanılamaz. Neyse ki, Ajax istekleri yapmak için XMLHttpRequest nesnesini kullanabilirsiniz.
JQuery yöntemleri gittiği .postve .getsadece .ajaxdahili olarak yaptığı sürece, amaçları bazı gereksiz seçenekleri soyutlamak .ajaxve sırasıyla bu tür isteğe uygun bazı varsayılanları sağlamaktır.
3'ün herhangi biri arasında performansta çok fark olduğundan şüpheliyim.
.ajaxKendi içinde yöntem XMLHttpRequest, bu ağır jQuery kalanını göre optimize olacak, ancak bütün Etkileşim kendinizi uyarlanmış sanki muhtemelen verimli olarak olmayacak yapar .. ama yazılı kod çoklu veya aramdaki fark yazma jQuery.ajax.