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(); ???????} ?????} ???????}