Ajax方式分页加载列表实现

(function(window,undefined) {
    function ajax(options) {

        //编码数据
        function setData() {
            //设置对象的遍码
            function setObjData(data, parentName) {
                function encodeData(name, value, parentName) {
                    var items = [];
                    name = parentName === undefined ? name : parentName + "[" + name + "]";
                    if (typeof value === "object" && value !== null) {
                        items = items.concat(setObjData(value, name));
                    } else {
                        name = encodeURIComponent(name);
                        value = encodeURIComponent(value);
                        items.push(name + "=" + value);
                    }
                    return items;
                }
                var arr = [],value;
                if (Object.prototype.toString.call(data) == ‘[object Array]‘) {
                    for (var i = 0, len = data.length; i < len; i++) {
                        value = data[i];
                        arr = arr.concat(encodeData( typeof value == "object"?i:"", value, parentName));
                    }
                } else if (Object.prototype.toString.call(data) == ‘[object Object]‘) {
                    for (var key in data) {
                        value = data[key];
                        arr = arr.concat(encodeData(key, value, parentName));
                    }
                }
                return arr;
            };
            //设置字符串的遍码，字符串的格式为：a=1&b=2;
            function setStrData(data) {
                var arr = data.split("&");
                for (var i = 0, len = arr.length; i < len; i++) {
                    name = encodeURIComponent(arr[i].split("=")[0]);
                    value = encodeURIComponent(arr[i].split("=")[1]);
                    arr[i] = name + "=" + value;
                }
                return arr;
            }

            if (data) {
                if (typeof data === "string") {
                    data = setStrData(data);
                } else if (typeof data === "object") {
                    data = setObjData(data);
                }
                data = data.join("&").replace("/%20/g", "+");
                //若是使用get方法或JSONP，则手动添加到URL中
                if (type === "get" || dataType === "jsonp") {
                    url += url.indexOf("?") > -1 ? (url.indexOf("=") > -1 ? "&" + data : data) : "?" + data;
                }
            }
        }
        // JSONP
        function createJsonp() {
            var script = document.createElement("script"),
                timeName = new Date().getTime() + Math.round(Math.random() * 1000),
                callback = "JSONP_" + timeName;

            window[callback] = function(data) {
                clearTimeout(timeout_flag);
                document.body.removeChild(script);
                success(data);
            }
            script.src = url + (url.indexOf("?") > -1 ? "&" : "?") + "callback=" + callback;
            script.type = "text/javascript";
            document.body.appendChild(script);
            setTime(callback, script);
        }
        //设置请求超时
        function setTime(callback, script) {
            if (timeOut !== undefined) {
                timeout_flag = setTimeout(function() {
                    if (dataType === "jsonp") {
                        delete window[callback];
                        document.body.removeChild(script);

                    } else {
                        timeout_bool = true;
                        xhr && xhr.abort();
                    }
                    console.log("timeout");

                }, timeOut);
            }
        }

        // XHR
        function createXHR() {
            //由于IE6的XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。
            //所以创建XHR对象，需要在这里做兼容处理。
            function getXHR() {
                if (window.XMLHttpRequest) {
                    return new XMLHttpRequest();
                } else {
                    //遍历IE中不同版本的ActiveX对象
                    var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];
                    for (var i = 0; i < versions.length; i++) {
                        try {
                            var version = versions[i] + ".XMLHTTP";
                            return new ActiveXObject(version);
                        } catch (e) {}
                    }
                }
            }
            //创建对象。
            xhr = getXHR();
            xhr.open(type, url, async);
            //设置请求头
            if (type === "post" && !contentType) {
                //若是post提交，则设置content-Type 为application/x-www-four-urlencoded
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
            } else if (contentType) {
                xhr.setRequestHeader("Content-Type", contentType);
            }
            //添加监听
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (timeOut !== undefined) {
                        //由于执行abort()方法后，有可能触发onreadystatechange事件，
                        //所以设置一个timeout_bool标识，来忽略中止触发的事件。
                        if (timeout_bool) {
                            return;
                        }
                        clearTimeout(timeout_flag);
                    }
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                        success(xhr.responseText);
                    } else {
                        error(xhr.status, xhr.statusText);
                    }
                }
            };
            //发送请求
            xhr.send(type === "get" ? null : data);
            setTime(); //请求超时
        }


        var url = options.url || "", //请求的链接
            type = (options.type || "get").toLowerCase(), //请求的方法,默认为get
            data = options.data || null, //请求的数据
            contentType = options.contentType || "", //请求头
            dataType = options.dataType || "", //请求的类型
            async = options.async === undefined ? true : options.async, //是否异步，默认为true.
            timeOut = options.timeOut, //超时时间。 
            before = options.before || function() {}, //发送之前执行的函数
            error = options.error || function() {}, //错误执行的函数
            success = options.success || function() {}; //请求成功的回调函数
        var timeout_bool = false, //是否请求超时
            timeout_flag = null, //超时标识
            xhr = null; //xhr对角
        setData();
        before();
        if (dataType === "jsonp") {
            createJsonp();
        } else {
            createXHR();
        }
    }
    window.ajax = ajax;
  })(window);

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import com.alibaba.fastjson.JSONObject;


