Ajax-node分页练习

一个简单的ajax获取数据，实现分页的功能，node搭建后台，好久没用总结了，记录一下，代码无价值，思想无价。

先写服务器吧，因为没有合适的接口和数据，就自己造了一些弱到爆的数据。

第一步：处理文件资源请求

首先require内置的http、fs、url模块，三个模块分别的作用是处理http，文件操作，处理url地址的。
创建服务，监听端口。
处理文件，通过pathname可以得到不同类型的请求文件，然后根据地址将不同的文件返回给客户端。

第二步：处理数据接口

通过pathname获得到之前规定好的数据请求地址，通过query来获得客户端传递的参数
根据参数将对应部分的信息得到生成json字符串返回给客户端

大体的步骤就是这样的，注释中再进一步解释

//引入系统内置的三个模块
var http = require('http');//处理和http相关的所有事务
var fs = require('fs');//文件的IO操作
var url = require('url');//提供了操作url的一系列方法
//创建http服务，匿名函数中传递两个参数，request-->请求 ， response-->响应
var server = http.createServer(function(request,response){
    //url.parse可以将请求地址格式化成一个对象，第二个参数可以将url对象中的query中url地址中传过来的参数格式化为query:{n:'5',a:'6'},如果不写参数默认是false，则query为： query:'n=5&a=6', 所以还是传一个true较好。
    var urlObj = url.parse(request.url);
    //pathname获得到url地址中的文件：pathname: '/index.html', 注意前面是带/的。
    var pathname = urlObj.pathname;
    //获得客户端传递的参数
    var query  = urlObj.query;
    //一、处理资源文件
    var reg = /\.(html|css|js)/i; //正则用来匹配文件的后缀名
    if(reg.test(pathname)){
        //try、catch用来捕获没有处理的资源文件，避免报错，比如说客户端默认请求的ico（虽然它也不报错）。
        try{
            //用正则中的exec方法匹配第一个分组，转为小写（大小写都行）
            var suffix = reg.exec(pathname)[1].toLowerCase();
            var suffixType = 'text/plain';//MIME的初始值
            switch (suffix){
                case 'html':
                    suffixType = 'text/html';
                    break;
                case 'css':
                    suffixType = 'text/css';
                    break;
                case 'js':
                    suffixType = 'text/javascript';
                    break;
            }
            //使用fs内置模块的readFileSync方法，根据pathname将对应的文件找到，注意编码格式，不是utf-8 ，而是utf8。
            var conFile = fs.readFileSync('.'+pathname,'utf8');
            //编写响应头，内容报包括MIME类型（告诉客户端已什么格式去读文件）和 编码格式
            response.writeHead(200,{'content-type':suffixType+'; charset=utf-8'});
            //将文件发送到客户端
            response.end(conFile)
        }catch (e){
            //如果获得到意外的文件请求，返回404就好了。
            response.writeHead(404);
            response.end();
        }
    };
    //二、处理数据请求
    //规定只要是用过getDate请求的都是信息请求
    if(pathname == '/getData'){
        //获得到query中的n值，如果没有默认为1，
        var n = query['n']||1;
        //因为没有连接数据库，只能把json数据放到一个文件里面，是有一点low啊，哈哈！
        //fs中的读取文件，readFileSync(文件地址,读取的编码格式)
        var data = fs.readFileSync('./index.json','utf8');
        //读取到的是json字符串，转为json对象
        data = JSON.parse(data);
        //total 为总条数
        var total = data.length;
        var obj = {};
        var ary = [];
        //计算好参数对应的条数，得到十条数据
        for(var i= (n-1)*10;i<=n*10-1;i++){
            var curData = data[i];
            //有可能末尾页数据不足十条，就直接break
            if(i>data.length-1){
                break;
            }
            //将数据push到数组中
            ary.push(curData);
        }
        //最终传递到客户端的数据格式为这样的
        obj = {
            total:Math.ceil(data.length/10),//total是页数
            data:ary      //data为数据
        }
        //编写响应头信息
        response.writeHead(200,{'content-type':'application/json; charset=utf-8'});
        //数据传输必须是json字符串，如果是对象会抛出类型错误
        response.end(JSON.stringify(obj));
    }
});
//监听端口
server.listen(4545,function(){
    console.log('success');
})

