jQuery入门[5]－AJAX

　2010-09-14 13:21:18　来源：WEB开发网　　　

核心提示：jQuery为AJAX提供了非常丰富的支持，参见Ajax其中最基本当属$ajax()，jQuery入门[5]－AJAX，通过不同的参数，这个方法可以录活支持各种AJAX应用场景，如：$.ajax({url: "test.html",cache: false,success: function(htm

jQuery为AJAX提供了非常丰富的支持，参见Ajax

其中最基本当属$ajax()，通过不同的参数，这个方法可以录活支持各种AJAX应用场景。如：

$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); 完整参数列表参见：options 当然，常用的应该是这些：

load()--直接将AJAX请求结果作为jQuery对象内容

$.get()--用get方式请求

$.post()--用post方式提交

ajaxStart()/ajaxComplete()/ajaxError()……--全局的ajax事件响应

DEMO：

建一个GenericHandler作AJAX请求服务端:CubeHandler.ashx

<%@WebHandlerLanguage="C#"Class="CubeHandler"%> usingSystem; usingSystem.Web; publicclassCubeHandler:IHttpHandler{ 　　　　publicvoidProcessRequest(HttpContextcontext){ 　　　　context.Response.ContentType="text/plain"; 　　　　intnumber=0; 　　　　int.TryParse(context.Request.Params["number"],outnumber); 　　　　context.Response.StatusCode=200; 　　　　context.Response.Cache.SetCacheability(HttpCacheability.NoCache); 　　　　context.Response.Write(string.Format("{0}cubedis{1}",number,Math.Pow(number,3))); 　　} 　　publicboolIsReusable{ 　　　　get{ 　　　　　　returntrue; 　　　　} 　　} }

因为用的是Request.Params,所以这个handler能同时支持get和post，

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> 　　<title>ajax</title> 　　<scriptsrc="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript"></script> 　　<scripttype="text/javascript"> 　　　　$(function(){ 　　　　　　//设置指示器　　　　　　$('#divIndicator').ajaxStart(function(){$(this).show()}) 　　　　　　　　　　　　　　.ajaxSuccess(function(){$(this).hide()}) 　　　　　　　　　　　　　　.ajaxError(function(msg){$(this).hide();alert(msg);}); 　　　　　　//ajaxget请求　　　　　　$('#btnGetCubeInGet').click(function(){ 　　　　　　　　varnumber=$('#txtNumber').val(); 　　　　　　　　$.get('CubeHandler.ashx?number='+number,function(result){ 　　　　　　　　　　alert(result); 　　　　　　　　}); 　　　　　　}); 　　　　　　　　　　　　//ajaxpost提交　　　　　　$('#btnGetCubeInPost').click(function(){ 　　　　　　　　varnumber=$('#txtNumber').val(); 　　　　　　　　$.get('CubeHandler.ashx',{'number':number},function(result){ 　　　　　　　　　　alert(result); 　　　　　　　　}); 　　　　　　}); 　　　　}); 　　</script> 　　<styletype="text/css"> 　　　　.indicator 　　　　{ 　　　　　　color:#FF0000; 　　　　　　position:absolute; 　　　　　　top:0px; 　　　　　　right:0px; 　　　　　　display:none; 　　　　} 　　</style> </head> <body> 　　<divid="divIndicator"class="indicator"> 　　　　<imgsrc=http://tech.ddvip.com/2008-11/"indicator.gif"/>loading…</div> 　　plzinputanumber:<inputid="txtNumber"/> 　　<inputtype="button"id="btnGetCubeInGet"value="Getcube(get)"/> 　　<inputtype="button"id="btnGetCubeInPost"value="Getcube(post)"/> </body> </html>