无刷新显示数据－－xmlHttp的应用

最新推荐文章于 2021-08-06 07:00:27 发布
最新推荐文章于 2021-08-06 07:00:27 发布
阅读量3.4k 收藏
点赞数
分类专栏： Asp.net 文章标签： textbox dataset datagrid server microsoft generator
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qixiao/article/details/273751
版权

        前阵子找工作面试的时候，主管问有没有做过无刷新显示数据，很尴尬的回答没有之后立刻试了一下，感觉挺简单的，麻烦的是JS操作XMLDocoment显示在页面上。
        简单将代码贴出来，欢迎指导：）
-------------------------------------------------test.aspx.vb---------------------------------------------
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码

        If Not (Me.Request("state") Is Nothing) Then   '第一次进入，xmlHttp还未POST时直接跳过
            Dim Ds As New DataSet
            Me.Da.SelectCommand.CommandText = "select * from " + Me.Request("state").ToString
            Me.Da.Fill(Ds)
            Dim writer As New XmlTextWriter(Response.OutputStream, Response.ContentEncoding)
            writer.Formatting = Formatting.Indented
            writer.Indentation = 4
            writer.IndentChar = " "
            Ds.WriteXml(writer)  '将DS的数据写到XML
            writer.Flush()
            Response.End()
            writer.Close()
        End If
    End Sub

----------------------------------------test.aspx------------------------------------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <title>NoRefresh</title>
  <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
  <meta content="JavaScript" name="vs_defaultClientScript">
  <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  <script>
　　  function load(state){
　　  var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");
　　  var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　  oXMLHTTP.open("POST", "test.aspx?state="+state, false);
　　  oXMLHTTP.send("");
　　  result = oXMLHTTP.responseText;
　　  oDoc.loadXML(result);
　　  var field = document.all("TxtField").value;
　　  var field2= document.all("TxtField2").value;
　　  maxNum_out = oDoc.getElementsByTagName(field).length;
　　  document.all("tdtitle").innerHTML=field;
　　  document.all("tdtitle2").innerHTML=field2;
　　  document.all("td1").innerHTML="";
　　  document.all("td2").innerHTML="";
　　  
　　  for(i=0;i<maxNum_out;i++) {
    str1 =oDoc.getElementsByTagName(field).item(i).text;
    str2 =oDoc.getElementsByTagName(field2).item(i).text;
    document.all("td1").innerHTML+=str1+"<BR>";
    document.all("td2").innerHTML+=str2+"<BR>";
   }
　　  }
  </script>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <FONT face="宋体">
    <asp:textbox id="TxtSQL" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" runat="server"
     ToolTip="SQL  hare!" Height="26px" Width="560px">authors</asp:textbox><INPUT style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px"
     οnclick="load(TxtSQL.value)" type="button" value="Go">
    <TABLE id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px"
     cellSpacing="1" cellPadding="1" width="544" border="1">
     <TR>
      <TD id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></TD>
      <TD id="tdtitle2" style="HEIGHT: 33px"></TD>
     </TR>
     <TR>
      <TD id="td1" style="WIDTH: 166px"></TD>
      <TD id="td2"></TD>
     </TR>
    </TABLE>
    <asp:textbox id="TxtField" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" runat="server"
     ToolTip="Field Hare!" Height="25px" Width="79px">city</asp:textbox><asp:textbox id="TxtField2" style="Z-INDEX: 106; LEFT: 104px; POSITION: absolute; TOP: 56px"
     runat="server" Height="24px" Width="80px">au_fname</asp:textbox></FONT></form>
 </body>
</HTML>

        这个例子非常简单，后来尝试用JS把客户端的XMLDocument Send到服务器端，再读入DataSet，想直接绑定到DataGrid，但是失败了，代码如下，希望哪位高手指点一二