接下来是客户端了，首先第一步就是html页面布局了，这里就不写了，先写ajax代码吧

感觉没什么好解释的，就是简单的ajax

function ajax(options){
    //规定传递的必须是一个下面类型的对象
    var _default = {
        url:'',//地址
        type:'get',//请求方式
        async:'true',//异步
        success:null,//成功的方法
        data:null//发送的数据
    }
    for(var key in options){
        if(options.hasOwnProperty(key)){
            _default[key] = options[key];
        }
    }
    var xhr = new XMLHttpRequest();
    xhr.open(_default.type,_default.url,_default.async);
    xhr.onreadystatechange = function(){
        if(xhr.readyState ===4&&/^2\d{2}$/g.test(xhr.status)){
            var data = xhr.responseText;
            data = JSON.parse(data);
            if(typeof _default.success === 'function'){
                _default.success(data);
            }
        }
    }
    xhr.send()
}

客户端的 js代码

//获得到对应的元素
var n = 1;//n存储的是当前的页数
var total = null;//存储的是总页数
var boxList = document.getElementById('boxList');
var pageList = document.getElementById('pageList');
var boxBtn = document.getElementById('boxBtn');
var search = document.getElementById('search');
//页面首次加载第一页的数据
BindData()
//绑定数据的方法
function BindData() {
    ajax({
        type: 'get',
        url: '/getData?n=' + n + '&_=' + Math.random(),
        success: callback
    });
    function callback(data) {
        if(!data){
            return;
        }
        total = data['total'];
        data = data['data'];
        var str = '';
        for (var i = 0; i < data.length; i++) {
            var curData = data[i];
            str += '<li>';
            str += '<span>' + curData['id'] + '</span>';
            str += '<span>' + curData['name'] + '</span>';
            str += '<span>' +( curData['sex']?'男':'女') + '</span>';
            str += '<span>' + curData['score'] + '</span>';
            str += '</li>'
        }
        boxList.innerHTML = str;
        str = '';
        for (var i = 1; i <= total; i++) {
            if (n == i) {
                str += '<li class="select">' + i + '</li>';
            } else {
                str += '<li>' + i + '</li>';
            }
        }
        pageList.innerHTML = str;
    };
};
//点击相应的元素获得到相应的数据，需要给每一个元素绑定事件，所以用事件委托的方式来写，通过判断事件源来进行相应的操作
boxBtn.onclick =function(e){
    e = e||window.event;
    var tar = e.target;
    var target = tar.tagName.toUpperCase();
    if(target === 'SPAN'){
        var inn = tar.innerHTML;
        switch (inn){
            case 'next':
                if(n==total)return;
                n++;
                break;
            case 'prev':
                if(n==1)return;
                n--;
                break;
            case 'first':
                if(n==1)return;
                n=1;
                break;
            case 'last':
                if(n==total)return;
                n=total;
                break;
        }
    };
    if(target==='LI'){
        var inn = tar.innerHTML;
        n=inn;
    }
    //搜索框数值同步
    search.value = n;
    //无论点击了哪一个元素，都会改变全局的变量n，再调用BindData方法请求数据
    BindData()
}
//搜索框跳转到对应的页面
window.onkeyup = function(e){
    e = e||window.event;
    if(e.keyCode =='13'){
        n = search.value;
        BindData()
    }
}

一点瑕疵就是没有加搜索框中的格式校验，不影响大局。

因为没有在php服务器上搭建node服务器，所以就没有DOME了。大体就是这个样子的

DO YOUR WORK ,DON'T BE STUPID.

文章评论