手写Ajax程序实现异步刷新求和

WebForm.aspx.cs代码（如果手工编写Ajax应用程序，在后台的page_load中需要手工输出XML代码（response.write））

protected void Page_Load(object sender,EventArgs e)
        {
            if(Request.Params["op"]=="get")//只有传递过来的URL中op=get时才执行
            {
                Response.ContentType = "text/xml;charset=UTF-8";//文本为xml格式
                Response.AddHeader("Cache-Control","no-Cache");
                string t1 = Request.Params["TextBox1"];
                string t2 = Request.Params["TextBox2"];
                int s = int.Parse(t1) + int.Parse(t2);
                Response.Write("<res>"+s.ToString()+"</res>");//输出xml格式数据
                Response.End();
            }
        }

WebForm.aspx代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<script>
    var xmlhttp;
    if(window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();//其他浏览器
    }
    else if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//旧版IE
        }
        catch (e) { }
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//新版IE
        }
        catch (e) { }
        if (!xmlhttp) {
            window.alert("不能创建XMLHttpRequest对象");
        }
    }
    //发起Ajax请求后，一旦服务器响应请求就自动执行回调函数如下
        xmlhttp.onreadystatechange = function () {
            if(xmlhttp.readyState==4)//XMLHttpRequest对象的状态信息，4表示完成
            {
                if(xmlhttp.status==200)//服务器的询问请求状态，200表示已就绪
                {
                    var xmlobj = xmlhttp.responseXML;//xml数据对象，即Page_Load中输出的内容
                    var t = xmlobj.getElementsByTagName("res")[0].firstChild.nodeValue;//获取带有指定标签名的对象的集合，以列表形式
		//firstChild 属性返回被选节点的第一个子节点,<res></res>就是被选结点，标签中的内容就是子节点
                    alert(t);
                }
                else
                {
                    alert(xmlhttp.status);
                }
            }
        }
        function ajax()
        {
            //发起Ajax请求
            xmlhttp.open("GET","WebForm.aspx?op=get&TextBox1=" + document.getElementById("TextBox1").value + "&TextBox2=" + document.getElementById("TextBox2").value,true);
            xmlhttp.send(null);
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        +<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <br />
        <input id="Button1" type="button" value="求和" onclick="ajax()"/></div>
    </form>
</body>
</html>

运行结果如下：

保持数1不变，只改变数2的值

手写Ajax程序实现异步刷新求和

猜你在找的Ajax相关文章