Ajax 之 XMLHttp初步

原创

cjtme 2011-07-24 23:01:48 ©著作权

©著作权归作者所有：来自51CTO博客作者cjtme的原创作品，请联系作者获取转载授权，否则将追究法律责任

前一段做项目的时候，要用到异步加载数据的知识。以前没写过这方面的，查了查，可以使用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;    
        color:Blue;    
        text-decoration:underline;    
    }    
    .data    
    {    
        color:Black;    
        text-decoration:none;    
        cursor:auto;    
    }    
</style>    
<script type="text/javascript">    
    function showData(lblFileData, path) {    
        var xmlHttp = createXmlHttp();    
        if (xmlHttp) {    
            //在xmlHttp对象状态发生改变是会自动触发该函数，和.net中的事件模型一样。    
         //状态有好几种，4 表示数据接收完毕，200表示请求已处理成功    
            xmlHttp.onreadystatechange = function () {    
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {    
                    lblFileData.innerText = xmlHttp.responseText;    
                }    
                else if (xmlHttp.readyState != 4) {    
                    lblFileData.innerText = "数据加载中……";    
                }    
                else if (xmlHttp.readyState == 4 && xmlHttp.status != 200) {    
                    lblFileData.innerText = "数据加载已完成，但是未得到相应数据！";    
                }    
                else {    
                    lblFileData.innerText = "请求错误，返回错误编号" + xmlHttp.status;    
                }    
                lblFileData.className = "data";    
            }    
        }    
        lblFileData.className = "data";    
        var reqUrl = getReqUrl(path);    
        sendReqest(xmlHttp,reqUrl);//发送请求    
    }    
   
    //创建xmlHttp对象    
    function createXmlHttp() {    
        var xmlHttp = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();    
        return xmlHttp;    
    }    
   
    function sendReqest(xmlHttp, url) {    
        //有三种方式GET，POST，HEAD，不同的方式稍微有点不同，url即为请求的文件路径，一定不要写错。。。true表示异步请求    
        xmlHttp.open("GET", url, true);//打开请求    
        xmlHttp.send();//发送请求    
    }    
   
    //有中文，会出项乱码，采用二次编码，在接收端进行二次解码。。不知道有没有更好的处理办法    
    function getReqUrl(path) {    
        path = encodeURI(encodeURI(path));    
        var url = ".\\Data.aspx?path=" + path;    
        return url;    
    }    
   
</script>    
</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  

    protected void BindData(DataTable source)

    {

        dlShowData.DataSource = source;

        dlShowData.DataBind();

    }



    protected  DataTable GetDataSource()

    {

        DataTable dataTable=new DataTable();

        dataTable.Columns.Add("编号");

        dataTable.Columns.Add("路径");

        dataTable.Columns.Add("名称");

        

        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"};

        string[] names=new string[]{ @"extern学习.txt",@"编程风格类.txt",@"堆与栈.txt" };

        dataTable.Rows.Add(1, pathes[0], names[0]);

        dataTable.Rows.Add(1, pathes[1], names[1]);

        dataTable.Rows.Add(1, pathes[2], names[2]);



        return dataTable;

    }

接下来就是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 = "文件路径信息错误！";

        Response.Write(responseText);

        Response.Flush();

    }



    /// <summary>

    /// 获取数据源

    /// </summary>

    /// <param name="path"></param>

    /// <returns></returns>

    protected  string  GetData(string  path)

    {

        return GetFileContent(path);

    }



    /// <summary>

    /// 得到文件内容信息

    /// </summary>

    /// <param name="path"></param>

    /// <returns></returns>

    protected  string GetFileContent(string  path)

    {

        if(File.Exists(path))

        {

            StreamReader sr= new StreamReader(path,Encoding.Default);

            string content= sr.ReadToEnd();

            sr.Close();

            return content;

        }

        else

        {

            return "没有找到对应文件信息";

        }

    }