Ajax的async属性(通过ajax请求分页查询实例)

原创 2014年01月17日 13:18:45

jQuery.ajax( [settings ] )的官方解释为:

async (default: true)
Type: Boolean
By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

通过dhtmlxgrid的ajax请求加载后台分页数据实例看看:


jsp页面效果:(所有引入文件略)

						<div id="pagination" style="position: relative;float:right"></div>
						<div style="margin-top: 10px;margin-left:100px;">
							<input type="button" id="recede_charge_btn" class="btn01"
								onclick="doSure()" value="确定" />
							<input type="button" id="close_btn" class="btn01"
								onclick="doClose()" value="关闭" />
						</div>

JavaScript grid实现:
	var grid_invoices;
 grid_invoices = new dhtmlXGridObject('grid_invoices');
	grid_invoices.setImagePath("dhtmlxGrid/codebase/imgs/");
	grid_invoices.setHeader("发票号码,实收金额,收费日期");
	grid_invoices.setInitWidths("110,70,220");
	grid_invoices.setColAlign("center,center,center");
	grid_invoices.setColTypes("ro,ro,ro");
	grid_invoices.setSkin("dhx_custom");
	grid_invoices.init();
 loadCount_no();
JavaScript分页效果实现:

		function loadCount_no(){
	    var cardno = $("#search_value").val();
			$.ajax({
				async:false,
				cache:false,
				type:"POST",
				url:"clc/getInvoicesCount.htm",
				data:"cardno="+cardno,
				error:function(){
					alert("服务器内部错误!");
				},
				success:function(data){ 
					if(data=='fail'){
						alert("获取数据失败!");
					}else{
						 createPagination_no(data);
					}
				}
			});
		}

		var pageSize = 10;
		var pageIndex = 0;
		function createPagination_no(pageCount){//创建分页标签,pageCount为返回的记录数
			if(pageCount==0){
				pageCount=0;
			}
			//分页,pageCount是总条目数,这是必选参数,其它参数都是可选 
			$("#pagination").pagination(pageCount, { 
				callback: pageCallback_no, 
				prev_text: '上一页', //上一页按钮里text 
				next_text: '下一页', //下一页按钮里text 
				items_per_page: pageSize, //显示条数 
				num_display_entries: 6, //连续分页主体部分分页条目数 
				current_page: pageIndex, //当前页索引 
				num_edge_entries: 2 //两侧首尾分页条目数 
			});
		}

		function pageCallback_no(index, jq){//翻页回调
			pageIndex = index; //当前页索引
			loadgrid_no(index); 
			return false;
		}

		//条件查询获取当前页未处理报表
		function loadgrid_no(index){
	    var cardno = $("#search_value").val();
			if(index!=0){
				index = pageIndex;
			}
			$.ajax({
			type:"GET",
			url:"clc/getInvoices.htm?cardno="+cardno+"&index="+index+"&size="+pageSize,
			cache: false,
			async: false, 
			error:function(){
			  // alert("没有该病人记录!");
			},
			success: function(reply){
				if(reply=="fail"){
					alert("没有该病人记录!");
				}else{
					var jsons=eval("("+reply+")");
	                grid_invoices.clearAll();
	                for(var i=0;i<jsons.length;i++){
	                    grid_invoices.addRow(
	                        jsons[i].invoiceid,
	                        [
	                            jsons[i].invoiceno,
	                            jsons[i].totalcost_a,
	                            jsons[i].chgdate
	                        ],
	                        i
	                    );
	                }
				}
			}
			
		});

		    $("#grid_invoices").css("height","300px");
		    grid_invoices.setSizes();
		    if(grid_invoices.getRowsNum()==0){
		        alert("未找到该病人可退费发票!");
		        return;
		    }
		    $.blockUI({message: $('#hidden_chgRcd'),css:{width:'410px',height:'400px',border:'0px solid #aaa'},overlayCSS:{backgroundColor: '#CCCCCC'}});
		}


上面的function loadgrid_no(index)函数中如果没有async: false, 可能会导致在grid未加载的情况下,执行success之后的代码(即 $("#grid_invoices").css("height","300px");之后的代码),导致未加载数据时执行了后面的代码。有时会出现如下结果:



因为没有async: false,,此时默认为异步处理,此时可能未加载完成数据,就进行后面的代码执行,判断后就会return。但是如果代码中加入了async: false,则表示同步,等到success执行结束之后才会执行后面的代码,效果肯定如下所示:



