Ajax最简单实例(加法运算)
很简单的一个Ajax实例。实现无刷新两个数的相加。
适合新手借鉴
具体讲解如下：
例子涉及到两个页面：AjaxAddTwoNumbers.aspx（主页）、add.aspx（请求页面）当然名字可以自己定义...
先看AjaxAddTwoNumbers.aspx页面代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>计算器</title>
<script type="text/javascript" language="javascript">
var xmlHttp;
//创建XHR
function createXmlHttpRequest() {
//非IE
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType("text/xml");
}
}
//IE
else if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
if (!xmlHttp) {
window.alert("你的浏览器不支持创建XMLhttpRequest对象");
}
return xmlHttp;
}
//实现
function addNumber() {
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value
createXmlHttpRequest();
var url = "add.aspx?a1=" + a + "&a2=" + b;//发送请求的页面。在该页面返回所需的
xmlHttp.open("GET",url,true);//打开
xmlHttp.onreadystatechange = showResult;//处理
xmlHttp.send(null);
}
//处理过程
function showResult() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
document.getElementById("tb3").value = xmlHttp.responseText;
}
else if(xmlHttp.status == 404) {
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr><td><p>加法运算:</p></td></tr>
<tr>
<td><input type="text" id="tb1" name="tb1" value="0" onkeyup="addNumber()" /></td>
<td>+</td>
<td><input type="text" id="tb2" name="tb2" value="0" onkeyup="addNumber()" /></td>
<td>=</td>
<td><input type="text" id="tb3" name="tb3" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
接下来是请求页面add.aspx的代码：
注意add.aspx页面（UI）代码首先清空。
在add.aspx.cs的Page_Load事件里输入以下代码：
int b = Convert.ToInt32(Request.QueryString["a1"]) + Convert.ToInt32(Request.QueryString["a2"]);
Response.Write(b);
完成以上，那么这个小例子就可以跑起来了！
