Php无刷新修改url,history 实现无刷新更改url和页面内容
在访问google plus 和网易m站时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变。并且能够很好的支持浏览器的前进和后退。不禁让人想问,是什么有这么强大的功能呢?
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的。
对应history.pushState和history.replaceState的具体用法可以参考下面这几篇文章:
传统的ajax的问题
虽然ajax可以无刷新改变页面内容,但无法改变页面URL
为了更好的可访问性,内容发生改变后,改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口,不支持的浏览器只能定时去判断hash是否改变
ajax的使用对搜索引擎很不友好,往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题,HTML5里引入了新的API,即:history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。
下面附上一个简单的实例demo,仅供参考。
目录结构:
.
├── css
├── data
│ └── data.php
├── js
└── historyAjax.html
historyAjax.html
Document
button 1
button 2
button 3
首页
history.js
$(function(){
$('.btn').on('click',function(){
var url = $(this).data('url');
var page = $(this).data('page');
var state = {
url : url,
page : page
}
history.pushState(state,null,url);
$.ajax({
url : './data/data.php',
type : 'get',
data : {page:page},
success : function(res){
$('#txt').html(res);
state.contents = res;
history.replaceState(state,null,url);
}
})
});
window.addEventListener('popstate', function(event) {
var state = history.state;
if(state == null){
console.log('null');
history.replaceState(null,null,'./historyAjax.html');
$('#txt').html('首页');
return;
}else{
console.log(state.page);
$('#txt').html(state.contents); // 直接从state中取内容,减少http请求
}
});
});
data.php
@$page = $_GET['page'];
switch ($page) {
case 'news':
echo '这里是新闻页';
break;
case 'articals':
echo '这里是文章页';
break;
case 'cars':
echo '这里是汽车页';
break;
default :
echo 'default';
}
?>
更多相关文章:
Php无刷新修改url,history 实现无刷新更改url和页面内容相关推荐
- 看服务器时间修改日志,怎样看服务器远程更改时间记录
怎样看服务器远程更改时间记录 内容精选 换一换 华为云帮助中心,为用户提供产品简介.价格说明.购买指南.用户指南.API参考.最佳实践.常见问题.视频帮助等技术文档,帮助您快速上手使用华为云服务. 华 ...
- Vue进阶(六十四):iframe更改src后页面未刷新问题解决
文章目录 一.场景描述 二.高版本浏览器页签切换后内容不刷新问题解决 2.1 解决思路 2.2 解决措施 三.拓展阅读 3.1 keep-alive 缓存 iframe 一.场景描述 在项目开发过程中 ...
- 快速修改HTML5,HTML5无刷新修改URL(示例代码)
HTML5新添加了两个api分别是pushState和replaceState,DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,可以在用户的访问记录中前进和 ...
- 通过history.pushState无刷新改变url
背景 在浏览器中改变地址栏url,将会触发页面资源的重新加载,这使得我们可以在不同的页面间进行跳转,得以浏览不同的内容.但随着单页应用的增多,越来越多的网站采用ajax来加载资源.因为异步加载的特性, ...
- 使用ajax和history.pushState无刷新改变页面URL
HTML5里引用了新的API,history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如下的 ...
- ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别 传统的ajax有如 ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...
- popstate_HTML5之pushstate、popstate操作history,无刷新改变当前url
一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...
- 无刷新修改页面的浏览器地址栏显示地址的方法
作为一个Web程序员,我经常会到网上去看别人是如何做网站,如何开发Web应用的.这样的好处有很多,一是开阔你的眼界,你能看到很多书本上没有的东西,二是看别人的代码是如何写的,取人之长.补己之短.像纯C ...
最新文章
- 正确理解Spring AOP中的Around advice
- 四十一、完成scrapy爬取官方网站新房的数据
- where does ZCRM_OPPORTUNITY_0001_BE come from
- 饿了么翻车,美团被质疑,马云也赔了40亿,这项技术为什么让人害怕?
- 1.4编程基础之逻辑表达式与条件分支 09 判断能否被3,5,7整除
- 扩展Linux分区的一种方法
- datetimepicker获取年月日_bootstrap-datetimepicker 获取时间
- .net oracle 参数化,.NET参数化Oracle查询参数
- Nodejs服务器端处理POST提交的数据_note
- 电脑位数怎么看_看完了这篇文章你就知道怎么选电脑了...
- java 死锁_java死锁分析
- ASP Webshell查***代码的小东东
- centos 7 网络DNS设置的相关配置文件配置
- matlab repmat_三行MATLAB实现动漫风格照片
- 诺顿误杀导致系统崩溃--起因及对策
- JAVA实现微信授权登录(详解)
- 这些程序员搞笑段子,看了真的笑skr人!
- 西数宣布将绿盘并入蓝盘
- 微信扫码登陆在chrome浏览器失败
- linux下DNW用法