intermediate12/index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajaxExample</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-align: center;
        }
        li{
            margin: 10px 10px;
            font-size: 30px;
            border: 1px solid #999;
            cursor: pointer;
        }
        #load-more{
            margin-top: 10px;
            padding: 5px 10px;
            border-radius: 4px;
            color: white;
            background-color: #009688;
            text-decoration: none;
        }
        #load-more:hover{
            opacity: 0.8;
        }
    </style>
</head>
<body>
    <div class="ct">
        <ul>
            <li>news 1</li>
            <li>news 2</li>
        </ul>
        <ul id="addInThis"></ul>
        <a href="#" id="load-more">load more</a>
    </div>

    <script>
        function $(id) {
            return document.querySelector(id);
        }

        var pageIndex = 3;
        var isDataArrive = true;

        $('#load-more').addEventListener('click', function(e){
            e.preventDefault();

            if(!isDataArrive){
                return;
            }

            loadData(function(news){
                renderPage(news);

                pageIndex = pageIndex + 5;
                isDataArrive = true;
            });
            isDataArrive = false;

        });

        function loadData(callback) {
            ajax({
                type: 'get',
                url: '/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);
            }
            $('#addInThis').appendChild(fragment);
        }

        function ajax(options){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if( xhr.status === 200 || xhr.status == 304){
                        var results = JSON.parse(xhr.responseText);
                        options.onSuccess(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.url + query, true);
            xhr.send()
        }


    </script>
</body>
</html>