ajax和asp.NET学习(一）

今天，看了csdn中的<征服ASP.NET 2.0 Ajax——Web开发技术详解>陈冠军著书中的试读部分，便跟着书上的例子自己做了一个简易的RSS阅读器。以前一直在网上看RSS却不知道是什么，今天终于明白了。在做的过程中发现了很多问题，自己的不足。
一.div在布局上的使用。因为自己从来没有做过页面，所以费了半天劲才弄了三个div。但是    对于相对位置和绝对位置的区别还是没弄清。下面要好好学学。
二.css的使用。真是很模糊。同样是页面布局美观的问题。下一步也要学习。
三.xmlhttp获取远程网页内容。根据频道的地址，然后使用XMLHttpRequest对象从网络获取数据，返回字符串或者XML数据。本节就介绍如何显示频道的内容。总是提示找不到资源，不知道什么原因。还没有解决。
  下面总结一下利用Ajax和asp.net2.0开发RSS的详细情景。（朋友们也可参考上面所说的书，我写文章只是对我一天学习工作做个总结）。
  首先，该RSS由三部分功能组成：添加RSS频道，显示频道列表，显示频道列表的具体内容。分别显示在div中，因此需要三个div。
  其次设计数据库。数据库有SQL Server2000。数据库只有一个表。有三列组成，分别是RSS_ID;RSS_NAME;RSS_URL.由功能部分可以知道与数据库有关的操作就两个即存数据和取数据。因此与数据库操作有关的代码即

 1  private string connectionstring = ConfigurationManager.ConnectionStrings["connRSS"].ConnectionString;
 2     public void AddRss(string name,string url)      {
 3         //  SqlConnection con = new SqlConnection(connectionstring);
 4          // SqlCommand cmd = new SqlCommand(con);
 5           SqlCommand cmd = new SqlCommand();
 6           using (SqlConnection conn = new SqlConnection(connectiostring))
 7           {
 8               if (conn.State != ConnectionState.Open)
 9               {
10                   conn.Open();
11               }
12               cmd.Connection = conn;
13               cmd.CommandType = CommandType.Text;
14               cmd.CommandText = "insert into RssStore(RSS_NAME,RSS_URL) values('" + name + "','" + url + "')";
15               cmd.ExecuteNonQuery();
16               conn.Close();
17           
18           }
19 
20       }
21     public ArrayList  GetRssName()
22     { 
23       //初始化sql命令
24         SqlCommand cmd = new SqlCommand();
25         //在一个范围内执行sql命令，范围结束后，释放所有对象
26         using (SqlConnection conn = new SqlConnection(connectionstring))
27         { 
28          //判断数据库连接状态
29             if (conn.State != ConnectionState.Open)
30             {
31                 conn.Open();
32             }
33             cmd.Connection = conn;
34             cmd.CommandType = CommandType.Text;
35             cmd.CommandText = "select RSS_NAME,RSS_URL from RSSStore";
36             SqlDataReader rdr = cmd.ExecuteReader();
37             ArrayList myarray = new ArrayList();
38             while (rdr.Read())
39             { 
40              //如果有数据，存放在数组中，其中数据之间用，间隔
41                 myarray.Add(rdr.GetString(0) + "," + rdr.GetString(1));
42             }
43             conn.Close();
44             return myarray;
45             
46         }
47 

与数据库有关的操作写成一个类，放在APP_Code文件夹下（此文件夹下的文件保存后自动编译，这一点以前我一直不清楚，产生过很多困惑）。连接字符串写在web.config中，如下数据库没有密码

配置连接字符串
1     <connectionStrings>
2 <add name="connRSS" connectionString="Server=localhost;Integrated Security=True;Database=RSSReader" providerName="System.Data.SqlClient"/>
3     </connectionStrings>

第二部分具体功能模块。使用xmlhttp进行异步传输数据，首先要定义xmlhttp对象即

xmlhttp对象初始化
 1  var xmlhttp;
 2     function createXMLHTTP()
 3     {
 4     if(window.XMLHttpRequest)
 5     {
 6      xmlhttp=new XMLHttpRequest();
 7     }
 8     else if(window.ActiveXObject)
 9     {
10       try{
11          xmlhttp=new ActiveObject("Msxml2.XMLHTTP");
12          
13       }
14       catch(e1)
15       {
16        try
17        {
18          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
19        }
20        catch(e2)
21        {
22        }
23       }
24     }
25   
26     }

首先是添加RSS频道，采用Ajax技术局部刷新。ajax即异步javascript和xml。为

保留代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="addRssNamePage.aspx.cs"Inherits="addRssNamePage" %>
2 

添加RSS按钮添加click事件，实现方法addrss代码如下:(方法“handleStr”实现页面的局部刷新)

添加RSS频道代码
 1   function addrss()
 2     {
 3  
 4      createXMLHTTP();
 5   
 6     //判断异步对象状态的方法
 7     xmlhttp.onreadystatechange=statechange;
 8     //获取添加的RSS属性
 9     var name=document.getElementById("RSSName").value;
10     var url=document.getElementById("RSSUrl").value;
11     //加载服务器页并发送数据请求
12     xmlhttp.open("GET","addRssNamePage.aspx?name="+escape(name)+"&url="+escape(url),true);
13     xmlhttp.send(null);
14     }
15     function statechange()
16     {
17       //如果请求已经完成
18       if(xmlhttp.readystate==4)
19       {
20        //判断请求是否成功返回
21        if(xmlhttp.status==200)
22        {
23          //返回的是字符串，进行处理后显示在客户端
24          handleStr(xmlhttp.responseText);
25           
26        }
27       
28       }
29     }
30     function handleStr(list)
31     {
32      //获取频道列表所在的div
33      var oldcontent=document.getElementById("top").innerHTML;
34      //更新div的内容
35      var newcontent=oldcontent+list;
36      //显示新的div   document.getElementById("top").innerHTML=newcontent;
37     }

以上是客户端实现的技术，那么当xmlhttp请求服务器端时，服务器需要作些什么呢？当完成客户端代码时，可以发现客户端要求服务器端返回的字符串，下面对服务器端做如下操作：（1）在网站根目录下，添加一个Web窗体，命名为“addRssNamePage.aspx”。（2）将页面的HTML源代码界面内容全部删除，只保留最上面一行代码，此操作主要是删除掉返回操作中的多余字符。保留代码如下

保留代码
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="addRssNamePage.aspx.cs" Inherits="addRssNamePage" %>
2 

在addRssNamePage的Page_Load事件中需要完成两件事:返回客户端数据和将数据保存到数据库中.(保存到数据的操作和页面局部刷新异步进行--ajax的特性).代码如下:

页面加载事件
 1   //获取参数
 2         string name=Request.QueryString["name"];
 3         string url=Request.QueryString["url"];
 4        // 先生成返回的字符串
 5         StringBuilder mystr = new StringBuilder();
 6         mystr.Append("<a href=javascript:loadContent('"+url+"');>"+name+"</a>");
 7         mystr.Append("<br/>");
 8         Response.Write(mystr);
 9         //后台在处理添加到数据库操作
10         RssManager myrss = new RssManager();
11         myrss.AddRss(name, url);

  下一步就是Rss频道的显示功能了.读取数据库中数据的方法前面已经有了,下面是客户端读取频道数据:同样是使用xmlHttpRequest对象.由于频道列表是打开页面时就出现的内容,因此为body的onload事件添加方法getRssName()如下:

取得频道数据方法
 1    function getRssName()
 2     {
 3       createXMLHTTP();
 4       xmlhttp.onreadystatechange=statechangeload;
 5       xmlhttp.open("GET","viewRSSNamePage.aspx",true);
 6       xmlhttp.send(null);
 7     }
 8     function statechangeload()
 9     {
10       if(xmlhttp.readystate==4)
11       {
12          if(xmlhttp.status==200)
13        {
14          //返回的是字符串，进行处理后显示在客户端
15         document.getElementById("top").innerHTML=xmlhttp.responseText;
16        }
17        
18       }
19     }

同样,服务器端需要返回数据给客户端:和上一次服务端步骤相同：

 

（1）在网站根目录下，添加一个Web窗体，命名为“v

利用xmlhttprequest获取远程网页内容
 1    }
 2     function loadContent(url)
 3     {
 4      document.getElementById("Div2").innerHTML="请稍后正在加载..";
 5      createXMLHTTP();
 6      xmlhttp.onreadystatechange=viewContent;
 7      xmlhttp.open("GET",url,true);
 8      xmlhttp.send(null);
 9    }
10    function viewContent()
11     {
12       if(xmlhttp.readystate==4)
13       {
14          if(xmlhttp.status==200)
15        {
16          //返回的是字符串，进行处理后显示在客户端
17         document.getElementById("Div2").innerHTML=xmlhttp.responseText;
18        }
19        
20       }
21     }
22     function FillList(listdom)
23     {
24       var str="";
25       var list=new Array();
26       list=listdom.getElementsByTagName("item");
27       for(var i=0;i<list.length;i++)
28       {
29        var sondom=list[i].childNodes;
30        var name,link,desc;
31        for(var j=0;j<sondom.length;j++)
32        {
33        if(sondom[j].nodeName=="title")
34        {
35         name=sondom[j].nodeTypedValue;
36        }
37           if(sondom[j].nodeName=="link")
38        {
39         link=sondom[j].nodeTypedValue;
40        }
41           if(sondom[j].nodeName=="description")
42        {
43           desc=sondom[j].nodeTypedValue;
44        }
45        }
46        str=str+"<a href='"+link+"'>"+name+"</a><br/>";
47        str=str+"<p>"+desc+"</p><br/>";
48       }
49       document.getElementById("Div2").innerHTML=str;
50     }

iewRssNamePage.aspx”。 （2）清除“viewRssNamePage.aspx”页的HTML源代码，除第一行外的全部删除。
其中Page_Load事件代码如下：

Page_Load事件
 1 RssManager myrss = new RssManager();
 2         ArrayList mydata = myrss.GetRssName();
 3         string[] splitdata = new string[2];
 4         StringBuilder mystr = new StringBuilder();
 5         for (int i = 0; i < mydata.Count; i++)
 6         {
 7             splitdata = mydata[i].ToString().Split(',');
 8            mystr.Append("<a href=javascript:loadContent('"+splitdata[1]+"');>"+splitdat[0]+"</a>");
 9            // mystr.Append("<a href=javascript:loadContent('www.163.com');></a>");
10             mystr.Append("</br>");
11         
12         }
13         Response.Write(mystr);
14         

1 

最后就是显示频道内容功能。不知道什么原因，我的代码总是不能把频道内容显示出来，老是找不到资源。请朋友们多多帮助。加载Rss内容的方法：

利用xmlhttprequest获取远程网页内容
 1    }
 2     function loadContent(url)
 3     {
 4      document.getElementById("Div2").innerHTML="请稍后正在加载..";
 5      createXMLHTTP();
 6      xmlhttp.onreadystatechange=viewContent;
 7      xmlhttp.open("GET",url,true);
 8      xmlhttp.send(null);
 9    }
