AJAX入门

通过ajax不刷新页面计算2个数的和(异步请求)

    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnResult").click(function () {
                var i = $("#txt1").val();
                var j = $("#txt2").val();
                //通过ajax不刷新页面计算2个数的和(异步请求)
                var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象,考虑了IE兼容性
                xmlhttp.open("POST", "ashx/ajaxTest.ashx?i="+i+"&j="+j, true);  //准备向服务器发出post请求,(get请求有缓存问题),true表示异步请求。此刻还没有发出请求
                //alert(xmlhttp.responseText);    //这里运算是没有结果的,异步请求send执行结束后并不代表服务器返回了
                xmlhttp.onreadystatechange = function () { //只有监听onreadystatechange事件来获取返回的进度
                    //alert(xmlhttp.readyState);//监听会有三个状态,2表示请求已经发出,3表示已经返回一部分数据了,4表示数据返回完成,所以等于4才有意义
                    if (xmlhttp.readyState==4) {
                        //alert(xmlhttp.status);//这个是HTTP的状态码,200表示成功,300表示重定向,400表示找不到页面,500表示服务器内部错误
                        if (xmlhttp.status==200) {
                            //alert(xmlhttp.responseText);
                            $("#msg").text(xmlhttp.responseText);
                        } else {
                            alert("服务器内部错误了");//如果只选这个,表示数据已经返回完成,但是http的状态码并不是200,那么怎么查看http返回的状态码是那一种呢?
                        }
                    }
                }
                xmlhttp.send();
            });
        })
    </script>
</head>
<body>
      <input type="text" id="txt1"/>+<input type="text" id="txt2" /><button id="btnResult">=</button><span id="msg"></span>

</body>

-----------

后端服务器代码

ashx/ajaxTest.ashx

            int i = Convert.ToInt32(context.Request["i"]);
            int j = Convert.ToInt32(context.Request["j"]);
            int r = i + j;

            context.Response.Write(r);

效果:


完成不刷新页面,接收服务器返回的数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值