Apa perbedaan antara XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

Bagaimana saya bisa mengetahui metode mana yang terbaik untuk suatu situasi? Adakah yang bisa memberikan beberapa contoh untuk mengetahui perbedaan dalam hal fungsionalitas dan kinerja?

• XMLHttpRequest adalah objek browser mentah yang dibungkus jQuery menjadi bentuk yang lebih dapat digunakan dan disederhanakan serta fungsionalitas yang konsisten lintas browser.

• jQuery.ajax adalah pemohon Ajax umum di jQuery yang dapat melakukan semua jenis dan permintaan konten.

• jQuery.getdan jQuery.postdi sisi lain hanya dapat mengeluarkan permintaan GET dan POST. Jika Anda tidak tahu apa ini, Anda harus memeriksa protokol HTTP dan belajar sedikit. Secara internal kedua fungsi ini digunakan jQuery.ajaxtetapi mereka menggunakan pengaturan khusus yang tidak perlu Anda atur sendiri sehingga menyederhanakan permintaan GET atau POST dibandingkan dengan menggunakan jQuery.ajax. GET dan POST menjadi metode HTTP yang paling banyak digunakan (dibandingkan dengan DELETE, PUT, HEAD atau bahkan eksotik lain yang jarang digunakan).

Semua fungsi jQuery menggunakan XMLHttpRequestobjek di latar belakang, tetapi menyediakan fungsionalitas tambahan yang tidak harus Anda lakukan sendiri.

Pemakaian

Jadi jika Anda menggunakan jQuery, saya sangat menyarankan agar Anda menggunakan fungsionalitas jQuery saja . Lupakan XMLHttpRequestsama sekali. Gunakan variasi fungsi permintaan jQuery yang sesuai dan dalam semua kasus lainnya gunakan $.ajax(). Jadi jangan lupa ada fungsi terkait jQuery Ajax umum lainnya untuk $.get(), $.post()dan $.ajax(). Anda bisa saja menggunakan $.ajax()untuk semua permintaan Anda, tetapi Anda harus menulis lebih banyak kode, karena perlu lebih banyak opsi untuk memanggilnya.

Analogi

Ini seperti Anda dapat membeli sendiri sebuah mesin mobil sehingga Anda harus membuat seluruh mobil di sekitarnya dengan kemudi, rem, dll. Produsen mobil memproduksi mobil yang sudah jadi, dengan antarmuka yang ramah (pedal, roda kemudi, dll.) jadi Anda tidak harus melakukan semuanya sendiri.

Masing-masing menggunakan XMLHttpRequest. Inilah yang digunakan browser untuk membuat permintaan. jQuery hanyalah pustaka JavaScript dan metode $ .ajax digunakan untuk membuat XMLHttpRequest.

$ .post dan $ .get hanyalah versi singkat dari $.ajax. Mereka melakukan hampir semua hal yang sama tetapi membuatnya lebih cepat untuk menulis permintaan AJAX - $.postmembuat permintaan HTTP POST dan $.getmembuat permintaan HTTP GET.

jQuery.getadalah pembungkus untuk jQuery.ajax, yang merupakan pembungkus XMLHttpRequest.

XMLHttpRequest dan Fetch API (eksperimental saat ini) adalah satu-satunya di DOM, jadi seharusnya yang tercepat.

Saya melihat banyak informasi yang tidak akurat lagi, jadi saya membuat halaman pengujian di mana siapa pun dapat menguji versi dari versi mana yang terbaik setiap saat:

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

Dari pengujian saya hari ini menunjukkan bahwa hanya jQuery yang bukan solusi yang bersih atau bahkan cepat, hasil untuk saya di seluler atau desktop menunjukkan bahwa jQuery setidaknya 80% lebih lambat dari XHR2, jika Anda menggunakan terlalu banyak ajax, di seluler, akan memakan banyak waktu untuk memuat situs sederhana.

Penggunaannya sendiri juga ada di tautan.

jQuery.post dan jQuery.get mensimulasikan pemuatan halaman biasa, artinya, Anda mengklik tombol kirim dan ini akan membawa Anda ke halaman baru (atau memuat ulang halaman yang sama). posting dan dapatkan sedikit perbedaan dalam cara pengiriman data ke server (artikel bagus tentang itu dapat ditemukan di sini .

jQuery.ajax dan XMLHttpRequest adalah pemuatan halaman yang mirip dengan post dan get, kecuali halaman tersebut tidak berubah. Informasi apa pun yang dikembalikan server dapat digunakan oleh javascript secara lokal untuk digunakan dengan cara apa pun, termasuk memodifikasi tata letak halaman. Mereka biasanya digunakan untuk melakukan pekerjaan asinkron sementara pengguna masih dapat menavigasi halaman. Contoh bagusnya adalah kemampuan pelengkapan otomatis dengan memuat secara dinamis dari nilai database untuk melengkapi bidang teks. Perbedaan mendasar antara jQuery.ajax dan XMLHttpRequest adalah bahwa jQuery.ajax menggunakan XMLHttpRequest untuk mencapai efek yang sama tetapi dengan antarmuka yang lebih sederhana. Jika Anda menggunakan jQuery, saya akan mendorong Anda untuk tetap menggunakan jQuery.ajax.

Posting lama. tapi tetap ingin menjawab, satu perbedaan yang saya hadapi saat bekerja dengan Web Workers (javascript)

pekerja web tidak dapat memiliki akses tingkat UI. Itu berarti Anda tidak dapat mengakses elemen DOM apa pun dalam kode JavaScript yang ingin Anda jalankan menggunakan pekerja web. Objek seperti jendela, dokumen, dan induk tidak dapat diakses di kode pekerja web.

Seperti yang kita ketahui pustaka jQuery terikat dengan DOM HTML, dan mengizinkannya akan melanggar aturan "tidak ada akses DOM". Ini bisa sedikit menyakitkan karena metode seperti jQuery.ajax, jQuery.post, jQuery.get tidak dapat digunakan pada pekerja web. Untungnya, Anda bisa menggunakan objek XMLHttpRequest untuk membuat permintaan Ajax.

Sejauh metode jQuery berjalan, .postdan .getcukup dilakukan secara .ajaxinternal, tujuannya adalah untuk mengabstraksi beberapa opsi yang tidak perlu .ajaxdan menyediakan beberapa default yang sesuai untuk jenis permintaan itu masing-masing.

Saya ragu ada banyak perbedaan kinerja antara ketiganya.

The .ajaxMetode itu sendiri tidak XMLHttpRequest, itu akan sangat dioptimalkan sesuai sisa jQuery, tapi mungkin tidak akan seefisien jika Anda disesuaikan seluruh interaksi sendiri .. tapi itulah perbedaan antara menulis banyak kode atau menulis jQuery.ajax.