ajax抓取网页内容(越来越多的网站采用“单页应用”的解决办法)

　　ajax抓取网页内容(越来越多的网站采用“单页应用”的解决办法)

　　越来越多的网站开始采用“单页应用”。

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

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

　　用户可以通过具有哈希结构的 URL 看到不同的内容。

　　# 1 # 2 # 3 但是，搜索引擎只会抓取，忽略哈希符号，因此无法索引内容。

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

　　#！1 当谷歌发现这样一个网址时，它会自动抓取另一个网址：

　　只要你把AJAX内容放到这个网站上，Google就会收录。但问题是'感叹号'非常丑陋和笨重。Twitter 过去使用这种结构，它把

　　变成

　　#!/Ruan Yifei 结果，用户抱怨连连，只用了半年时间就废了。

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

　　一直觉得做不到，直到前两天看到《话语》创始人之一罗宾·沃德的解决方案，我才忍不住尖叫起来。

　　Discourse 是一个严重依赖 Ajax 的论坛程序，但 Google 必须收录内容。解决方案是放弃hashtag结构，采用历史API。

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

　　地址栏中的网址已更改，但音乐播放并未中断！

　　对历史 API 的详细介绍超出了本文的范围。简单的说，它的作用就是给浏览器的History对象添加一条记录。

　　window.history.pushState（状态对象、标题、URL）；上面的命令可以在地址栏中显示一个新的 URL。History对象的pushState方法接受三个参数，新的URL为第三个参数，前两个参数可以为空。

　　window.history.pushState(null, null, new URl); 目前主流浏览器都支持这种方式：Chrome(26.0), Firefox(20.0), IE(10.0), Safari(5.1), Opera(12.1).

　　以下是Robin Ward 的方法。

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

　　然后， ///3 定义一个 JavaScript 函数来处理 Ajax 并根据 URL 抓取内容（假设使用了 jQuery）。

　　函数 anchorClick(link){ var linkSplit=link. 分裂（'/'）。流行音乐（）; $.get('api/' linkSplit, function (data){$('#content').html(data);});} 然后定义鼠标点击事件。

　　$('#container')。on('click',' a',function(e){ window.history.push state(null,null,$(this)).attr(' href'); anchorClick($(this).attr(' href '); e.PreventDefault();}); 还要考虑用户点击了浏览器的“前进/后退”按钮，此时触发了历史对象的popstate事件。

　　窗户。addeventlistener('pop state', function (e){ anchorClick(location .pathname);}); 定义以上三个代码后，无需刷新页面即可显示正常路径URL和AJAX内容。

　　最后，设置服务器端。

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

　　htmlbody section id='container'/section noscript./noscript/body/html 仔细看上面的代码，你会发现里面有一个no script标签，这就是秘诀。

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