Javascript使用Ajax跟踪历史
为什么Ajax无法跟踪浏览历史?
我们假设,仅仅是假设:输入一个URL访问某网站时,浏览器背后就会记录你当前访问的URL,紧接着从当前页面点击一个链接跳转到新页面,浏览器就 会把刚刚访问的那个URL记录在历史里边,这样你点“后退”按钮时,它就知道要回到刚刚那个页面。想必这样的过程应该是挺容易理解的。
那么Ajax为什么不能跟踪呢?
Ajax请求往往是你页面的某个按钮触发了点击事件(可以是其他事件!)而发送的。
如果你在当前页面点击了某个按钮触发了Ajax请求发送,然后看到了一副风景画,突然觉得很有feel,把地址复制给好友叫他去看。这时,他访问了这个地址,发现看到的不是你看到的内容,因为他没有去点击那个按钮,导致Ajax请求没有被发送。
所以我们需要寻求一种方法去跟踪历史。
Iframe跟踪历史
想必大家都知道iframe就是页面上一个新的小页面,在iframe上跳转是可以记录到当前页面的浏览历史的。
大家可以去看看QQ邮箱里边的结构。用户在做任意操作,均为局部刷新(只刷新iframe内容),并且用户可以使用后退按钮回到上个操作!
从URL入手
回到主题,那我就是喜欢Ajax的话应该怎么做?外语屋
既然我想要复制URL分享当前看到的东西,那我肯定要从URL去入手,如果说我将location.href(也就是当前的url)改变了,当前页面就会跳转到改变后的URL。
那么URL怎么改变,当前页才不会刷新呢?
有用过锚的人就知道,URL后边的#部分就是hash部分,改变这段值页面是不会跳转到新页面也不会刷新。
如果说我们发送一个Ajax请求后,自动改变当前的URL的hash部分。
这样把地址复制给他人的时候,页面可以拿到该hash然后根据其值发送对应的Ajax请求并做同样地处理,这样就可以跟踪浏览历史了。
修改hash以及响应hash改变的事件
除了IE8以下的IE系列外,其他浏览器均支持window.onhashchange 来监听URL的hash变化,至于如何修改hash一会给代码就知道。
那么为了兼容IE8以下版本的IE,需要用定时器来监听URL上的hash变化,当然会消耗性能了,没办法,天朝底下到处都用万恶的IE,你得为他们考虑可用性。
下边贴个代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<meta charset="gbk">内陆运输
</head>
<body>
<button οnclick="changeHash()">Click Me</button>
<script language="javascript" src="hashchange.js"></script>
</body>
</html>
/**
* hashchange.js
* @author raphealguo(raphealguo@qq.com)
* @date 2011/08/09
*/
var nextHash = 0, //下一个hash值,每次会递增
curHash = '';//记录当前hash
if ("onhashchange" in window) {//IE8以下版本的浏览器不支持此属性
alert("The browser supports the hashchange event!");
}
function getHash(){//获取hash
var h = location.hash;
if (!h){
return '';
}else{
return location.hash;
}
}
function changeHash(){//修改hash 每次点击按钮触发hash变化
/*
发送Ajax请求时,可以修改相应的hash值,
只要在页面load完之后获取hash值并发送对应的Ajax请求并更新页面,
这样就可以达到用Ajax也能跟踪浏览历史的目的
*/
location.hash = "#" + nextHash++;
}
function changeHashCallBack(){//hash变化之后,回调函数会被触发
var hash = getHash();
if (curHash != hash){
curHash = hash;
alert("哈希更改 :" + hash);
}
}
if (document.all && //辨别IE
!document.documentMode//IE8才有documentMode
){
/* 低于IE8的IE系列采用定时器监听 */
setInterval(changeHashCallBack, 100);
alert('<IE8');
}else{
window.onhashchange = changeHashCallBack;
}
可以看到,当按钮点击时, 仅仅触发的是getHash函数,而changeHashCallBack是通过监听/window.onhashchange 的机制来触发的。
另外jQuery的一个插件:jQuery HashChange 也是可以支持hashChange,但它没有使用原生态的window.onhashchange ,火狐等浏览器底下也是采用定时器监听的办法去监控hash是否改变,这点个人认为不好,并且此插件还得依托jQuery,真的还不如模仿上边的代码,自己写一下。
本篇总结
身处在Web前端,就应该让用户体验更强更好的交互,当然了这里边包括了很多很多方面:
可用性、方便性(本文写的就是我认为的其中一种方便性)、性能(不至于搞垮浏览器崩溃)、安全性、人性化(考虑残疾人群)……
身为Web前端开发的你是否经常考虑这些问题!?
转载于:https://www.cnblogs.com/sky7034/archive/2011/08/09/2131797.html
Javascript使用Ajax跟踪历史相关推荐
- [js点击]JavaScript之Ajax技术02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
- [js点击]JavaScript之Ajax技术之02
事件监听接口 XMLHttpRequest第一版,只能对onreadystatechange这一个事件指定回调函数.该事件对所有情况作出响应. XMLHttpRequest第二版允许对更多的事件指定回 ...
- JavaScript与Ajax开发作业
JavaScript与Ajax开发练习 刚学完JavaScript,把作业记录一下,仅供参考. 支持请点赞三连 **从第二题到最后的源码请参考: 链接: https://pan.baidu.com/s ...
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- ajax更改dom,javascript – 用Ajax响应替换DOM节点
我有一个ajax响应,看起来像这样: some other text 我想用resp替换下面的element1: 所以在替换后我会得到: some other text 我尝试了replaceChil ...
- [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
- JavaScript中ajax如何不刷新,JavaScript基于Ajax实现不刷新在网页上动态显示文件内容...
本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件aj ...
- JavaScript、Ajax与jQuery的关系
简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
最新文章
- Cocos 物理系统
- java连接sqlserver数据简单操作
- 七大排序算法的个人总结(二)
- geotools读取shp文件及shp文件操作工具类代码
- CVPR 2021 | 自适应激活函数ACON:统一ReLU和Swish的新范式
- 转:canvas--放大镜效果
- ORA-01033: ORACLE initialization or shutdown in progress
- 详谈ARM架构与ARM内核发展史
- python创建一个csv文件_python操作csv文件
- java 混淆 js_Vue javascript和css混淆
- oracle rac单节点恢复,如何Oracle_RAC恢复一个节点总结
- Facebook 会沦落为二十年前的微软吗?
- BotVS开发基础—2.2 下限价单 交易
- asp.net创建自定义排序用户界面
- 原子性 - synchronized关键词
- js原生 在线客服功能
- 用123 组成的6位数 的java代码,输入一个三位的整数,计算其每位数字的累加之和。例如:输入整数123后,其每位数字累加之和为6(1+2+3),感激不尽...
- 从geth切换到parity遇到的那些坑
- 用python爬取全国和全球疫情数据,并进行可视化分析(过程详细代码可运行)
- 论文写作之查找中文对应的英文标题引用格式