分頁查詢 ? 異步 : 同步

上篇博客說到了同步請求的分頁查詢：
you can click here to konw the knowledge
異步請求開發流程圖：
第一步： html頁面中跳轉新頁面

<a href="${APP_PATH }/user/toindex.do"><i class="glyphicon glyphicon-user"></i> 用戶維護</a> 

在表現層進行地址攔截：並返回新頁面，此時是沒有數據的

	// 異步請求
	@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="#">上一頁</a></li>';
						}else{
							
						       tent += ' <li><a href="#" ο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="#" οnclick="pageChange('+i+')">'+i+'</a></li> ';
			             }
							if(page.pageno==page.totalno)
							{
							  tent += ' <li class="disabled"><a href="#">下一頁</a></li>';
							}else{
							  tent + = ' <li><a href="#" ο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;
	}

其實，只要按着流程圖看一遍，就能知道大體的思路是咋樣的。
總結：
對於異步請求對用戶很友好，而同步請求加載一個頁面需要很長時間，很是頭疼。