WEB开发网
开发学院网页设计JavaScript jQuery入门[5]-AJAX 阅读

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

<[email protected]="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>

点击按钮后的效果:

jQuery入门[5]-AJAX

Tags:jQuery 入门 AJAX

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接