pjax 百度都是api 也没找到demo 自己写了一个 C#写的 需要iis架设

测试ie10 和 火狐 成功

ie10不要用兼容模式 不然不好使

iis 可以直接架设webDemo1文件夹(源码)

打开根目录Default.html
点pjax_demo进入

pjax静态页没实现出来 目前只能架设服务器后使用

下载连接: pjax实例下载

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="aaaa.aspx.cs" Inherits="pjax_aaaa" %>
  2.  
  3. <%
  4.     bool bb = false;
  5.     try
  6.     {
  7.         bb = bool.Parse(Request.Params["pjax"]);
  8.     }
  9.     catch
  10.     {
  11.  
  12.     }
  13.     if (bb)
  14.     {%>
  15. <div id="Div1" style="border: 1px solid red;">
  16.     <a href="bbbb.aspx" title="abc">bbb</a>
  17.     <a href="cccc.aspx" title="abc">ccc</a>
  18.     <a href="dddd.aspx" title="abc">ddd</a>
  19.     <br />
  20.     <br />
  21.     <br />
  22.     <br />
  23.     异步,刷新我都变AAAAAAAAAAAA
  24. </div>
  25. <%}
  26.     else
  27.     { %>
  28. <!DOCTYPE html>
  29.  
  30. <html xmlns="http://www.w3.org/1999/xhtml">
  31. <head id="Head1" runat="server">
  32.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  33.     <title></title>
  34.     <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
  35.     <script src="jquery.pjax.js" type="text/javascript"></script>
  36.     <script>
  37.         //快捷获取DOM
  38.         function A(id) {
  39.             if (typeof id == "string") {
  40.                 return document.getElementById(id);
  41.             }
  42.             else if (typeof id == "object") {
  43.                 return id;
  44.             }
  45.         }
  46.         $(function () {
  47.             $.pjax({
  48.                 selector: 'a',
  49.                 container: '#container', //内容替换的容器
  50.                 show: 'fade',  //展现的动画，支持默认和fade, 可以自定义动画方式，这里为自定义的function即可。
  51.                 cache: false,  //是否使用缓存
  52.                 storage: true,  //是否使用本地存储
  53.                 titleSuffix: '', //标题后缀
  54.                 fitler: function (href) {
  55.                     //对于wordpress后台的URL和wp-content里的URL不使用pjax
  56.                     //if (href.indexOf('/555') || href.indexOf('/666')) {
  57.                     //    return true;
  58.                     //}
  59.                 },
  60.                 callback: function (status) {
  61.                     var type = status.type;
  62.                     switch (type) {
  63.                         case 'success':; break; //正常
  64.                         case 'cache':; break; //读取缓存
  65.                         case 'error':; break; //发生异常
  66.                         case 'hash':; break; //只是hash变化
  67.                     }
  68.                 }
  69.             });
  70.             $('#loading').hide();
  71.             $('#container').bind('pjax.start', function () {
  72.                 $('#loading').show();
  73.             })
  74.             $('#container').bind('pjax.end', function () {
  75.                 $('#loading').hide();
  76.             })
  77.         })
  78.     </script>
  79. </head>
  80. <body>
  81.     <form id="form1" runat="server">
  82.         <div>
  83.             <br />
  84.             <h1>异步我不变,刷新页面我会变AAAAAAAAAA</h1>
  85.             <div id="container" style="border: 1px solid red;">
  86.                 <a href="bbbb.aspx" title="abc">bbb</a>
  87.                 <a href="cccc.aspx" title="abc">ccc</a>
  88.                 <a href="dddd.aspx" title="abc">ddd</a>
  89.                 <br />
  90.                 <br />
  91.                 <br />
  92.                 <br />
  93.                 异步,刷新我都变AAAAAAAAAAAA
  94.             </div>
  95.             <div id="loading">pjax异步加载中....</div>
  96.         </div>
  97.     </form>
  98. </body>
  99. </html>
  100. <%}%>

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. poj1417菜鸡的详细题解（希望能帮助到和我一样陷于本题的新手）

    题意太麻烦就偷懒转载他人的题意..... 题意转载自http://blog.csdn.net/acm_cxlove/article/details/7854526       by---cxlove ...

  2. dom文档对象模型图

  3. [Python爬虫]使用Selenium操作浏览器订购火车票

    这个专题主要说的是Python在爬虫方面的应用,包括爬取和处理部分 [Python爬虫]使用Python爬取动态网页-腾讯动漫(Selenium) [Python爬虫]使用Python爬取静态网页-斗 ...

  4. 消息中间件kafka+zookeeper集群部署、测试与应用

    业务系统中,通常会遇到这些场景:A系统向B系统主动推送一个处理请求:A系统向B系统发送一个业务处理请求,因为某些原因(断电.宕机..),B业务系统挂机了,A系统发起的请求处理失败:前端应用并发量过大, ...

  5. 【Luogu3919】可持久化数组（主席树）

    题面戳我 题解 放一个板子在这里 用主席树维护一下每个版本就可以啦... #include<iostream> #include<cstdio> #include<cst ...

  6. data数据不一致的问题

    经常会遇到that.data能打印出来(能访问到),而that.data.xxx不能打印(为空)的情况.特别是在调用了云方法,然后setData的时候,为什么会出现这样的情况不明. 解决方法,将需要用 ...

  7. mysql url 连接配置的一个小坑。 工作中不会遇到。 学习的时候会

    <property name="driverClassName"> <value>com.mysql.jdbc.Driver</value> & ...

  8. react-redux状态管理思想

    最近一段一直在加班做项目,几乎每天都要加班到晚上9点,每周也只休息一天,一直没有时间把eact全家桶,再整体熟悉一遍.索性,就在最近的项目中,借鉴了react-redux的思想,维护状态和发布acti ...

  9. javascript DOM操作 节点的遍历

    通过javascript的遍历可以由一个节点来查找它的子节点(childNodes).兄弟节点(nextSibling/previousSibling)和父节点(parentNode). 代码说明: ...

  10. VISUALSVN: UNABLE TO CONNECT TO A REPOSITORY AT URL 无法连接主机的解决办法

    场景:我的系统是win7,安装的 VisualSVN Server 作为svn 服务器,昨天是好的,我手渐,使用鲁大师优化了系统,今天提交,更新的时候,直接提示:Unable to connect t ...