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就完成了。這樣的話，以前的RCenter中回覆事件註冊爲後臺事件響應極慢的問題應該就很容易解決了吧，只不過是更改一下數據源，調整優化樣式的事情了。

 

回想一下真個編寫過程，也不是很順利的，調試了好幾次才搞定。最多的問題處在路徑上，在onclick中傳遞單斜槓到js方法中時，單斜槓被消除了，是轉譯麼？還沒有細細研究，現在的處理是在後臺傳遞時傳遞雙斜槓，這樣就沒問題了。

源碼地址   http://dl.dbank.com/c0beaw4hbn