jquery ajax 的异步调

最新推荐文章于 2024-07-09 15:51:39 发布

原创最新推荐文章于 2024-07-09 15:51:39 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用AJAX进行异步请求，包括GET和POST方法，并通过实例展示了服务器端处理异步请求的过程，实现了客户端与服务器之间的高效交互。

<!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="jquery-latest.pack.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('ajaxServer.ashx?number='+number,function(result){
                    alert(result);
                });
            });

            //ajax post 提交
            $('#btnGetCubeInPost').click(function(){
                var number = $('#txtNumber').val();
                $.post('ajaxServer.ashx',{'number':number},function(re){
                    alert(re);
                });
            });
        });
    </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="about_img.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>

所调请求的页面内容是：

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

using System;
using System.Web;

public class ajaxServer : 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 false;
        }
    }

}