Cách xóa cache trong ajax thành công
AJAX là một công cụ tuyệt vời. Các yêu cầu AJAX thường nhanh hơn tải trang thông thường và cho phép có nhiều tính năng động trong một trang. Thật không may, nhiều người không lưu trữ thông tin yêu cầu vào bộ đệm đúng cách khi họ có thể. Để tôi chỉ cho bạn cách tôi lưu trữ các yêu cầu AJAX -- cực kỳ dễ dàng Show
Ví dụ của tôi sẽ sử dụng plugin TwitterGitter của tôi để lấy các tweet của người dùng. Khi chúng tôi có thông tin tweet của người dùng, chúng tôi sẽ lấy thông tin đó từ bộ đệm thay vì thực hiện một yêu cầu AJAX trùng lặp JavaScript//our cache object var cache = {}; var formatTweets(info) { //formats tweets, does whatever you want with the tweet information }; //event $('myForm').addEvent('submit',function() { var handle = $('handle').value; //davidwalshblog, for example var cacheHandle = handle.toLowerCase(); if(cache[cacheHandle] != "undefined") { formatTweets(cache[cacheHandle]); } else { //gitter var myTwitterGitter = new TwitterGitter(handle,{ count: 10, onComplete: function(tweets,user) { cache[cacheHandle] = tweets; formatTweets(tweets); } }).retrieve(); } }); Lưu ý rằng trước khi chúng tôi thực hiện yêu cầu AJAX, chúng tôi kiểm tra đối tượng bộ đệm để xem liệu chúng tôi đã lưu thông tin của khóa này chưa (khóa, trong trường hợp này, là tên người dùng vì nó là duy nhất). Nếu vậy, hãy tránh yêu cầu AJAX lặp đi lặp lại và chỉ cần trả lại thông tin đã lưu trong bộ nhớ cache. Nếu khóa không tồn tại, hãy thực hiện yêu cầu AJAX và lưu kết quả vào bộ đệm Hãy nhìn vào dòng chảy này
Xóa bộ nhớ cache định kỳ cũng dễ dàng (function() { cache = {}; }).periodical(1000 * 60 * 10); //10 minutes Lưu trữ các kết quả AJAX của bạn trong một đối tượng JavaScript là một hệ thống rất đơn giản để triển khai và có thể giúp bạn tiết kiệm nhiều yêu cầu lặp đi lặp lại. FTW hiệu quả Jalc là một plugin được xây dựng cho jQuery (>= 1. 5. 1 cho 1. x. x và >=3. 0. 0 cho 2. x. x) và bất kỳ đối tượng nào triển khai giao diện lưu trữ, chẳng hạn như localStorage, cung cấp bộ đệm phía máy khách cho các phản hồi AJAX nhằm tiết kiệm băng thông và thời gian Phiên bản được gắn thẻ 1. x. x hỗ trợ jQuery 1. 5. 1+ cho đến jQuery phiên bản 3. 0. 0. Phiên bản 1. x. x không còn nhận được bất kỳ bản cập nhật nào, ngoại trừ các bản sửa lỗi cần thiết Phiên bản được gắn thẻ 2. x. x hỗ trợ jQuery 3. 0. 0+ Bạn đang tìm phiên bản hỗ trợ dữ liệu nhị phân (Blobs, ArrayBuffers)?Bạn đang tìm phiên bản cung cấp bộ nhớ đệm cho API Tìm nạp mới?người cúi đầuBạn có thể tải xuống và cài đặt plugin này bằng bower
Bạn cũng có thể tải xuống phiên bản phân phối rút gọn và cài đặt thủ công trong ứng dụng của mình. jlc. tối thiểu. js AJAX là một trong những phát minh tốt nhất đã xảy ra để cải thiện trải nghiệm người dùng. AJAX giúp thao tác động nội dung trên trình duyệt của người dùng mà không cần tải lại trang web. Ngày nay, việc sử dụng AJAX để tải/thêm/cập nhật/xóa nội dung từ máy chủ sang máy khách là rất phổ biến. Kịch bảnĐối với tất cả các yêu cầu jQuery AJAX, tùy chọn mặc định là cache = true cho tất cả các kiểu dữ liệu ngoại trừ kiểu dữ liệu = ‘script’ hoặc ‘jsonp’. Trình duyệt khác nhau có chính sách mặc định khác nhau về lưu trữ các yêu cầu ajax. Xem xét kịch bản bên dưới để hiểu quan điểm của tôi về lý do tại sao bạn nên đặt cache=false một cách rõ ràng trong yêu cầu ajax. Bước 1. Thực hiện một yêu cầu AJAX để lấy thông tin của sinh viên hiện có từ máy chủ và hiển thị thông tin đó dưới dạng để sửa đổi. Vấn đềTrong trường hợp của tôi, sự cố nằm ở Internet Explorer 11. 0 trên Windows 7. Nếu người dùng thực hiện Bước 2 thì nó cũng hiển thị thông tin của học sinh đã được tìm nạp ở Bước 1. Phần xấu xí của toàn bộ câu chuyện là chương trình đã hoạt động ngay cả trên Internet Explorer 11. 0 trên Windows 10. Điều này rất khó tìm thấy trên môi trường của nhà phát triển vì không có nhà phát triển nào sử dụng Internet Explorer và Windows 7 trong thời đại ngày nay. Lý do đằng sau sự cố là do Internet Explorer đã lưu vào bộ nhớ đệm các yêu cầu ajax từ bước 1. Bộ nhớ đệm đã tránh thực hiện yêu cầu ajax mới để nhận thông tin sinh viên mới nhất từ máy chủ khi người dùng thực hiện bước 2. Giải pháp cho vấn đề trên là đặt rõ ràng cache = false Phương pháp 1. sử dụng ajaxSetup để đặt cache=false khi tải trangajaxSetup đặt giá trị mặc định cho tất cả các yêu cầu ajax trong tương lai
Phương pháp 2. Đặt cache=false một cách rõ ràng bằng $. yêu cầu ajaxChúng ta có thể đặt cache=false trong $. cài đặt tùy chọn ajax
Phương pháp 3. Đặt cache=false một cách rõ ràng bằng $. nhận yêu cầuChúng ta có thể đặt cache=false trong $. nhận cài đặt tùy chọn
Phương pháp 4. Nối dấu thời gian cho tất cả các yêu cầu ajaxChúng tôi có thể đặt dấu thời gian làm chuỗi truy vấn cho tất cả các yêu cầu ajax. $. now() đưa ra một số biểu thị thời gian hiện tại tính bằng micro giây
Phần kết luậnNhà phát triển nên đặt cache=false cho từng yêu cầu ajax để tránh ảnh hưởng nghiêm trọng trong môi trường sản xuất để hỗ trợ cho các trình duyệt và hệ điều hành cũ Làm cách nào để xóa dữ liệu trong Ajax?AJAX là viết tắt của Async Javascript Request… Làm cách nào để bạn xóa dữ liệu biểu mẫu sau khi gửi nó bằng JavaScript? . Mẹo. Sử dụng phương thức submit() để gửi biểu mẫu. Form reset() Method The reset() method resets the values of all elements in a form (same as clicking the Reset button). Tip: Use the submit() method to submit the form.
Làm cách nào để xóa các trường biểu mẫu sau khi gửi trong Ajax?getElementById("form_id"). cài lại(); . vì vậy một khi cuộc gọi ajax của bạn thành công, nó sẽ đặt lại biểu mẫu |