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>

<%}%>

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。

pjax实例demo(c#,iis)的更多相关文章

  1. ArcGIS API for JavaScript开发环境搭建及第一个实例demo

    原文:ArcGIS API for JavaScript开发环境搭建及第一个实例demo ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3. ...

  2. Android ListFragment实例Demo（自己定义适配器）

    上一篇文章介绍了ListFragment,当中的ListView并没有自己定义适配器,实际上在实际开发中常会用到自己定义适配器,是实现更复杂的列表数据展示. 所以这篇文章添加了自己定义适配器.来进行L ...

  3. 3 weekend110的hadoop中的RPC框架实现机制 + hadoop中的RPC应用实例demo

    hadoop中的RPC框架实现机制 RPC是Remotr Process Call, 进程间的远程过程调用,不是在一个jvm里. 即,Controller拿不到Service的实例对象. hadoop ...

  4. mybatis 学习笔记 -详解mybatis 及实例demo

    快速入门1 要点: 首先明白mybatis 是什么 这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. 首先, ...

  5. Android之SlideMenu实例Demo

    年末加班基本上一周都没什么时候回家写代码,回到家就想睡觉,周末难得有时间写个博客,上次写了一篇关于SlideMenu开源项目的导入问题,这次主要讲讲使用的问题,SlideMenu应用的广泛程度就不用说 ...

  6. Android微信分享功能实例+demo

    Android微信分享功能实例 1 微信开放平台注册 2 获得appId,添加到程序中,并运行程序 3 使用应用签名apk生成签名,添加到微信开放平台应用签名,完成注册 4 测试分享功能. 有问题请留 ...

  7. Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例

    Vue UI组件 开发框架 服务端 辅助工具 应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和WeUI的组件库 ...

  8. ActiveMQ入门实例Demo

    前面我们已经搭建和配置好了ActiveMQ,下面来看一个Demo,体验一下MQ. JMS 消息模型 JMS消息服务应用程序结构支持两种模型:点对点模型,发布者/订阅者模型. (1)点对点模型(Queu ...

  9. Android和FTP服务器交互，上传下载文件（实例demo）

    今天同学说他备份了联系人的数据放在一个文件里,想把它存到服务器上,以便之后可以进行下载恢复..于是帮他写了个上传,下载文件的demo 主要是 跟FTP服务器打交道-因为这个东东有免费的可以身亲哈 1. ...

随机推荐

  1. Web前端开发学习笔记（二）

    Homework2:http://my.ss.sysu.edu.cn/wiki/display/WEB/Homework+2+-+Movie+Review 这份作业跟布局相关,因此很多都是布局的知识: ...

  2. PhotoShop制作简单的文字动画--多媒体技术与应用

    下面是最终实现的效果图: 1.新建图像,设置图像属性如下所示. 2.使用[横排文字工具]在背景图像上打上文字内容 3.[图层]——>[图层式样]——>[渐变叠加] 出现“图层样式”面板 4 ...

  3. 【Luogu2759】奇怪的函数（数论）

    [Luogu2759]奇怪的函数(数论) 题面 题目描述 使得 \(x^{x}\)达到或超过 n 位数字的最小正整数 x 是多少? 输入输出格式 输入格式: 一个正整数 n 输出格式: 使得 \(x^ ...

  4. 【BZOJ3262】陌上花开（树套树）

    [BZOJ3262]陌上花开(树套树) 题面 对于权限题,我这种苦逼肯定是从别的OJ上搞的对不对??? CJOJ 洛谷 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味 ...

  5. [Luogu2664]树上游戏

    题面戳我 sol 点分.我们面临的最主要一个问题,就是如何在\(O(n)\)的时间内算出所有LCA为根的点对的贡献,还要分别累加到它们自己的答案中去. \(num_i\):每一种颜色的数量.你可以认为 ...

  6. Idea工具开发 SpringBoot整合JSP（毕设亲测可用）

    因为,临近毕业了,自己虽然也学了很多框架.但是,都是在别人搭建好的基础上进行项目开发.但是springboot的官方文档上明确指出不提倡使用jsp进行前端开发,但是在校期间只学了jsp作为前端页面.所 ...

  7. 【learning】凸包

    吐槽 计算几何这种东西qwq一开始真的觉得恶心qwq(主要是总觉得为啥画图那么直观的东西非要写一大堆式子来求qwq真的难受qwq) 但其实静下心来学习的话感觉还是很妙的ovo题目思考起来也十分好玩ov ...

  8. Kendo UI ASP.Net MVC 实现多图片及时显示加上传（其中有借鉴别人的代码，自己又精简了一下，如有冒犯，请多原谅！）

    View: <div class="demo-section k-content"> @(Html.Kendo().Upload() .Name("files ...

  9. 使用CMD命令编译和运行Java程序

    对于初学者来说,使用CMD命令(Unix以及类Unix系统采用Termial)来编译和运行Java的好处是让初学者直观地体会到编译(Compile)这一步骤,加深记忆.所谓编译就是将文本文件xxx.j ...

  10. Python函数学习——递归

    递归函数 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 函数实现过程 def calc(n): v = int(n//2) print(v) if v > ...