ajax/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax package</title>
</head>
<style>
    ul,li {
        margin: 0;
        padding: 0;
    }
    #ct li {
        list-style: none;
        border: 1px solid #ccc;
        padding: 10px;
        margin-top: 10px;
        cursor: pointer;
    }
    #load-more {
        display: block;
        margin: 10px auto;
        text-align: center;
        cursor: pointer;
    }
    #load-more img {
        width: 40px;
        height: 40px;
    }
    .btn {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 80px;
        border: 1px solid #e27272;
        border-radius: 3px;
        text-align: center;
        text-decoration: none;
        color: #e27272;
    }
    .btn:hover {
        background: green;
        color: #fff;
    }
</style>
<body>
    <ul id="ct">
        <li>内容1</li>
	    <li>内容2</li>
    </ul>
    <a href="#" class="btn" id="load-more">加载更多</a>

</body>
<script>

     /*
    1. GET
    2. /loadMore
    3.
        {
        index: 0,
        length: 5
        }
    4. ['news1','news2',...'news5']
    */ 


    var btn = document.querySelector('#load-more')
    var ct = document.querySelector('#ct')
    var pageIndex = 0
    var isDataArrive = true //默认情况数据是到来的

    btn.addEventListener('click',function(e){
        e.preventDefault()

        if (!isDataArrive){    //用户点击按钮时，判断数据是否到来，没有就return
            return;
        } 

        loadData(function(news){  //当执行options.onSuccess(results)后，把function(news){}当做参数传递给function loadData(callback){}里面的两个callback
            renderPage(news)
            pageIndex = pageIndex + 5
            isDataArrive = true
        })
        isDataArrive = false
    })

    function loadData(callback){
        ajax({
            type: 'get',
            ulr: '/loadMore',
            data: {
                index: pageIndex,
                length: 5
            },
            onSuccess: callback,  //这是个函数，没有括号，说明不执行
            onError: function(){
                console.log('error')
            }
        })
    } 

    function renderPage(news){
        var fragment = document.createDocumentFragment()
        for(var i=0;i<news.length;i++){
            var node = document.createElement('li')
            node.innerText = news[i]
            fragment.appendChild(node)
        }
        ct.appendChild(fragment)
    }

    function ajax(options){
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function(){  //这个函数先不执行，赋值给onreadystatechange
            if(xhr.readyState === 4){
                if(xhr.status === 200 || xhr.status === 304){
                var results = JSON.parse(xhr.responseText)
                options.onSuccess(results)  // 相当于 callback(results)  
                }else{
                    options.onError()
                }
            }
        }
        var query = '?'
        for(key in options.data){
            query += key + '=' + options.data[key] + '&'
        }
        query = query.substr(0,query.length-1)
        xhr.open(options.type,options.ulr + query,true)
        xhr.send()  //请求发送后，服务器给数据，才会执行xhr.onreadystatechange = function(){}
    }


</script>
</html>