Ajax 之使用 XMLHttp实现简单的异步数据加载-阿里云开发者社区

开发者社区> 科技小先锋> 正文

Ajax 之使用 XMLHttp实现简单的异步数据加载

简介:
+关注继续查看

前一段做项目的时候,要用到异步加载数据的知识。以前没写过这方面的,查了查,可以使用Ajax来完成。有很多现成额Ajax框架,但是总感觉用这些东西之前至少得先把原理弄清楚吧。在者,用那些别人的控件的时候,出个问题调bug就是个令人纠结头疼的事,就是因为自己根本不明白底层到底是怎么回事。。。。

好吧,然后就开始最基础的XMlHttp对象的学习。

这里,暂时抛开令人郁闷的浏览器兼容的问题。免得将过多的精力放在那上边。

说实话,很少写js,这次算是写的比较多的了。

 

什么是Ajax?

W3c说AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),其实或许有些概念性的东西,用的多,自然就明白了。

 

首先说一下自己做的demo吧。

在DataList中(描述不准确,大家应该都明白吧)点击链接,异步加载数据,展示到页面上。

 

在网上找了一些教程,看来不算复杂。

基本思路就是

创建XMlHttp对象,利用XMlHttp对象异步请求某个文件,获取文件内容,触发定义好的事件,改变客户端内容。

那么需要一个显示数据的页面,叫Default.aspx,然后还有一个处理数据的页面,接受参数,返回数据,叫做Data.asxp. ok,这两个就够了。

对于页面代码主要就是 做了一个DataLIst ,后台绑定几个测试用的数据。

其中lblFileData是用来显示数据的,当然显示之前,给出的是友好的提示。注册了一个js事件,用于点击时进行响应,将当前的对象和路径信息传递过去(抽象来说就是 1. 当前对象2. 数据参数信息)

代码如下

1  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
2   <asp:DataList ID="dlShowData" runat="server"> 
3   <ItemTemplate> 
4     <table> 
5     <tr> 
6       <td  class="title">文件编号:</td> 
7       <td ><%#Eval("编号") %></td> 
8     </tr> 
9      <tr> 
10     <td class="title">文件信息 :</td> 
11     <td><label   class="lblclick"  id="lblFileData" onclick=' showData(this , " &lt;%#Eval("路径" ) %>" )'&gt; 点击查看文件信息</label><br/></td> 
12     </tr> 
13     <tr> 
14         <td class="title">文件名称:</td> 
15         <td><%#Eval("名称")%></td> 
16     </tr> 
17    </table> 
18  </ItemTemplate> 
19  </asp:DataList> 
20 </asp:Content>

接下来是js代码

createXmlHttp函数 用来创建XmlHttp对象,由于浏览器兼容问题,做了一点小处理。其实可以处理的更好一点,这里就不麻烦了。

sendReqest 利用XMlHttp发送请求。

getReqUrl 获得我们所需要的Url

showData 毫无疑问,点击时异步获得数据,并改变页面显示内容。

代码如下(包括部分css)

1  <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
2  <style type="text/css"> 
3      .title 
4      { 
5          width:150; 
6      } 
7      .lblclick 
8      { 
9          cursor:pointer; 
10         color:Blue; 
11         text-decoration:underline; 
12     } 
13     .data 
14     { 
15         color:Black; 
16         text-decoration:none; 
17         cursor:auto; 
18     } 
19 </style> 
20 <script type="text/javascript"> 
21     function showData(lblFileData, path) { 
22         var xmlHttp = createXmlHttp(); 
23         if (xmlHttp) { 
24             //在xmlHttp对象状态发生改变是会自动触发该函数,和.net中的事件模型一样。 
25          //状态有好几种,4 表示数据接收完毕,200表示请求已处理成功 
26             xmlHttp.onreadystatechange = function () { 
27                 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
28                     lblFileData.innerText = xmlHttp.responseText; 
29                 } 
30                 else if (xmlHttp.readyState != 4) { 
31                     lblFileData.innerText = "数据加载中……"; 
32                 } 
33                 else if (xmlHttp.readyState == 4 && xmlHttp.status != 200) { 
34                     lblFileData.innerText = "数据加载已完成,但是未得到相应数据!"; 
35                 } 
36                 else { 
37                     lblFileData.innerText = "请求错误,返回错误编号" + xmlHttp.status; 
38                 } 
39                 lblFileData.className = "data"; 
40             } 
41         } 
42         lblFileData.className = "data"; 
43         var reqUrl = getReqUrl(path); 
44         sendReqest(xmlHttp,reqUrl);//发送请求 
45     } 
46 
47     //创建xmlHttp对象 
48     function createXmlHttp() { 
49         var xmlHttp = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); 
50         return xmlHttp; 
51     } 
52 
53     function sendReqest(xmlHttp, url) { 
54         //有三种方式GET,POST,HEAD,不同的方式稍微有点不同,url即为请求的文件路径,一定不要写错。。。true表示异步请求 
55         xmlHttp.open("GET", url, true);//打开请求 
56         xmlHttp.send();//发送请求 
57     } 
58 
59     //有中文,会出项乱码,采用二次编码,在接收端进行二次解码。。不知道有没有更好的处理办法 
60     function getReqUrl(path) { 
61         path = encodeURI(encodeURI(path)); 
62         var url = ".\\Data.aspx?path=" + path; 
63         return url; 
64     } 
65 
66 </script> 
67 </asp:Content> 

