• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

pjax实例demo(c#,iis)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 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.complus.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。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap