抓取ajax动态网页java(HTML5的pushState+Ajax（pjax）提供HTML5接口的使用 )

　　抓取ajax动态网页java(HTML5的pushState+Ajax（pjax）提供HTML5接口的使用

)

　　如果您玩过 Google+ 并看到过 YouTube 的新界面，那么您就已经体验过这项新的 HTML5 功能。使用pushState + Ajax(pjax)，可以实现网页的ajax加载，同时可以完成URL的改变，没有网页跳转和刷新的迹象，就像改变网页的hash(#)一样.

　　旧解决方案

　　据说SEO和ajax是天敌。自 Twitter 以来，调用内容的 Ajax+hash 方法一直很流行。谷歌给出的解决方案是自动将“#!~string”转换为“?_excaped_fragment_=~string”来捕获动态内容。但这无疑会很麻烦：首先需要在网站上配置“?_excaped_fragment_=~string”的处理，如果用户直接复制分享URL“#!/~string”，表示网页还必须*敏*感*词* hashchange。不过你这么想也没关系#！看起来不错。

　　新解决方案：pushState

　　不过，HTML5 的新接口 pushState/replaceState 可以完美解决这个问题。避免了改变hash的问题，也避免了不懂URL形式的用户的困惑。同时还有 onpopstate 提供监控和良好的响应来回前进。而且它不需要 URL 实际存在。

　　HTML5 pushState+Ajax

　　HTML5提供了历史接口，以状态的形式添加或替换浏览器的URL。它的实现函数是pushState和replaceState。

　　pushState 示例

　　pushState()的基本参数是：

　　window.history.pushState(state, title, url);

　　state和title都可以为空，但建议不要为空。应该创建一个状态来配合 popstate 监控。

　　例如，我们现在可以通过 pushState 更改 URL 而无需刷新页面。

　　var state = ( {

url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE

} );

window.history.pushState(state, ~title, ~href);

　　带有“~”符号的内容是自定义内容。您可以将此 ~href (URL) 推送到浏览器的历史记录中。如果你想改变页面的标题，你应该：

　　document.title= ~newTitle;

　　注意，只是 pushState 不能改变页面标题。

　　replaceState 也一样

　　window.history.replaceState( state, ~title, ~href);

　　pushState和replaceState的区别

　　pushState()可以创建历史，可以配合popstate事件，而replaceState()替换当前URL，不生成历史。

　　限制因素

　　只能替换为同域的 URL，即不能替换为。并且 state 对象并不像 DOM 那样存储不可序列化的对象。

　　Ajax 与 pushState 示例

　　Ajax + pushState 现在用于提供一种新的 ajax 调用样式。以 jQuery 为例，为了 SEO 的需要，应该在 a 标签的 onclick 中添加一个方法。

　　$("~target a").click(function(evt){

evt.preventDefault(); // 阻止默认的跳转操作

var uri=$(this).attr('href');

var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数，例如它会返回newTitle

document.title=newTitle; // 分配新的页面标题

if(history.pushState){

var state=({

url: uri, title: newTitle

});

window.history.pushState(state, newTitle, uri);

}else{ window.location.href="#!"+~fakeURI; } // 如果不支持，使用旧的解决方案

return false;

});

function ajax_Load(uri){ ... return newTitle; } // 你自定义的ajax函数，例如它会返回newTitle

　　pushState 已完成。新标题newTitle的获取是另一个问题。比如你可以把data-newtitle=~title属性赋给a标签并在那个时候读取它，或者如果你使用$.ajax()函数，你可以使用$(result)。 filter("title").text() 来获取。

　　另外，如果需要使用这个ajax来连接新加载的页面，需要重新部署新内容的a标签，例如

　　$("~newContentTarget a").click(function(evt){ ... });

　　pushState配合popstate监控

　　如果你想很好地支持浏览器的历史向前和向后操作，你应该部署popstate*敏*感*词*器：

　　window.addEventListener('popstate', function(evt){

var state = evt.state;

var newTitle = ajax_Load(state.url); //你自定义的ajax加载函数，例如它会返回newTitle

document.title=newTitle;

}, false);

　　提醒，您可以使用 setRequestHeader() 让服务器输出带有您的 ajax 请求的特殊内容。

　　流程图

　　本例的大致流程如下图所示

　　jQuery + PJAX 插件

　　已在github上发布。有人把PJAX做成了一个jQuery插件，调用方便，省了很多代码：

　　if ($.support.pjax) {

$(document).on('click', 'a[data-pjax]', function(event) {

var container = $(this).closest('[data-pjax-container]')

$.pjax.click(event, {container: container})

});}

　　感谢观看，如有错误请指出。

　　下载：jquery-pjax-master

　　原文：