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.运行
在文本框中输入一个数，相应的结果就会显示出来
时间： 2024-10-26 21:07:25