|
|
pjax 百度都是api 也没找到demo 自己写了一个 C#写的 需要iis架设
测试ie10 和 火狐 成功
ie10不要用兼容模式 不然不好使
iis 可以直接架设webDemo1文件夹(源码)
打开根目录Default.html
点pjax_demo进入
pjax静态页没实现出来 目前只能架设服务器后使用
下载连接: pjax实例下载
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="aaaa.aspx.cs" Inherits="pjax_aaaa" %>
<%
bool bb = false;
try
{
bb = bool.Parse(Request.Params["pjax"]);
}
catch
{
}
if (bb)
{%>
<div id="Div1" style="border: 1px solid red;">
<a href="bbbb.aspx" title="abc">bbb</a>
<a href="cccc.aspx" title="abc">ccc</a>
<a href="dddd.aspx" title="abc">ddd</a>
<br />
<br />
<br />
<br />
异步,刷新我都变AAAAAAAAAAAA
</div>
<%}
else
{ %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.pjax.js" type="text/javascript"></script>
<script>
//快捷获取DOM
function A(id) {
if (typeof id == "string") {
return document.getElementById(id);
}
else if (typeof id == "object") {
return id;
}
}
$(function () {
$.pjax({
selector: 'a',
container: '#container', //内容替换的容器
show: 'fade', //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
cache: false, //是否使用缓存
storage: true, //是否使用本地存储
titleSuffix: '', //标题后缀
fitler: function (href) {
//对于wordpress后台的URL和wp-content里的URL不使用pjax
//if (href.indexOf('/555') || href.indexOf('/666')) {
// return true;
//}
},
callback: function (status) {
var type = status.type;
switch (type) {
case 'success':; break; //正常
case 'cache':; break; //读取缓存
case 'error':; break; //发生异常
case 'hash':; break; //只是hash变化
}
}
});
$('#loading').hide();
$('#container').bind('pjax.start', function () {
$('#loading').show();
})
$('#container').bind('pjax.end', function () {
$('#loading').hide();
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<h1>异步我不变,刷新页面我会变AAAAAAAAAA</h1>
<div id="container" style="border: 1px solid red;">
<a href="bbbb.aspx" title="abc">bbb</a>
<a href="cccc.aspx" title="abc">ccc</a>
<a href="dddd.aspx" title="abc">ddd</a>
<br />
<br />
<br />
<br />
异步,刷新我都变AAAAAAAAAAAA
</div>
<div id="loading">pjax异步加载中....</div>
</div>
</form>
</body>
</html>
<%}%>
View Code
pjax介绍:
表现
如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。
是什么有这么强大的功能呢？
HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
与传统的AJAX的区别
传统的ajax有如下的问题：
1、可以无刷新改变页面内容，但无法改变页面URL
2、为了更好的可访问性，内容发生改变后，通常改变URL的hash
3、hash的方式不能很好的处理浏览器的前进、后退等问题
4、进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
5、但这种方式对搜索引擎很不友好
6、twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。
为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。 |
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2015-8-13 07:11:18
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