微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

[Ajax]AJAX的简单应用加法运算示例

1.首先创建Web空文件

2.在页面添加三个按钮,并命名为num1,num2,result

3.添加script脚本:

<head runat="server">
    <title>AJAX之加法运算示例</title>
    <style type="text/css">
        #Text1
        {
            width: 66px;
        }
        #Text2
        {
            width: 66px;
        }
        #Text3
        {
            width: 66px;
        }
        #num1
        {
            width: 70px;
        }
        #num2
        {
            width: 70px;
        }
        #result
        {
            width: 70px;
        }
    </style>
    <script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest () 
        {
            if (window.ActiveXObject) 
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) 
            {
                xmlHttp = new xmlHttpRequest();
            }

        }
        function addNumber() 
        {
            createXMLHttpRequest();
            var url = "Handler.ashx?Num1=" + document.getElementById("num1").value + "&Num2=" + document.getElementById("num2").value;
            xmlHttp.open("GET",url,true);
            xmlHttp.onreadystatechange = showResult;
            xmlHttp.send(null);
        }
        function showResult()
        {
            //请求完成
            if (xmlHttp.readyState == 4) 
            {
                if (xmlHttp.status == 200) 
                {
                    document.getElementById("result").value=xmlHttp.responseText;
                }
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="num1" type="text" value="0" onkeyup="addNumber();"/>+<input id="num2" type="text" 
            value="0" onkeyup="addNumber();"/>=<input id="result" type="text" /></div>
    </form>
</body>
</html>


4.在文本框的属性添加 onkeyup属性添加addNumber()函数

5.添加一般事件处理程序

修改函数

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
context.Response.Write(result);
}
6.运行

在文本框中输入一个数,相应的结果就会显示出来

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