AJAX滾動(dòng)教程

本文用于講述AJAX網(wǎng)站中AJAX滾動(dòng)的設(shè)置。

示例網(wǎng)站：

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

AJAX滾動(dòng)示例：

步驟一：打開網(wǎng)頁→設(shè)置循環(huán)提取數(shù)據(jù)

說明：

如圖所示，我們采集的是微博頁面，此處設(shè)置循環(huán)提取所有該微博評(píng)論的評(píng)論人和評(píng)論內(nèi)容，提取為一條信息，我們?cè)谙乱徊津?yàn)證網(wǎng)頁是否AJAX滾動(dòng)模式中可以用到循環(huán)提取中顯示循環(huán)列表的作用。

步驟二：驗(yàn)證網(wǎng)頁是否AJAX滾動(dòng)模式→設(shè)置頁面加載完成后向下滾動(dòng)

說明：

驗(yàn)證網(wǎng)頁是否AJAX滾動(dòng)模式步驟中，我們首先重新打開網(wǎng)頁查看了并點(diǎn)擊了循環(huán)框，通過循環(huán)列表我們可以看到當(dāng)前網(wǎng)頁可以提取到多少條數(shù)據(jù)，隨后我們將網(wǎng)頁向下滾動(dòng)，可以發(fā)現(xiàn)滾動(dòng)條回彈了兩次，回彈表示頁面加載出了新的數(shù)據(jù)，同時(shí)觀察網(wǎng)頁沒有加載狀態(tài)圖標(biāo)，說明該網(wǎng)頁使用了AJAX滾動(dòng)方法來加載數(shù)據(jù)。通過網(wǎng)頁回彈了兩次，多加載出來30條數(shù)據(jù)我們可以知道，每次新加載會(huì)加載出15條數(shù)據(jù)。

AJAX滾動(dòng)的兩種方式：

AJAX滾動(dòng)有兩種模式，分別是向下滾動(dòng)一屏和直接滾動(dòng)到底部。

直接滾動(dòng)到底部是直接讓界面滾動(dòng)到頁面的最下部，向下滾動(dòng)一屏是讓網(wǎng)頁滾動(dòng)當(dāng)前屏幕一屏的內(nèi)容。一般常用直接滾動(dòng)到底部功能，特殊情況使用向下滾動(dòng)一屏。

下圖可以看到本示例中，滾動(dòng)前后，圖1圖2循環(huán)列表內(nèi)數(shù)據(jù)條目由15條變?yōu)?/span>45條，而數(shù)據(jù)的開頭部分未發(fā)生改變，說明頁面滾動(dòng)后，新加載的數(shù)據(jù)出現(xiàn)在原本的數(shù)據(jù)后面，之前的數(shù)據(jù)依然會(huì)顯示，這時(shí)我們可以使用滾動(dòng)到底部，頁面加載了兩次，我們便設(shè)置滾動(dòng)次數(shù)為2-3次即可，滾動(dòng)時(shí)間是防止?jié)L動(dòng)后，數(shù)據(jù)還沒加載出來便再次滾動(dòng)導(dǎo)致不能加載出新數(shù)據(jù)，示例中設(shè)置為2秒。

圖1：滾動(dòng)到底部滾動(dòng)前循環(huán)列表

圖2：滾動(dòng)到底部滾動(dòng)后循環(huán)列表

步驟三：保存并啟動(dòng)

那什么情況下使用向下滾動(dòng)一屏呢？

假如我們滾動(dòng)網(wǎng)頁時(shí)發(fā)現(xiàn)向下滾動(dòng)到底部后，網(wǎng)頁中原本開頭部分或者中間某部分的數(shù)據(jù)被隱藏，需要向上滾動(dòng)重新加載，即網(wǎng)頁只加載一屏新增數(shù)據(jù)，我們假設(shè)示例情況變更為只加載開頭部分與僅一屏新增數(shù)據(jù)的情況，具體如下圖：

圖3：向下滾動(dòng)一屏滾動(dòng)前循環(huán)列表（圖中為循環(huán)列表最后幾條數(shù)據(jù)）

圖4：向下滾動(dòng)一屏第一次滾動(dòng)循環(huán)列表（圖中為循環(huán)列表中，新增數(shù)據(jù)與最初數(shù)據(jù)接合處）

圖5：向下滾動(dòng)一屏第二次滾動(dòng)循環(huán)列表（圖中為循環(huán)列表中，新增數(shù)據(jù)與最初數(shù)據(jù)接合處）

上圖分別為滾動(dòng)前后的循環(huán)列表，可以看到滾動(dòng)前即圖3中，循環(huán)可以抓取到頁面內(nèi)15條數(shù)據(jù)，而滾動(dòng)第一次即圖4中，循環(huán)列表可以抓取到的數(shù)據(jù)為30條，數(shù)據(jù)接合處如圖所示。滾動(dòng)第二次即圖5中，循環(huán)列表可以抓取到的數(shù)據(jù)依然為30條，但是滾動(dòng)第一次圖4下方新增的15條數(shù)據(jù)被隱藏，只顯示開頭數(shù)據(jù)以及第二次滾動(dòng)新增數(shù)據(jù)。

面對(duì)此種情況，我們便需要向下滾動(dòng)一屏功能來實(shí)現(xiàn)循環(huán)采集一屏內(nèi)容數(shù)據(jù)的功能，具體操作需要你有一定八爪魚使用經(jīng)驗(yàn)，這里不做過多敘述。