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

最新推荐文章于 2021-08-05 11:54:54 发布

转载最新推荐文章于 2021-08-05 11:54:54 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/470138

文章标签：

#javascript #ViewUI

本文介绍了一个简单的AJAX应用实例，通过前端JavaScript与后端Handler交互实现两个数相加的功能。用户在输入框中输入数值后，结果会实时显示。

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

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