jquery抓取网页内容(采用Ajax技术，加载不同的内容是什么鬼？(组图))

　　jquery抓取网页内容(采用Ajax技术，加载不同的内容是什么鬼？(组图))

　　越来越多的网站，开始采用“单页结构”（Single-page application）。

　　整个网站只有一个网页，它使用Ajax技术根据用户的输入加载不同的内容。

　　这种方式的好处是用户体验好，节省了流量。缺点是AJAX内容不能被搜索引擎抓取。例如，您有一个 网站。

　　　　http://example.com 　　

　　用户通过英镑结构的 URL 看到不同的内容。

　　　　http://example.com#1　　http://example.com#2　　http://example.com#3 　　

　　但是，搜索引擎只抓取和忽略主题标签，因此它们无法索引内容。

　　为了解决这个问题，谷歌提出了“井号+感叹号”的结构。

　　　　http://example.com#!1　　

　　当 Google 找到上述网址时，它会自动抓取另一个网址：

　　　　http://example.com/?_escaped_fragment_=1　　

　　只要你把 AJAX 内容放在这个 URL 上，Google 就会收录。但问题是，“英镑+感叹号”非常丑陋和繁琐。Twitter曾经使用这种结构，它把

　　　　http://twitter.com/ruanyf　　

　　改成

　　　　http://twitter.com/#!/ruanyf　　

　　结果，用户投诉连连，仅半年就被废止。

　　那么，有没有什么方法可以让搜索引擎在抓取 AJAX 内容的同时保持更直观的 URL？

　　我一直认为没有办法做到这一点，直到我看到了 Discourse 创始人之一 Robin Ward 的解决方案。

　　Discourse 是一个严重依赖 Ajax 的论坛程序，但必须使用 Google收录 内容。它的解决方案是放弃英镑符号结构并使用 History API。

　　所谓History API，是指在不刷新页面的情况下，改变浏览器地址栏中显示的URL（准确的说是改变网页的当前状态）。这是一个示例，您单击上面的按钮开始播放音乐。然后，点击下面的链接看看发生了什么？

　　地址栏的网址变了，但音乐播放没有中断！

　　History API 的详细介绍超出了本文章 的范围。这里简单说一下，它的作用是在浏览器的History对象中添加一条记录。

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

　　上面这行命令可以使新的 URL 出现在地址栏中。History对象的pushState方法接受三个参数，新的URL是第三个参数，前两个参数可以为null。

　　　　window.history.pushState(null, null, newURL); 　　

　　目前所有主流浏览器都支持这种方法：Chrome (26.0+), Firefox (20.0+), IE (10.0+), Safari (0.0+) @5.1+)，歌剧 (12.1+)。

　　以下是罗宾·沃德 (Robin Ward) 的做法。

　　首先，用History API替换hashtag结构，让每个hashtag变成一个正常路径的URL，这样搜索引擎就会爬取每一个网页。

　　　　example.com/1　　example.com/2　　example.com/3　　来源gaodai.ma#com搞##代!^码网

　　然后，定义一个处理 Ajax 部分并基于 URL 获取内容的 JavaScript 函数（假设是 jQuery）。

　　function anchorClick(link) {<br />　　　　var linkSplit = link.split(&#039;/&#039;).pop();<br />　　　　$.get(&#039;api/&#039; + linkSplit, function(data) {<br />　　　　　　$(&#039;#content&#039;).html(data);<br />　　　　});<br />　　}

　　再次定义鼠标点击事件。

　　　　$(&#039;#container&#039;).on(&#039;click&#039;, &#039;a&#039;, function(e) {<br />　　　　window.history.pushState(null, null, $(this).attr(&#039;href&#039;));<br />　　　　anchorClick($(this).attr(&#039;href&#039;));<br />　　　　e.preventDefault();<br />　　});　　

　　还要考虑到用户单击浏览器的“前进/后退”按钮。此时触发了History对象的popstate事件。

　　　　window.addEventListener(&#039;popstate&#039;, function(e) {     <br />　　　　anchorClick(location.pathname);  <br /> 　　});

　　定义完以上三段代码后，就可以在不刷新页面的情况下显示正常的路径URL和AJAX内容了。

　　最后，设置服务器端。

　　因为没有使用主题标签结构，所以每个 URL 都是不同的请求。因此，服务器需要为所有这些请求返回具有以下结构的网页，以防止 404 错误。

　　　　<br />　　　　<br />　　　　　　<br />　　　　　　<br />　　　　　　　　... ...<br /> 　　　　　　<br />　　　　<br />　　

　　如果你仔细看上面的代码，你会发现有一个noscript标签，这就是秘密。

　　我们将搜索引擎应该为 收录 的所有内容放在 noscript 标记中。在这种情况下，用户仍然可以在不刷新页面的情况下进行 AJAX 操作，但是搜索引擎会收录每个页面的主要内容！