网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 论文素材 设计下载 最新论文 下载排行 论文上传 在线投稿 联系我们
返回网学首页
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 网页素材 > AJAX代码 > 正文
JQuery入门循序渐进(五)AJAX
来源:Http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 11/01/18
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事件响应
下面以一下示例来说明,建一个GenericHandler作AJAX请求服务端:CubeHandler.ashx
<%@ WebHandler Language="C#" Class="CubeHandler" %>

<%@ WebHandler Language="C#" Class="CubeHandler" %>

using System;
using System.Web;


public class Handler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int number = 0;
        int.TryParse(context.Request.Params["number"], out number);
        context.Response.StatusCode = 200;
        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.Write(string.Format("{0} cubed is {1}", number, Math.Pow(number, 3)));
    }


  
    public bool IsReusable {
        get {
            return true;
        }

    }


}

因为用的是Request.Params,所以这个handler能同时支持get和post,然后建立一下JQuery.html文件如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <title>ajax</title>  
    <script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        $(function(){  
            //设置指示器  
            $(''#divIndicator'').ajaxStart(function(){$(this).show()})  
                            .ajaxSuccess(function(){$(this).hide()})  
                            .ajaxError(function(msg){$(this).hide();alert(msg);});  
            //ajax get 请求  
            $(''#btnGetCubeInGet'').click(function(){  
                var number = $(''#txtNumber'').val();  
                $.get(''CubeHandler.ashx?number=''+number,function(result){  
                    alert(result);  
                });  
            });  
              
            //ajax post 提交  
            $(''#btnGetCubeInPost'').click(function(){  
                var number = $(''#txtNumber'').val();  
                $.postt(''CubeHandler.ashx'',{''number'':number},function(result){  
                    alert(result);  
                });  
            });  
        });  
    </script>  
    <style type="text/css">  
        .indicator  
        {  
            color: #FF0000;  
            position: absolute;  
            top: 0px;  
            right: 0px;  
            display: none;  
        }  
    </style>  
</head>  
<body>  
    <div id="divIndicator" class="indicator">  
        <img src=http://www.aspxcs.net/HTML/"indicator.gif" />loading</div>  
    plz input a number:<input id="txtNumber" />  
    <input type="button" id="btnGetCubeInGet" value="Get cube(get)" />  
    <input type="button" id="btnGetCubeInPost" value="Get cube(post)" />  
</body>  
</html>
点击按钮后的效果:

网学推荐

免费论文

原创论文

浏览:
设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 电话:013574892963 QQ:3710167 邮箱:Educs@163.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 Www.myeducs.Cn All Rights Reserved
湘ICP备09003080号