@RestController
@RequestMapping("/asset")
public class AssetRS {

    public static final Logger logger = LoggerFactory.getLogger(AssetRS.class);
    

    private String tableName;
    
    private Set<String> columnIds;
    
    @Autowired
    private ISearchAssetBiz searchAssetBiz; 
    
    @ResponseBody
    @RequestMapping(value = "/search",method={RequestMethod.POST,RequestMethod.GET})
    public SearchAssetInfo seachAsset(HttpServletRequest request, @RequestBody SearchPageInfo page){
        int pageSize = page.getPageSize();
        int pageNo = page.getPageNo();
        
        //聚类查询字段
        String fieldGroup = "";
        StringBuffer groups = new StringBuffer("");
        List<String> fields = page.getFields();
        if(fields != null){
            for (String field : fields) {
                groups.append(",").append(field);
            }
            fieldGroup = groups.substring(1);
        }
        
        
        List<String> ids = new ArrayList<>();
        ids.addAll(columnIds);
        int appId = page.getAppId()==null?1:Integer.valueOf(page.getAppId());
        
        int count = searchAssetBiz.getSearchAssetCount(tableName,page.getWhereMap(),appId,ids);
        //分页信息
        SearchPageInfo searchPage = new SearchPageInfo();
        searchPage.setCount(count);
        searchPage.setPageNo(pageNo);
        searchPage.setPageSize(pageSize);
        
        List<MdiyAttrInfo> list = searchAssetBiz.getSearchGroup(tableName, page.getWhereMap(), appId, ids,
                StringUtils.hasText(fieldGroup) ? fieldGroup : null);
        for (MdiyAttrInfo mdiyAttrInfo : list) {
            mdiyAttrInfo.getCategory(); //去重
        }
        
        List<MdiyAttrInfo>  assets = searchAssetBiz.querySearchList(tableName, page.getWhereMap(), appId, ids, pageNo, pageSize, page.getSortMap());
        
        SearchAssetInfo searchAssetInfo = new SearchAssetInfo();
        searchAssetInfo.setArticles(assets);
        searchAssetInfo.setPage(searchPage);
        
        return searchAssetInfo;
    }
    
    @ResponseBody
    @RequestMapping(value = "/search_jsonp",method={RequestMethod.GET})
    public void seachAssetJsonp(HttpServletRequest request,
            HttpServletResponse response,
            @RequestParam(required=false) int pageNo,
            @RequestParam(required=false) int pageSize,
            @RequestParam(required=false) String basictitle,
            @RequestParam(required=false) String Category,
            @RequestParam(required=false) String tag,
            @RequestParam(required=false) String startDate,
            @RequestParam(required=false) String endDate,
            @RequestParam(required=false) String sortField,
            @RequestParam(required=false) String sort){
        
        SearchPageInfo page = new SearchPageInfo();
        page.setPageNo(pageNo);
        page.setPageSize(pageSize);
        Map<String,String> whereMap = new HashMap<>();
        if(StringUtils.hasText(basictitle)){
            whereMap.put("basictitle", basictitle);
            page.setWhereMap(whereMap);
        }
        
        Map<String, String> sortMap = new HashMap<>();
        if(StringUtils.hasText(sortField)){
            sortMap.put(sortField, sort);
            page.setSortMap(sortMap);
        }
        List<String> list = new ArrayList<>();
        list.add("Category");
        list.add("Tags");
        page.setFields(list);
        String callback = (String)request.getParameter("callback");
        SearchAssetInfo info  = seachAsset(request, page);
        String retStr = callback + "(" + JSONObject.toJSONString(info)+")"; 
        try {
            response.getWriter().print(retStr);
        } catch (IOException e) {
            e.printStackTrace();
        }  
    }
    
    
}