八爪鱼教程——AJAX滚动教程

AJAX滚动教程

本文用于讲述AJAX网站中AJAX滚动的设置。

示例网站：

http://weibo.com/1893801487/F8yXEAh0i?ref=feedsdk&type=comment#_rnd1497952450258

AJAX滚动示例：

步骤一：打开网页→设置循环提取数据

说明：

如图所示，我们采集的是微博页面，此处设置循环提取所有该微博评论的评论人和评论内容，提取为一条信息，我们在下一步验证网页是否AJAX滚动模式中可以用到循环提取中显示循环列表的作用。

步骤二：验证网页是否AJAX滚动模式→设置页面加载完成后向下滚动

说明：

验证网页是否AJAX滚动模式步骤中，我们首先重新打开网页查看了并点击了循环框，通过循环列表我们可以看到当前网页可以提取到多少条数据，随后我们将网页向下滚动，可以发现滚动条回弹了两次，回弹表示页面加载出了新的数据，同时观察网页没有加载状态图标，说明该网页使用了AJAX滚动方法来加载数据。通过网页回弹了两次，多加载出来30条数据我们可以知道，每次新加载会加载出15条数据。

AJAX滚动的两种方式：

AJAX滚动有两种模式，分别是向下滚动一屏和直接滚动到底部。

直接滚动到底部是直接让界面滚动到页面的最下部，向下滚动一屏是让网页滚动当前屏幕一屏的内容。一般常用直接滚动到底部功能，特殊情况使用向下滚动一屏。

下图可以看到本示例中，滚动前后，图1图2循环列表内数据条目由15条变为45条，而数据的开头部分未发生改变，说明页面滚动后，新加载的数据出现在原本的数据后面，之前的数据依然会显示，这时我们可以使用滚动到底部，页面加载了两次，我们便设置滚动次数为2-3次即可，滚动时间是防止滚动后，数据还没加载出来便再次滚动导致不能加载出新数据，示例中设置为2秒。

图1：滚动到底部滚动前循环列表

图2：滚动到底部滚动后循环列表

步骤三：保存并启动

那什么情况下使用向下滚动一屏呢？

假如我们滚动网页时发现向下滚动到底部后，网页中原本开头部分或者中间某部分的数据被隐藏，需要向上滚动重新加载，即网页只加载一屏新增数据，我们假设示例情况变更为只加载开头部分与仅一屏新增数据的情况，具体如下图：

图3：向下滚动一屏滚动前循环列表（图中为循环列表最后几条数据）

图4：向下滚动一屏第一次滚动循环列表（图中为循环列表中，新增数据与最初数据接合处）

图5：向下滚动一屏第二次滚动循环列表（图中为循环列表中，新增数据与最初数据接合处）

上图分别为滚动前后的循环列表，可以看到滚动前即图3中，循环可以抓取到页面内15条数据，而滚动第一次即图4中，循环列表可以抓取到的数据为30条，数据接合处如图所示。滚动第二次即图5中，循环列表可以抓取到的数据依然为30条，但是滚动第一次图4下方新增的15条数据被隐藏，只显示开头数据以及第二次滚动新增数据。

面对此种情况，我们便需要向下滚动一屏功能来实现循环采集一屏内容数据的功能，具体操作需要你有一定八爪鱼使用经验，这里不做过多叙述。