ajax抓取网页内容(越来越多的网站采用Ajax技术解决方法放弃井号结构)

　　ajax抓取网页内容(越来越多的网站采用Ajax技术解决方法放弃井号结构)

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

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

　　这种方法的优点是良好的用户体验和节省流量。缺点是搜索引擎无法捕获Ajax内容。例如，您有一个网站

　　用户可以通过英镑符号结构的URL看到不同的内容

　　#一,

　　#二,

　　#三,

　　然而，搜索引擎只抓取并忽略了磅号，所以它不能索引内容

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

　　#!！一,

　　当Google找到上述URL时，它将自动获取另一个URL：

　　只要你把Ajax内容放在这个网站上，谷歌就会收录. 但问题是，“磅号+感叹号”非常难看和麻烦。推特过去采用这种结构

　　改为

　　#！/鲁安夫

　　结果，用户一再抱怨，仅在半年内就取消了

　　那么，有没有办法让搜索引擎在保持更直观的URL的同时抓取Ajax内容呢

　　直到两天前我看到了话语权创始人之一的解决方案，我一直认为我做不到这一点

　　Distance是一个严重依赖Ajax的论坛程序，但它必须如此Google收录Content。解决方案是放弃井号结构，采用历史API

　　所谓的历史API是指在不刷新页面的情况下更改浏览器地址栏中显示的URL（确切地说，更改网页的当前状态）。这里有一个例子。单击上面的按钮开始播放音乐。然后，单击下面的链接，地址栏中的URL将更改，但音乐播放不会中断

　　历史API的详细介绍超出了本文的范围文章. 简单地说，它的功能是在浏览器的历史对象中添加一条记录

　　window.history.pushState（状态对象、标题、url）

　　上面的命令可以在地址栏中显示新的URL。历史对象的pushstate方法接受三个参数。新URL是第三个参数。前两个参数可以为null

　　window.history.pushState（null，null，newURL）

　　目前，主要浏览器都支持这种方法：chrome（26.0+，Firefox（20.0+，即（10.0+，Safari（5.1+），歌剧（12.1+

　　这是罗宾·沃德的方法

　　首先，用history API替换磅号结构，使每个磅号成为正常路径的URL，这样搜索引擎将抓取每个网页

　　/一,

　　/二,

　　/三,

　　然后，定义一个JavaScript函数来处理Ajax部分，并根据web地址获取内容（假设jQuery）

　　功能锚定点击（链接）{

　　var linkSplit=link.split（'/'）.pop（）

　　$.get（'api/'+linkSplit，函数（数据）{

　　$（'#content'）.html（数据）

　　}))

　　}

　　然后定义鼠标的单击事件

　　$（'#container'）。在（'click'，'a'，函数（e）上{

　　window.history.pushState（null，null，$（this.attr（'href'））

　　anchorClick（$（this.attr（'href'））

　　e、 预防默认值（）

　　}))

　　还考虑用户点击浏览器的“向前/向后”按钮。将触发历史对象的pop状态事件

　　window.addEventListener（'popstate'，函数（e）{

　　anchorClick（location.pathname）

　　}))

　　在定义了上述三部分代码之后，您可以在不刷新页面的情况下显示普通路径URL和Ajax内容

　　最后，设置服务器端

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

　　如果仔细查看上面的代码，您会发现有一个noscript标记，这是一个秘密

　　我们将希望搜索引擎收录使用的所有内容放在noscript标记中。这样，用户仍然可以在不刷新页面的情况下执行Ajax操作，但搜索引擎将收录每个网页的主要内容