使用Ajax构建数据动态加载

2019独角兽企业重金招聘Python工程师标准>>>

    android导航项目云端开发中，在对大数据进行展示的时候，为了减少对服务器的压力，需要使用到分页，由用户点击页码从而浏览更多的数据，比如百度搜索出来的网页；但假如在另一场景，用户需要看很多的数据，最新的、以前的，如果使用分页，用户就不得不在浏览了一页的数据后点击下一页完成浏览，如果用户需要查看10万条数据，而每页只能显示20条数据，那用户完蛋了，他需要点击5000次才能完成浏览工作。用户的体验非常不好，那么如何在这一问题上提高用户的浏览体验呢？在ajax出现后，这一问题非常好解决，使用ajax构建一种瀑布流的方式。在用户向下滑动鼠标滚轮的时候，网页的滚动条也跟着下滑，在滚动条滚动到网页底部的时候，自动加载数据到当前网页下，用户即可在不知不觉滑动鼠标滚轮的过程中完成浏览，具体实现可以参考QQ空间浏览好友动态。
 

ajax实现瀑布流的功能思路：

1.数据是根据滚动条滚动到网页底部的时候加载的，那就需要监听滚动条事件，使用javascript监听的方式是：滚动距离的总长 + 滚动到的当前位置 >= 页面文档的高度；这样的处理会避免浏览器兼容带来的监听事件失败的的问题。Javascript监听到滚动条滚动到网页底部的事件后，进入第二步。
 

2.滚动条到底部时，就使用ajax向后台发送请求，这里有个细节问题，就是初始数据的问题，用户第一次进入数据展示界面的时候，页面就初始化了一部分数据了，在用户滑动滚动条浏览完毕后，才会加载之后的数据；问题就是第一次和之后的第二次、第三次...... 是不同的，在开发的过程中需要注意。ajax发送了请求后，进入第三步。
 

3.后台接收到请求后，判断用户是第一次还是第二次请求，从而做出不同的响应

if($_GET[type] == "head"){

head();

}else {

tail();

}

第一次请求比较简单，假如页面初始化显示需要10条数据的话，则后台使用分页准备 10条数据发送给前台即可：select * from n    ews limit 0,10; 在第二次和之后 的请求就稍微麻烦一点，因为后台不知道当前加载到第几条数据了，它后续的加载就不知道从    何开始了，这个问题在第五步在解决，现在先把第一次请求的数据发送回去。后台把查询出来的数据发送给前台，进入第四步。
 

4.前台拿到数据后，准备拼接。拼接的时候需要特别注意，因为ajax是异步刷新的机制，如何不做任何处理就显示到页面上，那么后面来的数据会把前面的数据冲掉，瀑布流的功能也就实现不了了。通过动态请求来的数据必须要像竹节一样一节一节的拼接起来，jquery提供了这样一个函数：append()，可以将拼接到网页文档任意一个节点上，如：$("#Pod").append($imgLi); 至此，第一次请求的数据加载完毕，进入第五步。
 

5.上面说过，动态加载的瀑布流第一次和第二次是有区别的，前面展示的是第一次的初始化数据加载的过程，第二次加载的过程是由用户滑动着滚动条看完数据后启动的，这里后台要在第一次加载的数据后继续查询出数据给页面显示，如何得到当前页面已经显示了多少条呢？我的解决方法就是在ajax拼接数据的时候，定义一个变量记录下来拼接了多少条数据，在第二次请求数据的时候将这个变量发送给后台，后台根据这个变量的值来查询数据库。
 

使用jquery来实现动态的发送请求代码如下：

            $.ajax({

                    url:'com.sczn.controller/dynamicRequest.php',

                    type:'GET',

                    data: "type=head",

                    success:function(data){

                    var arr = ""+data+"";

                    var dataObj = eval("("+arr+")");

                    $.each(dataObj,function(idx,item){

                    Var $img Li= $("<tr><td>"+item.newsType+"</td><td>"+item.newsHeadlines+"</td><td>"+it                    em.newsContent+"</td><td>"+item.newsUpTime+"</td><td>"+item.newsUpPeople+"</td></tr>"                                );

                     $("#Pod table").append($imgLi);

                        });

                    }

            });

Php后台处理代码：

        $sql="select * from news limit 0,10";

        $result=mysql_query($sql);

        $count=mysql_num_rows($result);

            if($count=="0"){

                echo "数据库没有数据";

            } else {

                while($row=mysql_fetch_array($result)){

                        $ro['newsType'] = $row['newsType'];

                        $ro['newsHeadlines']=$row['newsHeadlines'];

                        $ro['newsContent'] =$row['newsContent'];

                        $ro['newsUpTime'] =$row['newsUpTime'];

                        $ro['newsUpPeople'] =$row['NewsUpPeople'];

                        $da[]= array_merge($ro);

            }

                echo $da;

            }

瀑布流这种展示数据的方式在解决用户浏览体验的时候有优点也有缺点，在大数据量的时候，瀑布流依然不适用，比如用户察看至一万条数据时，无意中刷新了页面，那么数据又是从第一条开始显示的，用户想接着看一万条之后的数据，那就要得先滑动鼠标加载至一万条数据后，但是在用户浏览数据在不是很大的时候，这是最新、最好的一种方式。

转载于:https://my.oschina.net/hehongbo/blog/203337