让浏览器记住ajax请求并能前进和后退方法(一)
来源:互联网 发布:结构优化设计 编辑:程序博客网 时间:2024/06/05 20:09
在我们浏览不同网页的时候,我们可以通过浏览器的前进、后退键来去到我们前后访问过的页面。这都有一个共同点,就是
浏览器地址栏的地址改变了。浏览器自身维护了一个记录用户访问页面历史的栈,栈中记录了用户访问不同页面的先后顺序。
但是在开发中,我们经常会用到ajax技术去提升网页的用户体验。但是ajax本身并不改变浏览器地址栏中的url,是在同一个
网页内部操作的,这时,浏览器并不会记录ajax请求的记录。在这种情况下,用户在一个页面触发的5次ajax请求后,点了后
退按钮,浏览器不会再次请求之前的ajax请求,而是返回了上一页。
解决这个问题的第一种方法就是利用location的hash值。当url的hash值改变时,页面并不会跳转,但是浏览器此时会将此
带hash的url记录到历史记录中。利用这个特性,我们可以人为的模拟带历史记录功能的ajax请求。下面是这种方法的demo。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
先创建两个按钮,点击按钮时,向服务器发送请求,并将data-id通过参数带到服务器,服务器返回对应data-id的结果。
于此同时,改变按钮状态,并将location的hash值改为data-id的值。最后监听location的hash值变化,重复上述步骤。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
当我们点击按“1-2-1”这样的顺序点击按钮时,控制台的输出如下
- 1
- 2
- 3
此时我们连续按三次返回按钮,控制台输出如下
- 1
- 2
- 3
可见这样就模拟实现了浏览器记录ajax请求的功能。
原文出处:http://www.foreverpx.cn
阅读全文
0 0
- 让浏览器记住ajax请求并能前进和后退方法(一)
- 让浏览器记住ajax请求并能前进和后退方法(一)
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 几种方法实现ajax请求内容时使用浏览器后退和前进功能
- 让浏览器支持 jquery ajax load 前进、后退 功能
- poj1028 模拟浏览器后退和前进(栈)
- 禁止浏览器前进和后退 清除缓存
- 调用浏览器中的前进和后退
- 002让页面后退和前进
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- AJAX的刷新和前进后退问题解决
- 关于Ajax在浏览器中产生前进后退的实现方法
- AJAX页面浏览器前进后退按钮失效和地址书签的解决方案
- 浏览器前进后退时不缓存请求服务器
- 关于ajax支持浏览器后退前进的做法
- AJAX 网页保留浏览器前进后退等功能
- 面向对象的三大特性
- 从无到有RNN
- [LeetCode
- Android context运用
- JAVA广度优先实现最短路径问题
- 让浏览器记住ajax请求并能前进和后退方法(一)
- 变量——JavaScript
- python成绩统计(优化版)
- Android发送邮件
- java初学--数组
- 553. Optimal Division
- 南阳理工29题
- kotlin基础
- 如何将Emmet安装到到 Sublime text 3?