本文介绍了一个使用Ajax进行异步请求的例子，演示如何在不刷新页面的情况下计算两个输入框中数字的和，并将结果显示在网页上。该示例包括前端JavaScript代码和后端ashx文件的实现。
通过ajax不刷新页面计算2个数的和（异步请求）
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$("#btnResult").click(function () {
var i = $("#txt1").val();
var j = $("#txt2").val();
//通过ajax不刷新页面计算2个数的和（异步请求）
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象,考虑了IE兼容性
xmlhttp.open("POST", "ashx/ajaxTest.ashx?i="+i+"&j="+j, true); //准备向服务器发出post请求，（get请求有缓存问题），true表示异步请求。此刻还没有发出请求
//alert(xmlhttp.responseText); //这里运算是没有结果的，异步请求send执行结束后并不代表服务器返回了
xmlhttp.onreadystatechange = function () { //只有监听onreadystatechange事件来获取返回的进度
//alert(xmlhttp.readyState);//监听会有三个状态，2表示请求已经发出，3表示已经返回一部分数据了，4表示数据返回完成，所以等于4才有意义
if (xmlhttp.readyState==4) {
//alert(xmlhttp.status);//这个是HTTP的状态码，200表示成功，300表示重定向，400表示找不到页面，500表示服务器内部错误
if (xmlhttp.status==200) {
//alert(xmlhttp.responseText);
$("#msg").text(xmlhttp.responseText);
} else {
alert("服务器内部错误了");//如果只选这个，表示数据已经返回完成，但是http的状态码并不是200，那么怎么查看http返回的状态码是那一种呢？
}
}
}
xmlhttp.send();
});
})
</script>
</head>
<body>
<input type="text" id="txt1"/>+<input type="text" id="txt2" /><button id="btnResult">=</button><span id="msg"></span>
</body>
-----------
后端服务器代码
ashx/ajaxTest.ashx
int i = Convert.ToInt32(context.Request["i"]);
int j = Convert.ToInt32(context.Request["j"]);
int r = i + j;
context.Response.Write(r);
效果：
完成不刷新页面，接收服务器返回的数据
扫一扫
735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
