ajax与瀑布流

jquery

---

前言

对于瀑布流，百度百科上这样解释：瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。布局都是css的东西，不想细说。为了简单还有节省带宽，demo用文字替换了图片。主要实现了当页面滚动时不断向页面底部追加数据的效果。

一，ajax是什么

ajax不是一种新的语言，而是一种异步加载数据的技术，可以理解为一种算法。通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页进行局部更新。用javascript可以实现，不过通常用javascript类库jquery来写，jquery封装好的ajax()等方法可以快速创建ajax页面。

同步与异步

在ajax出现之前网页都是同步加载的。同步的意思是：客户端发起数据请求，经过TCP的三次握手最终与服务器建立连接，然后等待服务器传输数据。在这期间客户端不能做其他事情，只能等待，就像刷新页面，必须等待刷新完成（学过计算机网络的应该都知道）。而异步就是在服务器处理请求时，客户端还可以做其他事情，不必等待。相当于无刷新。

二，瀑布流分析

其实ajax在瀑布流中的应用可以很简单,一个$.get()方法就可以实现。http请求主要分为get和post这两种方法。get方法请求数据相当于读操作，而post方法既可以读取数据，也可以向服务器写入数据。实现瀑布流的基本思想就是监听scroll滚动事件，在发生滚动事件时测量当前滚动条的位置，当数据容器高度小于滚动距离时就加载新的内容。
下面是主要的html结构：

<div id="main">
  <div class="post">
  //文章
    <p>....</p>
  </div>
  <a href="1.html" id="more">更多...</a>
  <span id="bottom"></span>
</div>

三，get()方法的应用

$(selector).get(url,data,success(response,status,xhr),dataType) selector:选择器，可以没有，可直接用$.get()
url:向服务器请求数据的url，必须
data:服务器返回的返回值,可选
success：请求成功时的回调函数，可选
dataType:返回数据的类型，一般有text和json，可选

var url=$("#more").attr("href");
    if (url) {
        $.get(url,function(data){
            $(".post").append(data);
        })
    }   

append()方法将服务器返回的数据追加到.post容器内

四，自定义nextPage事件

当页面事件较多时，如果总是用jquery自己的事件比如click,mouseover等会比较混乱。这时候用户自定义事件就比较明确了。如果把nextPage事件绑定到触发该事件的链接上，就必须等待DOM就绪，比较慢。把处理程序绑定到document上，无需等待DOM就绪，一打开页面就可立即被调用。形式如下：

(function($){
  $(document).on('nextPage', function(event) {
  //事件内容
  });
})(jQuery);

一次触发可导致多个绑定的事件处理程序运行，比如滚动窗口时同时追加新内容和更新链接的href属性。

(function($){
// 定义自定义事件nextPage的事件处理程序
$(document).on('nextPage', function(event) {
    event.preventDefault();
    var url=$("#more").attr("href");
    if (url) {
        $.get(url,function(data){
            $(".post").append(data);
        })
    }   
});
var pageNum=1;
$(document).on('nextPage',function(event) {
    event.preventDefault();
    pageNum++;
    if (pageNum<6) {
        // 动态更新链接
        $("#more").attr("href",pageNum+".html").text("加载中...");

    }else{
        $("#more").remove();
        $("span#bottom").html("<h2>没有啦！</h2>")
    }
});

})(jQuery);

五，scroll(滚动)事件监听

当主容器距浏览器窗口的高度比滚动内容距离小时，就触发nextPage事件

function checkScrollPosition(){
    var distance=$(window).scrollTop()+$(window).height();
    if ($("#main").height()<=distance) {
        // 触发nextPage事件
        $(document).trigger('nextPage');
    };
}

然后给window绑定scroll处理程序，滚动时立即执行checkScrollPosition函数

$(window).scroll(checkScrollPosition);

这样就完成了整个瀑布流过程。

六，节流优化

实现瀑布流的主要问题是性能，尽管代码并不复杂，但checkScrollPosition()函数却需要计算页面和窗口的距离。由于某些浏览器中的scroll事件会在窗口滚动期间重复触发，因此计算过程会不断积累。最终导致页面忽急忽缓，反应迟钝,为了解决这个问题就需要节流事件,这个技术会限制一些无谓的计算，即不是每次事件发生都计算，而是选择在部分事件发生时计算。

var scrolled=false;
    $(window).scroll(function(){
        scrolled=true;
    })
    setInterval(function(){
        if (scrolled) {
           checkScrollPosition();
           scrolled=false;
        };
    },250);//每隔250ms执行一次checkScrollPosition()函数
    checkScrollPosition();

后记

这个例子只是ajax的一个小应用,实现这个效果主要用了事件处理。关于ajax还有很多可以研究的东西，比如ajax的历史记录问题，这个问题我还不会解决。
因为ajax是和服务器交互，所以这些程序都要放到web服务器里才能看到效果，本地测试可以用apache服务器。