通过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);
效果:
完成不刷新页面,接收服务器返回的数据