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

来源：互联网发布：unity3d 透明shader 编辑：程序博客网时间：2024/05/16 09:44

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的值

1 0