Cache Ajax dikelola oleh browser. Untuk URL tertentu yang dikirim ke server, AJAX hanya berinteraksi dengan server selama permintaan pertama. Dalam permintaan selanjutnya, AJAX tidak lagi mengirimkan permintaan ke server, tetapi mengekstrak data langsung dari cache.
Dalam beberapa kasus, kita perlu mendapatkan data yang diperbarui dari server setiap saat. Idenya adalah untuk membuat URL diminta secara berbeda tanpa mempengaruhi aplikasi normal: tambahkan konten acak setelah URL.
misalnya
url = url+"&"+math.random ();
Poin -Poin Kunci:
1. URL yang diminta setiap kali berbeda (Ajax Cache tidak berhasil)
2. Ini tidak mempengaruhi aplikasi normal (paling dasar)
Di sini kami memiliki dua kesimpulan:
1: cache jax dan cache http adalah sama
Mekanisme HTTP dan caching browser modern jauh lebih buruk daripada objek XMLHTTPRequest Ajax, sehingga tidak mengenali atau peduli dengan permintaan AJAX. Ini hanya mengikuti aturan caching HTTP biasa dan menyimpannya melalui header respons yang dikembalikan oleh server.
Jika Anda sudah memiliki pemahaman tentang cache HTTP, Anda dapat menggunakan pengetahuan cache HTTP untuk memahami cache AJAX. Satu -satunya perbedaan adalah bahwa cara mengatur header respons akan berbeda dari file biasa.
Header respons berikut dapat membuat Ajax Anda dapat di -cache:
Kedaluwarsa: Item ini harus diatur ke titik waktu yang sesuai di masa depan. Pengaturan titik waktu tergantung pada frekuensi perubahan konten. Misalnya, jika jumlah inventaris yang diminta, nilai kedaluwarsa bisa 10 detik kemudian. Jika foto yang diminta, nilai kedaluwarsa bisa lebih lama karena tidak akan sering berubah. Header yang kedaluwarsa memungkinkan browser untuk menggunakan kembali data cache lokal untuk jangka waktu tertentu, sehingga menghindari interaksi yang tidak perlu dengan data server.
Modifikasi Terakhir: Mengatur item ini adalah pilihan yang baik. Melalui itu, browser akan menggunakan IF-Modified-Since di header permintaan untuk memeriksa konten yang di-cache lokal saat mengirim permintaan GET bersyarat. Jika data tidak perlu diperbarui, server akan mengembalikan status respons 304.
Cache-Control: Dalam hal keadaan yang tepat, nilai ini harus diatur ke publik sehingga semua proxy dan cache menengah dapat disimpan dan dibagikan dengan pengguna lain. Di Firefox, ini juga mendukung cache untuk permintaan HTTPS.
Tentu saja, jika Anda menggunakan metode pos untuk mengirim Ajax, itu tidak dapat di -cache, karena permintaan pos tidak akan pernah di -cache. Jika permintaan AJAX Anda akan memiliki efek lain (seperti transfer antar rekening bank), silakan gunakan permintaan pos.
Kami mengatur demo (demo ini tidak dapat lagi dilihat (□) ノ) untuk mengklarifikasi bagaimana header ini bekerja. Di httpwatch, Anda dapat melihat bahwa kami menetapkan tiga header respons di atas dalam informasi header respons.
Jika Anda mengklik tombol 'AJAX UPDATE' secara teratur, perubahan waktu cenderung setiap menit. Karena header respons kedaluwarsa diatur ke menit berikutnya. Di tangkapan layar di bawah ini, Anda dapat melihat: Ketika Anda mengklik tombol pembaruan berulang kali, permintaan AJAX akan membaca cache lokal browser tanpa menghasilkan aktivitas jaringan (nilai -nilai bilah pengiriman dan transfer adalah 0)
Permintaan AJAX yang dikirim dengan klik terakhir pada 1: 06.531 waktu yang dihasilkan transmisi data jaringan karena data yang di -cache telah melebihi satu menit. Server mengembalikan 200 status respons untuk menunjukkan bahwa salinan data baru diperoleh.
Tebak demo ini harus menjadi tombol, dapatkan waktu saat ini setiap kali Anda mengklik dan kemudian kembali ke halaman saat ini.
2: IE Browser tidak akan menyegarkan konten yang diperoleh melalui AJAX sebelum kedaluwarsa waktu berakhir.
Terkadang, Ajax digunakan untuk mengisi bagian -bagian tertentu dari halaman (seperti daftar harga) saat halaman dimuat. Ini tidak dipicu oleh acara pengguna (seperti mengklik tombol), tetapi dikirim melalui JavaScript saat halaman dimuat. Seolah -olah permintaan AJAX sama dengan sumber daya tertanam (seperti JS dan CSS).
Jika Anda mengembangkan halaman seperti itu, saat menyegarkan, Anda mungkin ingin memperbarui konten permintaan AJAX yang tertanam. Untuk sumber daya tertanam (file CSS, gambar, dll.), Browser akan secara otomatis mengirim berbagai jenis permintaan dengan apakah pengguna menyegarkannya adalah F5 (Refresh) atau Ctrl+F5 (Force Refresh):
1.F5 (Refresh): Jika konten permintaan memiliki header respons yang dimodifikasi terakhir, browser akan mengirim permintaan pembaruan bersyarat. Ia menggunakan header permintaan IF-Modified-Since untuk perbandingan, sehingga server dapat mengembalikan status 304 untuk menghindari transmisi data yang tidak perlu.
2.CTRL+F5 (Force Refresh): Memberitahu browser untuk mengirim permintaan pembaruan tanpa syarat, dan kontrol cache dari header permintaan diatur ke 'No-Cache'. Ini memberi tahu semua proxy dan cache menengah: browser perlu mendapatkan versi terbaru, terlepas dari apakah itu telah di -cache.
Firefox menyebarkan metode penyegaran ini untuk permintaan AJAX yang dikirim ketika halaman dimuat, dan memperlakukan permintaan AJAX ini sebagai sumber daya tertanam. Di bawah ini adalah tangkapan layar httpwatch di bawah Firefox, menunjukkan efek permintaan AJAX saat menyegarkan (F5) Halaman:
Firefox memastikan bahwa permintaan yang diprakarsai oleh Ajax bersyarat. Dalam contoh ini, jika data di -cache selama kurang dari 10 detik, server mengembalikan 304, jika melebihi 10 detik, server mengembalikan 200, dan mengirimkan kembali data.
Dalam IE, permintaan AJAX dimulai ketika halaman dimuat dianggap tidak ada hubungannya dengan menyegarkan bagian lain dari halaman, dan tidak akan terpengaruh oleh metode refresh pengguna. Jika data AJAX yang di -cache belum kedaluwarsa, tidak akan ada permintaan mendapatkan yang dikirim ke server. Ini akan membaca data langsung dari cache, dan dari httpwatch itu adalah hasil (cache). Gambar berikut adalah menekan F5 untuk menyegarkan jika cache tidak kedaluwarsa di bawah IE:
Bahkan jika dipaksa untuk menyegarkan melalui Ctrl+F5, data yang diperoleh melalui AJAX akan dibaca dari cache:
Ini berarti bahwa apa pun yang diperoleh melalui AJAX tidak akan diperbarui berdasarkan IE jika belum kedaluwarsa - bahkan jika Anda menggunakan Ctrl+F5 untuk memaksa penyegaran. Satu -satunya cara untuk memastikan bahwa Anda mendapatkan data terbaru adalah dengan membersihkan cache secara manual. Anda dapat menggunakan toolbar httpwatch:
Perhatikan bahwa hasil cache dan hasil 304 berbeda. Cache sebenarnya 200 (cache), 304 berarti 304. Cache sebenarnya tidak mengirim permintaan ke server. Anda dapat melihat dari Chrome bahwa waktunya adalah 0, dan responsnya juga kosong. Namun, 304 berbeda.
Permintaan 304 adalah permintaan bersyarat yang diprakarsai oleh browser. Permintaan ini membawa header permintaan IF-Modified-Since. Jika file belum dimodifikasi setelah browser mengirim waktu, sisi server akan mengembalikan status 304 dan memberi tahu browser untuk menggunakan konten cache lokalnya. Ini tidak secepat permintaan dikirim ke sisi server, tetapi sisi server tidak mengirim data.
Anda dapat memeriksa halaman beranda Taobao, yang memiliki 200 (cache) dan 304. Anda dapat memeriksa perbedaannya.
Meringkaskan:
Kita semua tahu bahwa alasan utama mengapa Ajax dapat meningkatkan kecepatan pemuatan halaman adalah karena mengurangi pemuatan data duplikat melalui AJAX, dan benar-benar mencapai akuisisi sesuai permintaan. Karena ini masalahnya, ketika kami menulis program AJAX, kami mungkin juga mengirimkannya ke Barat dan menyimpannya lagi pada klien untuk lebih meningkatkan kecepatan pemuatan data. Yaitu untuk menyimpan data dalam memori browser saat memuat data. Setelah data dimuat, selama halaman tidak disegarkan, data akan di -cache dalam memori selamanya. Ketika pengguna melihat data lagi, tidak perlu mendapatkan data dari server, yang sangat mengurangi beban server dan meningkatkan pengalaman pengguna.