AJAX的简单应用(加法运算示例)

1.首先创建Web空文件

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

3.添加script脚本:

<script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest () 
        {
            if (window.ActiveXObject) 
            {
                
               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
               //判断是否为微软的IE浏览器            
}
            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>

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

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

原文地址:https://www.cnblogs.com/java20130723/p/3211484.html