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。