对于一些细节问题,比如说那些状态各代表什么意思啊,什么的,童鞋们自己查查吧

 

后台代码如下

 

1  protected void Page_Load(object sender, EventArgs e) 
2      { 
3          if(!Page.IsPostBack) 
4          { 
5              DataTable dataTable = GetDataSource(); 
6              BindData(dataTable); 
7          } 
8      } 
9  
10     protected void BindData(DataTable source) 
11     { 
12         dlShowData.DataSource = source; 
13         dlShowData.DataBind(); 
14     } 
15 
16     protected  DataTable GetDataSource() 
17     { 
18         DataTable dataTable=new DataTable(); 
19         dataTable.Columns.Add("编号"); 
20         dataTable.Columns.Add("路径"); 
21         dataTable.Columns.Add("名称"); 
22          
23         string[] pathes=new string[]{"F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\extern学习.txt",@"F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\编程风格类.txt",@"F:\\ASP.NET\\MyCode\\MyBlog\\XmlHttp-2011-7-24\\Data\\堆与栈.txt"}; 
24         string[] names=new string[]{ @"extern学习.txt",@"编程风格类.txt",@"堆与栈.txt" }; 
25         dataTable.Rows.Add(1, pathes[0], names[0]); 
26         dataTable.Rows.Add(1, pathes[1], names[1]); 
27         dataTable.Rows.Add(1, pathes[2], names[2]); 
28 
29         return dataTable; 
30     }

接下来就是Data页面了这个页面很简单,就是获得传递过来的参数,访问本地文件,得到数据后,写到Response响应流中。

代码如下

 

1  protected void Page_Load(object sender, EventArgs e) 
2      { 
3          string path = Page.Request.QueryString["path"]; 
4          path = Server.UrlDecode(path); 
5          string responseText = ""; 
6          if(!string.IsNullOrEmpty(path)) 
7             responseText= GetData(path); 
8          else 
9              responseText = "文件路径信息错误!"; 
10         Response.Write(responseText); 
11         Response.Flush(); 
12     } 
13 
14     /// <summary> 
15     /// 获取数据源 
16     /// </summary> 
17     /// <param name="path"></param> 
18     /// <returns></returns> 
19     protected  string  GetData(string  path) 
20     { 
21         return GetFileContent(path); 
22     } 
23 
24     /// <summary> 
25     /// 得到文件内容信息 
26     /// </summary> 
27     /// <param name="path"></param> 
28     /// <returns></returns> 
29     protected  string GetFileContent(string  path) 
30     { 
31         if(File.Exists(path)) 
32         { 
33             StreamReader sr= new StreamReader(path,Encoding.Default); 
34             string content= sr.ReadToEnd(); 
35             sr.Close(); 
36             return content; 
37         } 
38         else 
39         { 
40             return "没有找到对应文件信息"; 
41         } 
42     }

OK,这样下来这个Demo就完成了。

最后,贴一个效果图

点击前

image

 

点击后

image

 

这样的话,以前的RCenter中回复事件注册为后台事件响应极慢的问题应该就很容易解决了吧,只不过是更改一下数据源,调整优化样式的事情了。

 

回想一下真个编写过程,也不是很顺利的,调试了好几次才搞定。最多的问题处在路径上,在onclick中传递单斜杠到js方法中时,单斜杠被消除了,是转译么?还没有细细研究,现在的处理是在后台传递时传递双斜杠,这样就没问题了。

                                                                                       

 

本文转自HDDevTeam 51CTO博客,原文链接:http://blog.51cto.com/hddev/622336,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
实用技巧:使用 jQuery 异步加载 JavaScript 脚本
  JavaScript 加载器在 Web 开发中是非常强大和有用的工具。目前流行的几个加载器,像 curljs、LABjs 和 RequireJS 使用都很广泛。他们功能强大的,但有些情况下可以有更简单的方案。
852 0
Python之pandas数据加载、存储
Python之pandas数据加载、存储 0. 输入与输出大致可分为三类: 0.1 读取文本文件和其他更好效的磁盘存储格式 2.2 使用数据库中的数据 0.3 利用Web API操作网络资源 1. 读取文本文件和其他更好效的磁盘存储格式 pandas提供了一些用于将表格型数据读取为DataFrame对象的函数。 1.1 pandas中的解析函数: re
1683 0
使用WCF实现SOA面向服务编程——使用AJAX+WCF服务“.NET技术”页面开发
  在上一篇讲到,如果将BLL层的每一个类都转化为*.svc,这是一个不实在的想法。它会使服务变化复杂,难于管理。   这时候,我们第一时间想到的是23个简单开发模式中的Factory,在这里,Factory正好派上用场。
848 0
ant使用ftp上传数据时配置的一个报错问题
error:ANT FTP upload file: 425 Unable to build data connection: Connection timed out 以下是xml原配置: &lt;ftp action="put"    server="10.254.21.117"    userid="***"    password="****"    dir
1255 0
ajax的使用
  如上一张表单提交,一般我们通常的做法是,form表单提交,方便快捷,提交以后就不用管了,是否完成以及完成以后做什么是提交以后的后台操作,form表单只负责提交过去。(一般后台在接收表单提交以后,根据验证以及数据流转结果给前台交互,常见的是 重定向)。
875 0
Oracle数据加载速度优化
> >             >> >    > > > > > >> 
987 0
4571
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载