programming

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

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

Người dùng yêu cầu "david walsh blog" twitter. Các tweet của @davidwalshblog không tồn tại trong bộ đệm, vì vậy chúng tôi lấy chúng từ Twitter và lưu trữ chúng trong bộ đệm
Người dùng yêu cầu tweet "mootools". Các tweet của @mootools không tồn tại trong bộ đệm, vì vậy chúng tôi lấy chúng từ Twitter và lưu trữ chúng trong bộ đệm
Người dùng yêu cầu lại twitter "david walsh blog". @davidwalshblog các tweet KHÔNG tồn tại trong bộ đệm, vì vậy chúng tôi truy xuất chúng từ bộ đệm và tránh yêu cầu ajax

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 đầu

Bạn có thể tải xuống và cài đặt plugin này bằng bower

bower install jalc

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.
Bước 2. Nếu người dùng cập nhật và lưu dữ liệu của sinh viên, thì hãy thực hiện yêu cầu AJAX để cập nhật dữ liệu của sinh viên hiện có. Ngoài ra, hãy thực hiện Bước 1 để đảm bảo nó lấy dữ liệu mới nhất từ máy chủ.

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 trang

ajaxSetup đặt giá trị mặc định cho tất cả các yêu cầu ajax trong tương lai


        $[document].ready[function[]{
            
            // Set cache = false for all jquery ajax requests.
            $.ajaxSetup[{
                cache: false,
            }];
        
        }

Phương pháp 2. Đặt cache=false một cách rõ ràng bằng $. yêu cầu ajax

Chúng ta có thể đặt cache=false trong $. cài đặt tùy chọn ajax


        // Set cache = false for all jquery ajax requests.
        $.ajax[{
            url : "/rest/getStudents",
            method : "GET",
            cache : false
        }]
        .done[function[data]{
            console.log["Successfully fetched data."];
        }]
        .fail[function[data]{
            console.log["Error in fetching data"];
        }]

Phương pháp 3. Đặt cache=false một cách rõ ràng bằng $. nhận yêu cầu

Chúng ta có thể đặt cache=false trong $. nhận cài đặt tùy chọn


        // Set cache = false for all jquery ajax requests.
        $.get[{
            url : "/rest/getStudents",
            cache : false
        }]
        .done[function[data]{
            console.log["Successfully fetched data."];
        }]
        .fail[function[data]{
            console.log["Error in fetching data"];
        }]

Phương pháp 4. Nối dấu thời gian cho tất cả các yêu cầu ajax

Chú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


        // Set cache = false for all jquery ajax requests.
        $.ajax[{
            url : "/rest/getStudents?t="+$.now[],
            method : "GET",
        }]
        .done[function[data]{
            console.log["Successfully fetched data."];
        }]
        .fail[function[data]{
            console.log["Error in fetching data"];
        }]

Phần kết luận

Nhà 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