---------------------------------------test.aspx.vb------------------------------------
    Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        '在此处放置初始化页的用户代码

        If Not (Me.Request("state") Is Nothing) Then
            Dim Ds As New DataSet
            Me.Da.SelectCommand.CommandText = "select * from " + Me.Request("state").ToString
            Me.Da.Fill(Ds)
            Dim writer As New XmlTextWriter(Response.OutputStream, Response.ContentEncoding)
            writer.Formatting = Formatting.Indented
            writer.Indentation = 4
            writer.IndentChar = " "
            Ds.WriteXml(writer)
            writer.Flush()
            Response.End()
            writer.Close()
        End If
        If Not (Me.Request("isxml") Is Nothing) Then
            Dim ds1 As New DataSet
            ds1.ReadXml(Me.Request.InputStream)
            Me.DataGrid1.DataSource = ds1.Tables(0).DefaultView
            Me.DataGrid1.DataBind()
        End If
    End Sub

----------------------------------------------test.aspx-----------------------------------
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="test.aspx.vb" Inherits="norefresh.test"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <title>NoRefresh</title>
  <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
  <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
  <meta content="JavaScript" name="vs_defaultClientScript">
  <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
  <script>
　　  function load(state){
　　  var oXMLHTTP = new ActiveXObject("MSXML2.XMLHTTP");
　　  var oDoc = new ActiveXObject("MSXML2.DOMDocument");
　　  oXMLHTTP.open("POST", "test.aspx?state="+state, false);
　　  oXMLHTTP.send("");
　　  result = oXMLHTTP.responseText;
　　  oDoc.loadXML(result);
　　  
　　  document.all("textxml").value=oDoc.xml;
　　  var sxml=oDoc.xml;
　　  var oXMLHTTP2= new ActiveXObject("MSXML2.XMLHTTP");
　　  oXMLHTTP2.open("POST","test.aspx?isxml=yes",false);
　　  oXMLHTTP2.send(sxml);
　　  }
  </script>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <FONT face="宋体">
    <asp:textbox id="TxtSQL" style="Z-INDEX: 101; LEFT: 18px; POSITION: absolute; TOP: 22px" runat="server"
     ToolTip="SQL  hare!" Height="26px" Width="560px">authors</asp:textbox><INPUT style="Z-INDEX: 102; LEFT: 472px; WIDTH: 99px; POSITION: absolute; TOP: 56px; HEIGHT: 26px"
     οnclick="load(TxtSQL.value)" type="button" value="Go">
    <TABLE id="Table1" style="Z-INDEX: 103; LEFT: 16px; WIDTH: 544px; POSITION: absolute; TOP: 104px; HEIGHT: 190px"
     cellSpacing="1" cellPadding="1" width="544" border="1">
     <TR>
      <TD id="tdtitle" style="WIDTH: 166px; HEIGHT: 33px"></TD>
      <TD id="tdtitle2" style="HEIGHT: 33px"></TD>
     </TR>
     <TR>
      <TD id="td1" style="WIDTH: 166px"></TD>
      <TD id="td2"></TD>
     </TR>
    </TABLE>
    <asp:textbox id="TxtField" style="Z-INDEX: 104; LEFT: 16px; POSITION: absolute; TOP: 56px" runat="server"
     ToolTip="Field Hare!" Height="25px" Width="79px">city</asp:textbox><asp:textbox id="TxtField2" style="Z-INDEX: 105; LEFT: 104px; POSITION: absolute; TOP: 56px"
     runat="server" Height="24px" Width="80px">au_fname</asp:textbox><input type="hidden" id="textxml" runat="server" style="Z-INDEX: 106; LEFT: 19px; POSITION: absolute; TOP: 311px">
    <asp:DataGrid id="DataGrid1" style="Z-INDEX: 107; LEFT: 22px; POSITION: absolute; TOP: 302px"
     runat="server" Width="536px" Height="163px"></asp:DataGrid></FONT></form>
 </body>
</HTML>

qixiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ASP实时刷新显示mysql数据_ajax+asp实现无刷新读取数据
weixin_36295973的博客
02-23 898
ajax+asp实现无刷新读取数据作者:netfox 日期:2016-08-13字体大小: 小 中 大 这是关于用ajax+asp实现无刷新读取数据的方法，主要是分为三个步骤1. 前台AJAX代码(javascript)的创建。 2. 后台服务端ASP AJAX代码的编写。 3. ASP+AJAX+数据库的实例演示及讲解1. 前台AJAX代码(javascript)的创建。2. 后台服务端ASP...
html网页无刷新数据更新,用javascript实现页面无刷新更新数据
weixin_32771907的博客
06-05 1082
以下正文：程序设计中会经常碰到一种情况，就是事先无法得知用户会需要哪些数据，必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况，用户选择省份以后，我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取，但这样不仅效率不高外，也显得不太优雅。其实用javascript结合微软件的XMLHTTP对象，我们可以不用刷新，“稍稍”的就可以将数据从...
html 无刷新显示公告,用javascript实现页面无刷新更新数据_js
weixin_33577989的博客
06-08 689
程序设计中会经常碰到一种情况，就是事先无法得知用户会需要哪些数据，必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况，用户选择省份以后，我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取，但这样不仅效率不高外，也显得不太优雅。其实用JavaScript结合微软件的XMLHTTP对象，我们可以不用刷新，“稍稍”的就可以将数据从服务器上读...
php无刷新更新新数据,用javascript实现无刷新更新数据
weixin_30782699的博客
03-10 457
程序设计中会经常碰到一种情况，就是事先无法得知用户会需要哪些数据，必须根据用户选择后再从服务器重新提取数据后反馈给用户。比如一简单的情况，用户选择省份以后，我们立即会在市里边将这个省的所有市重新显示出来。这种情况一般需要将整个页面刷新后才可以重新读取，但这样不仅效率不高外，也显得不太优雅。其实用javascript结合微软件的XMLHTTP对象，我们可以不用刷新，“稍稍”的就可以将数据从服务器上读...
AJAX-页面无需刷新技术
zm17671443092的博客
08-22 2219
AJAX-页面无需刷新技术 一 什么是ajax？ 1.1.Ajax即“Asynchronous Javascript And XML”(异步JavaScript 和XML)，是指一种创建交互式网页应用的网页开发技术。Ajax=异步JavaScript和XML（标准通用标记语言的子集）。通过在后台与服务器进行少量数据交换,Ajax可以使用网页实现异步更新。 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（ 无刷新技术）。传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。
让web应用实现无刷新数据交互-基于webservice
fupei的专栏
10-28 1268
 目标是使得defual页面获得服务器时间，同时无须刷新这个页面。 1、打开vs，新建网站2、为网站添加Web服务，并在该web服务中添加函数代码如下：  [WebMethod]    public string getTime() {        string strtime = System.DateTime.Now.ToString();        return strtime
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
weixin_33605464的博客
08-06 1779
这次给大家带来Ajax的页面无刷新实现详解(附代码)，Ajax页面无刷新实现的注意事项有哪些，下面就是实战案例，一起来看一下。ajax (ajax开发)AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。AJAX 是一种...
关于XMLHTTP无刷新数据获取和发送
低调
06-17 1483
客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XmlHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XmlHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XmlHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htmfunction GetResul
请描述ajax无刷新html处理,使用Ajax实现页面无刷新详细方法
weixin_39890652的博客
06-05 301
在Ajax中所以说的Ajax引擎实际上说的就是Ajax的核心对象XMLHttpRequest对象。Ajax核心对象的方法和属性XMLHttpRequest对象的方法：方法描述Open(String method,String URL,boolean asynch)建立对服务器的调用，其中参数一表示HTTP协议调用的方法，URL表示调用的服务器的地址，asynch表示是否采用异步方式Send(con...
Web层改进II-用xmlhttp 无声息提交复杂表单
12-10
其实即使是大量数据的Form,，只要用 Javascript稍加封装,，一样可以用简单的用xmlhttp完成提交，真正做到让用家宾至如归，不到页面本身需要刷新的时候 ，决不去刷新用家的界面。 客户端： function xmlhttp_submit...
xmlHTTP.rar_xmlhttp_xmlhttp java_xmlhttp下载
09-14
xmlHttp 这上一个异步传输的例子。在web应用中可以实现在刷新数据不刷新页面的效果
利用XMLHTTP实现的二级连动Select
12-11
这是继 “利用XMLHTTP无刷新获取数据” 的另一篇关于XMLHTTP的应用. 关于XMLHTTP.可以说,是一个很好的接合剂.把客户端和服务端的距离拉近了. 利用XMLHTTP.我们可以实现很多好的想法. 这文章.实现了二级连动...
xmlhttp说明文档，xmlhttp中文帮助文档，chm格式
03-14
配合JavaScript可以实现页面数据在无刷新下的定时数据更新，如果应用在聊天室、文字直播上可以取得较好的视觉效果。 使用范例： vb中下载页面源代码的方法： Dim XmlHttp As Object Set XmlHttp = CreateObject(...
AJAX应用之注册用户即时检测
01-21
AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微...
visual studio.net 2005 下载
七小的blog
11-23 5074
http://blog.joycode.com/uestc95/archive/2004/07/01/26234.aspx
考试系统之填空题
七小的blog
11-06 3090
    做一个考试系统，客户要求要有填空题，实现的过程中可谓费尽周折，在这里说一说实现的过程。    1、出题的时候，将需要填空的部分用固定长度的下划线表示，保存到数据库中，字段名字为stnr    2、取出stnr，用分割函数以固定长度的下划线为分隔符，将除填空部分以外的字符串搞到一个数组里，然后循环取出这个数组里每一个值并上赋给字符串str，再用table.innerHtml=str，这样就将
Asp.Net生成验证码
七小的blog
11-27 1263
　　     经常在论坛里看到有问怎么实现验证码的帖子,其实关于验证码的文章在csdn,dev-club等网站上都有很多,但是很多文章只讲诉了如何输出一个随机生成数字或字符的图象,当然了,这个是验证码的核心了,但是对很多asp.net的初学者来说,怎么使用它生成的图象又成了一个问题(论坛有不少问这个的),这也是我写本文的一个原因.    言归正传,关于验证码的原理,我就不多说了,大家可以参见其他文
金额转换算法
七小的blog
11-09 976
无聊中，便写了段金额转换的代码，很糙，但还能用：“）Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click        Dim str As String        str = Me.TextBox1.Text.Trim     
js怎么用xmlhttp从后端json里读取数据
最新发布
05-28
可以使用原生的XMLHttpRequest对象来发送Ajax请求获取后端JSON数据。示例代码如下： ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'your_backend_url', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var jsonObj = JSON.parse(xhr.responseText); // 将JSON字符串转换为JavaScript对象 console.log(jsonObj.name); // 输出：张三 console.log(jsonObj.age); // 输出：18 } else { console.log('请求失败'); } } xhr.send(); ``` 在上面的代码中，创建了一个XMLHttpRequest对象并使用open()方法打开了一个GET请求，并设置了请求头Content-Type为application/json。在onreadystatechange事件中判断请求的状态是否为4（请求已完成）和状态码是否为200（请求成功），如果成功则将获取到的JSON字符串通过JSON.parse()函数转换为JavaScript对象，然后就可以通过对象的属性获取数据。如果请求失败，则输出请求失败。 需要注意的是，在使用原生的XMLHttpRequest对象发送Ajax请求时需要手动设置请求头和解析返回的JSON数据。而使用jQuery等第三方库则可以更方便地发送Ajax请求和解析JSON数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值