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     }