ajax抓取网页内容(discourse+感叹号的解决方法，不禁拍案叫绝！)

　　ajax抓取网页内容(discourse+感叹号的解决方法，不禁拍案叫绝！)

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

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

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

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com 　　

　　用户通过哈希标记结构的 url 看到不同的内容。

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com#1　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com#2　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com#3 　　

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

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

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com#!1　　

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

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155542517.com/?_escaped_fragment_=1　　

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

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155543049.jpg　　

　　改成

　　　　http://www.51sjk.com/Upload/Articles/1/0/300/300557_20210728155543064.jpg　　

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

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

　　一直以为没办法，直到前两天看到discourse创始人之一Robin ward的解法，不由惊叹。

　　discourse 是一个严重依赖 ajax 的论坛程序，但必须 google收录content。它的解决方案是放弃 hashtag 结构，使用 history api。

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

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

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

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

　　上面这行命令可以让新的url出现在地址栏中。历史对象的pushstate方法接受三个参数，新的url是第三个参数，前两个参数可以为null。

　　　　window.history.pushstate(null, null, newurl); 　　

　　目前各大浏览器都支持这个方法：chrome(26.0+),firefox(20.0+),ie(10.0+),safari(5.1+)，歌剧(12.1+)。

　　这是罗宾病房方法。

　　首先，将hashtag结构替换为history api，让每个hashtag变成正常路径的url，这样搜索引擎就会爬取每一个网页。

　　　　example.com/1　　example.com/2　　example.com/3　　

　　然后，定义一个处理 ajax 部分并根据 url 抓取内容的 javascript 函数（假设使用 jquery）。

　　function anchorclick(link) {

　　　　var linksplit = link.split('/').pop();

　　　　$.get('api/' + linksplit, function(data) {

　　　　　　$('#content').html(data);

　　　　});

　　}

　　再次定义鼠标点击事件。

　　　　$('#container').on('click', 'a', function(e) {

　　　　window.history.pushstate(null, null, $(this).attr('href'));

　　　　anchorclick($(this).attr('href'));

　　　　e.preventdefault();

　　});　　

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

　　　　window.addeventlistener('popstate', function(e) {    

　　　　anchorclick(location.pathname);  

 　　});

　　定义完以上三段代码后，无需刷新页面即可显示正常的路径url和ajax内容。

　　最后，设置服务器端。

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

　　　　　　　　... ...

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

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