分页查询 ? 异步 : 同步

上篇博客说到了同步请求的分页查询：

you can click here to konw the knowledge

异步请求开发流程图：

第一步： html页面中跳转新页面

在表现层进行地址拦截：并返回新页面，此时是没有数据的

// 异步请求
	@RequestMapping("/toindex")
	public String queryAjaxSize() {
		return "user/index";
	}
           

第二步： 渲染页面，调用异步请求函数：

我这里的代码，将 pageno,pagesize 封装成一个对象，方便传值。

var obj = {
                    "pageno" : 1 ,
                    "pagesize": 10
                     };
            //套路化的代码：
            function queryAjaxSize(pageno){
                obj.pageno = pageno,
               $.ajax({
                   type : "POST",
                   data: obj,
                   // 发起异步请求的路径
                   url : "${APP_PATH}/user/index.do",
                    sendBefore function(){
							return true;
                           },
                     success function(result){
                           //获取到返回的对象
                           if(result.success){
                               var page = result.page;
                               var details = page.details;
                                 //数据拼串
                               var contex = '';
                               //遍历对象
                               $.each(details,function(i,n){
		                              contex +='   <tr>';
		                              contex += '      <td>'+i+'</td>';
		                         	  contex += '     <t><input type="checkbox"></td>';
		                              contex += '      <td>'+ n.loginacct+'</td>';
		                              contex += '      <td>'+ n.username+'</td>';
		                              contex += '      <td>'+ n.email+'</td>';
		                              contex += '      <td>';
		                         	  contex += '  <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
		                         	  contex += '  <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
		                         	  contex += '  <utton type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
		                         	  contex += '  </td>';
		                              contex += '    </tr>';
		                               }
                                 );
                               // 刷新部分
                               $("tbody").html( contex );

							var tent = '' ;

	                       if(page.pageno==1)
						{
						  tent += '<li class="disabled"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >上一页</a></li>';
						}else{
							
						       tent += ' <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnclick="pageChange('+(pageno-1)+')">上一页</a></li>';
						}
					        
						for(var i =1;i<page.totalno;i++)
						{
							tent + = '  <li' ; 
							     if(page.pageno==i){
							       tent + =' class=" active"';	
							   }
							 tent + = ' ><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnclick="pageChange('+i+')">'+i+'</a></li> ';
			             }
							if(page.pageno==page.totalno)
							{
							  tent += ' <li class="disabled"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >下一页</a></li>';
							}else{
							  tent + = ' <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  οnclick="pageChange('+pageno+1+')">下一页</a></li>';
							}
							$(".pagination").html(tent);             
                               }else{
							alert(result.mess);
                                   }                              
                               },
                      error function(result){
                            alert("no found!!");
                             },
                  })
            }   
           

这部分代码是经过异步请求被拦截后执行的返回结果 result 在后台获取，将其数据提取出来，在用 jquery中的部分刷新函数，对需要数据的部分进行刷新。

第三步： 异步请求拦截，表现层调用代理对象进行数据查询。

@RequestMapping("/index")
	@ResponseBody // 将对象序列化为 json，以流的方式返回
	public Object querySize(@RequestParam(value = "pageno", required = false, defaultValue = "1") Integer pageno,
			@RequestParam(value = "pagesize", required = false, defaultValue = "10") Integer pagesize,
			String queryValue) {
		AjaxResutl result = new AjaxResutl();
		try {

			Map<String, Object> params = new HashMap<String, Object>();
			params.put("pageno", pageno);
			params.put("pagesize", pagesize);
			Page page = us.queryPage(params);
			result.setSuccess(true);
			// 将对象放入 request 域中
			result.setPage(page);
		} catch (Exception e) {
			result.setSuccess(false);
			result.setMess("quest out !");
		}
		return result;
	}
	
           

然后在调用 服务层对象，和数据层对象进行数据的查询和传递。

在这里我们得创建一个 Ajax 的对象，用于存放结果，以及相应的参数传递。

public class AjaxResutl {
	private boolean success ;
	private String mess ;
	public Page getPage() {
		return page;
	}
	public void setPage(Page page) {
		this.page = page;
	}
	private Page page;
	public boolean isSuccess() {
		return success;
	}
	public void setSuccess(boolean success) {
		this.success = success;
	}
	public String getMess() {
		return mess;
	}
	public void setMess(String mess) {
		this.mess = mess;
	}

           

其实，只要按着流程图看一遍，就能知道大体的思路是咋样的。

总结：

对于异步请求对用户很友好，而同步请求加载一个页面需要很长时间，很是头疼。