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

来源：互联网发布：java语言编程软件win10 编辑：程序博客网时间：2024/06/02 04:15

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.运行

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