Xử lí 'Back' cho AJAX

AJAX là kỹ thuật thời thượng, tạo nên thế hệ ứng dụng web đáp ứng nhanh, tiết kiệm nhiều thời gian cho người dùng khi lướt web. Tuy nhiên, nếu là người viết ứng dụng web, chắc hẳn bạn cũng đã biết một số khuyết điểm của các ứng dụng trên nền AJAX. Một trong số đó là tính năng Back. Khi bạn xem các trang của một website dùng kỹ thuật AJAX, nếu nhấn nút Back trên thanh công cụ của trình duyệt thì bạn sẽ bị "đá văng" khỏi website thay vì được đưa về trang trước đó....
Nội dung trích xuất từ tài liệu:
Xử lí “Back” cho AJAX Xử lí “Back” cho AJAX AJAX là kỹ thuật thời thượng, tạo nên thế hệ ứng dụng web đáp ứng nhanh, tiết kiệm nhiều thời gian cho người dùng khi lướt web. Tuy nhiên, nếu là người viết ứng dụng web, chắc hẳn bạn cũng đã biết một số khuyết điểm của các ứng dụng trên nền AJAX. Một trong số đó là tính năngBack. Khi bạn xem các trang của một website dùng kỹ thuật AJAX, nếu nhấn nút Back trênthanh công cụ của trình duyệt thì bạn sẽ bị đá văng khỏi website thay vì được đưa về trangtrước đó. Bài viết này trình bày một trong số những cách khắc phục khuyết điểm trên.Ta xét một website, trang web chính có 3 liên kết đến 3 trang nội dung. Đây là liên kết giả vìkhông dùng tag mà dùng XMLHttpRequest để lấy nội dung từ 3 file t1.xml, t2.xml,t3.xml đưa vào trang chính, làm cho người dùng tưởng mình được đưa tới 3 trang web khác nhaucủa website.Tạo 3 trang nội dung như sau:t1.xmlDay la noi dung cua trang so 1.t2.xmlDay la noi dung cua trang so 2.t3.xmlDay la noi dung cua trang so 3.Đặt 3 file xml vào thư mục gốc của website (giả sử là http://localhost/).Tiếp theo, tạo trang web chính index.html nội dung như sau:Xem trang 1Xem trang 2Xem trang 3Trang web chính gồm 3 liên kết là 3 phần tử , và một phần tử có nhiệm vụ chứa nộidung của 3 trang. Để lấy dữ liệu và đưa ra trang chính, ta viết hàm xreq() và ghi().Bổ sung đoạn mã sau vào file index.html:function xreq(file,func){var reqif(window.XMLHttpRequest){req=new XMLHttpRequest();if (req.overrideMimeType) {req.overrideMimeType(text/xml);}}else{try{req=new ActiveXObject(Msxml2.XMLHTTP);}catch(e){req=new ActiveXObject(Microsoft.XMLHTTP);}}req.onreadystatechange = function(){if(req.readyState==4){func(req.responseXML.childNodes[0].text)}}req.open(GET,file,true);req.send(null);}function ghi(noi_dung){nd.innerHTML=noi_dung}Gắn hàm xreq() và hàm ghi() vào sự kiện onclick của 3 liên kết.Xem trang 1Xem trang 2Xem trang 3Truy cập vào địa chỉ http://localhost/ (hoặc địa chỉ web trên máy chủ của bạn), sau đó nhấn vàocác liên kết Xem trang 1... Bạn sẽ thấy nội dung trang web thay đổi tương ứng.Bây giờ thử nhấn nút Back của trình duyệt, bạn sẽ bị đưa ra khỏi website ngay. Đó chính là điềuta sẽ giải quyết. Ý tưởng là lừa trình duyệt, hướng nó về một trang web khác, để khi nhấn Backhay Forward, trình duyệt sẽ thực hiện lệnh đó trên trang web này chứ không phải là trang webchính.Để làm điều này, đầu tiên bạn hãy chèn đoạn mã sau vào trang chính:Sau đó, tạo một trang phụ là f.htm trong thư mục gốc với nội dung như sau:window.onload=function (){if(location.search!=){var loc=unescape(location.search)var mdl=(loc.substring(1,loc.length)).split(/&|=/)var str=parent.+mdl[1]+(for(var i=3;i}else{if(typeof(arguments[y])==object){str+=arguments[y].id}else{str+=arguments[y]}}}if(ifr.location.search!=str){ifr.location=f.htm+str}}Đến đây chắc bạn cũng hiểu được phần nào ý tưởng trên.Thay sự kiện onclick của 3 liên kết, gọi tới hàm xreq() nhưng hàm xử lí bây giờ sẽ làxu_li() chứ không còn là hàm ghi() như trên.Xem trang 1Xem trang 2Xem trang 3Cuối cùng, thêm thuộc tính display vào style của với giá trị là none để không chophép phụ này hiện ra trong trang chính.Mọi việc đã hoàn tất! Hãy truy cập website vừa tạo để xem kết quả.Hãy thử nhấn các liên kết Xem trang 1, Xem trang 2, Xem trang 3, sau đó nhấn nút Back, bạn sẽthấy bây giờ mình không bị đá” ra khỏi website nữa, mà được đưa về các trang trước vừaxem.Trên đây là một cách khắc phục khuyết điểm nút Back của ứng dụng AJAX, bạn có thể phát triểnthêm, hoặc sửa đổi để phù hợp với ứng dụng của mình