10    function viewContent()
11     {
12       if(xmlhttp.readystate==4)
13       {
14          if(xmlhttp.status==200)
15        {
16          //返回的是字符串，进行处理后显示在客户端
17         document.getElementById("Div2").innerHTML=xmlhttp.responseText;
18        }
19        
20       }
21     }
22     function FillList(listdom)
23     {
24       var str="";
25       var list=new Array();
26       list=listdom.getElementsByTagName("item");
27       for(var i=0;i<list.length;i++)
28       {
29        var sondom=list[i].childNodes;
30        var name,link,desc;
31        for(var j=0;j<sondom.length;j++)
32        {
33        if(sondom[j].nodeName=="title")
34        {
35         name=sondom[j].nodeTypedValue;
36        }
37           if(sondom[j].nodeName=="link")
38        {
39         link=sondom[j].nodeTypedValue;
40        }
41           if(sondom[j].nodeName=="description")
42        {
43           desc=sondom[j].nodeTypedValue;
44        }
45        }
46        str=str+"<a href='"+link+"'>"+name+"</a><br/>";
47        str=str+"<p>"+desc+"</p><br/>";
48       }
49       document.getElementById("Div2").innerHTML=str;
50     }

这是动态读取没有任何和数据库或者服务器有关的操作。只在客户端进行。但是没有实现，哪位高手可以指点一下，多谢。
注：RSS（Really Simple Syndication）是一种描述和同步网站内容的XML格式。RSS的中文可以有多个解释：如简单同步技术、RDF站点摘要等。通常被用于新闻和其它按时间先后顺序排列的网站，例如Blog。