分页效果实现的后台代码:

    @RequestMapping(value = "/getInvoicesCount")
    public void getInvoicesCount(HttpServletRequest request,HttpServletResponse response) throws Exception{
    	String patientid = (String)request.getParameter("cardno");
        Bas_hospitals basHospitals = (Bas_hospitals)request.getSession().getAttribute("login_hospital");
        String hosnum = basHospitals.getHosnum();
        String nodecode = basHospitals.getNodecode();
        DBOperator db = new DBOperator();
        response.setContentType("text/JSON;charset=utf-8");
        PrintWriter pw = response.getWriter();
    	try{
    		String sql = "select count(*) count from chg_invoice t " +
    				"where t.patientid=? and t.hosnum=? and t.invoiceid not in (select t2.invoiceid from chg_invoice_cancel t2) and t.invoiceno is not null and t.clcorinp ='门诊' order by t.chgdate desc";
    		List<Map<String, Object>> list = db.find(sql, new Object[]{patientid,hosnum});
			pw.print(list.get(0).get("count"));
			db.commit();
    	}catch(Exception e){
    		e.printStackTrace();
    		db.rollback();
    		pw.print("fail");
    	}finally{
    		db.freeCon();
    		pw.flush();
    		pw.close();
    	}
        
    }
    
    @RequestMapping(value = "/getInvoices")
    public void getInvoices(HttpServletRequest request,HttpServletResponse response) throws Exception{
    	String patientid = (String)request.getParameter("cardno");
        int Pagesize = Integer.parseInt(request.getParameter("size"));  
        int index = Integer.parseInt(request.getParameter("index"));  
        Bas_hospitals basHospitals = (Bas_hospitals)request.getSession().getAttribute("login_hospital");
        String hosnum = basHospitals.getHosnum();
        String nodecode = basHospitals.getNodecode();
        DBOperator db = new DBOperator();
        response.setContentType("text/JSON;charset=utf-8");
        PrintWriter pw = response.getWriter();
    	try{
            String pagingSql1 = "select OHYEAH.* from (select OHNO.*,rownum no from ("; // 用于分页// 段1  
            String pagingSql2 = ") OHNO where rownum <= ?) OHYEAH where no > ?"; // 用于分页段2  
    		String sql = "select t.invoiceid,t.invoiceno,t.totalcost_a,to_char(t.chgdate,'yyyy-mm-dd') chgdate " +
    				"from chg_invoice t " +
    				"where t.patientid=? and t.hosnum=? and t.invoiceid not in (select t2.invoiceid from chg_invoice_cancel t2) and t.invoiceno is not null and t.clcorinp ='门诊' order by t.chgdate desc";
    		List<Map<String, Object>> list = db.find(pagingSql1+sql+pagingSql2, new Object[]{patientid,hosnum,Pagesize*index+Pagesize,Pagesize*index});
    		
    		JSONArray json = JSONArray.fromObject(list);
    		//system.out.println(json);
            pw.print(json);
    	}catch(Exception e){
    		e.printStackTrace();
    		db.rollback();
    		pw.print("fail");
    	}finally{
    		db.freeCon();
    		pw.flush();
    		pw.close();
    	}
        
    }

默认情况下,请求总会被发出去,但浏览器有可能从他的缓存中调取数据。要禁止使用缓存的结果,可以设置cache参数为false。如果希望判断数据自从上次请求后没有更改过就报告出错的话,可以设置ifModified为true。  

Ajax的第一个字母是asynchronous的开头字母,这意味着所有的操作都是并行的,完成的顺序没有前后关系。$.ajax()的async参数总是设置成true,这标志着在请求开始后,其他代码依然能够执行。强烈不建议把这个选项设置成false,这意味着所有的请求都不再是异步的了,这也会导致浏览器被锁死。  

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

jQuery+AJAX实现纯js分页功能

使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页 bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用...

Ajax 实现无刷新分页

注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解。 本文讲解 Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里...

基于Jquery+Ajax+Json实现分页显示

1.后台action产生json数据。 List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate,...

一个完整的Ajax查询及对查询结果实现分页的范例

分页是WEB应用开发中最常用的功能之一,大多数是在动态页面(如:jsp、asp、php)中完成。pageObj是本人针对JavaScript数组实现分页的一个通用的对象,使用简单,效果良好,功能比较完...
  • wj800
  • wj800
  • 2011年11月21日 06:27
  • 4008

jsp页面通过ajax取值/展示数据及分页显示

jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码: 【JavaScript部分】 function getComposition(pageno){ //al...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

分页处理,使用ajax局部刷新列表

第一个jsp页面加载初始资源 第二个jsp页面处理分页 分页展示简历列表 第一个jsp页面加载初始资源,并且页面一加载请求服务端加载第一页数据 ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Ajax的async属性(通过ajax请求分页查询实例)
举报原因:
原因补充:

(最多只允许输入30个字)