使用 XMLHttpRequest 实现 Ajax 一:取回动态页面响应

本文介绍了一个使用XMLHttpRequest实现页面无刷新获取服务器数据的方法。通过创建一个按钮点击事件触发数据请求,利用JavaScript处理请求过程,并展示如何解析服务器响应来动态更新页面内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 概念什么的没必要提了

假设一个页面需要无刷新取回服务器数据,当然我们要用到 XMLHttpRequest ,构建函数如下:

 

  <script type="text/javascript">
         var xmlhttp;
         function RetrieveData() {
             //实例化XMLHttpRequest对象
             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
             //找到名为“Text1”的文本框
             var name = document.getElementById("<%=TextBox1.ClientID%>");
             //利用Open方法向指定URL
             //查询字符串“name”将文本框中的数据传送到目标页面
             xmlhttp.open("Post", "DataHandler.aspx?requestString=" + name.value);
             //设置当服务器响应返回时用于处理响应的函数名
             xmlhttp.onreadystatechange = OnMessageBack;
             //送发请求
             xmlhttp.send(null);
         }


         function OnMessageBack() {
             //判断请求状态及HTTP状态是否都能满足条件
             if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
                 //将返回的文本打印到页面上
                 var data = xmlhttp.responseText.split('<!');
                 document.getElementById("<%=Label1.ClientID%>").innerHTML = data[0];   //xmlhttp.responseText;
             }
         }

    </script>

 

Html 控件如下:

 

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Button1" type="button" value="button"  onclick="RetrieveData()" />
<asp:Label ID="Label1" runat="server" Text="Here is the value"></asp:Label> 

 

DataHandler.aspx 的后台代码如下

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (this.Request.QueryString["requestString"] != null)
                {
                    this.Response.Clear();
                    this.Response.Write("Hello:  " + this.Request.QueryString["requestString"].ToString());

       // 访问数据库或服务端组件或服务          

          }
                else
                {
                    this.Response.Clear();
                    this.Response.Write("Hello  no name");
                }
            }

        }

 

 

转载于:https://www.cnblogs.com/waitrabbit/archive/2010/06/24/1764558.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值