如何让代码变得更简洁

简约至上

 

Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据

  关于Ajax的话题网上已经很多很多了,但好多都是利用控件开源框架来实现,特别是vs2008更是集成了好多ajax控件,把ajax的执行过程封装的严严实实。本人也用过这些框架和控件,感觉就是爽。但是近来心血来潮,想看看ajax到底是如何执行的,就想自己动手实现一下,正好也锻炼一下我的js水平。废话少说,如题,我们看一下执行过程。

1.这次实现总共用了两个页面:AjaxTest6.aspx和Ajax.aspx

  其中AjaxTest6.aspx是发起请求的页面,Ajax.aspx获取AjaxTest6.aspx的请求,并进行处理的页面。

  处理过程:(1)AjaxTest6.aspx发起http请求--->(2)Ajax.aspx获取url中的参数,根据此参数在数据库中执行查询操作并返回结果(数据集) --->(3)把返回的数据集进行xml处理通过response输出。注意现在输出数据的格式是xml ---(4)AjaxTest6.aspx获得Ajax.aspx输出xml数据并显示

2.AjaxTest6.aspx中的js代码

Code

 说明:第一个函数createXMLHttpRequest用来创建XMLHttpRequest对象,关于该对象的详细 说明可以参考相关文章,现在只要明白当我们使用http请求发送数据,并使用xml来传递数据时要用到该对象,声明好后我们就可以在下面使用了

第二个函数是 用来发送http请求,一般情况下url都带有参数,通过 xmlhttp.open("GET","Tools/Ajax.aspx?cateid="+vr1,true);这句话我们可以看出来是向Ajax.aspx发送带参数的请求,Ajax.aspx捕获此参数,然后根据此参数在数据库中执行查询,具体处理过程我们下面细说。

     在这个函数中我们还要注意一句话

xmlhttp.onreadystatechange=handleStateChange;//在请求状态发生改变时调用此方法

 因为xmlhttp对象在执行的过程中要分为几个阶段,每个阶段都对应不同的状态值:0 表示初始化,1表示正在加载,,2表示已加载,3表示交互中,4表示完成

所以上面那段代码表示只要xmlhttp的对象的状态发生变化就执行 handleStateChange方法,它具体实现的功能如下:

 这个方法首先找到显示数据的个div标签(ret),然后判断xmlhttp的执行状态,当状态值变成4并且xmlhttp.status==200 (status是服务器的http状态码 200对应OK 404对应Not Found,如果你对xmlhttprequest对象不是很熟,建议你先熟悉一下)

     显然当xmlhttp.onready==4并且xmlhttp.stauts==200说明已经在服务器端把所有的数据读出来了,此时数据放在一个xml文件中,这个xml文件是我们在服务器端生成的。

     程序执行到现在已经万事俱备了,现在只欠从浏览器中读取这个xml文件了。这时要注意,也就是下面我们要说的最后一个函数GetText()

 这个函数首先告诉浏览器我们要读取是个xml对象(当然你也可以设置成字符串格式的,例如:var xmlDoc=xmlhttp.responseText);我们之所以把数据集设置成xml格式是因为此时它可以被解析为一个DOM对象,这样我们在下面对它的处理就相当灵活了。

    到现在我们已经把客户端的代码说完了,下面说一下服务器端的执行过程,这个过程是在Ajax.aspx的后置代码中完成的

1.首先我们在Page_Load事件中获取url中的参数,该参数从AjaxTest6.aspx中发送。然后根据此参数执行查询,具体代码我就不再详细解释,大家一看就明白,代码如下:

 1    private static readonly string sql = "server=xxx;database=xxx;uid=sa;pwd=xxx";
 2    protected void Page_Load(object sender, EventArgs e)
 3    {
 4        string id=Request.QueryString["cateid"];
 5        System.Threading.Thread.Sleep(2000);
 6        GetTitle(Convert.ToInt32(id));
 7    }

 8
 9    private DataTable GetLogs(int cateid)
10    {
11        using (SqlConnection con = new SqlConnection(sql))
12        {
13            con.Open();
14            string select = "SELECT Id,CateId,LogTitle FROM Logs WHERE CateId = " + cateid;
15            SqlDataAdapter sda = new SqlDataAdapter(select, con);
16            DataTable dt = new DataTable();
17            sda.Fill(dt);
18            con.Close();
19            return dt;
20        }

21    }

22
23    public void GetTitle(int id)
24    {
25        DataTable dt = GetLogs(id);
26        StringBuilder sb = new StringBuilder();
27        if (dt != null && dt.Rows.Count>0)
28        {
29            for (int i = 0; i < dt.Rows.Count;i++ )
30            
31                sb.AppendLine(dt.Rows[i][2].ToString());
32            }

33            CreateResponse(sb.ToString());
34        }

35    }

说明:通过GetTitle(int id)可以看出,我把从库里读出的数据转换成字符串交给CreateResponse方法(这里可能不太合适,因为当数据量大时可能不太安全),下面就是关于把数据转化成xml文件的操作

Code

 

本人的表达能力有限,并且也正在学习Ajax的过程中,如果同志们有什么好的改进建议请尽快发表。还有就是不用提醒我用一些控件和开源框架来实现类似功能,我已经说了,我就是想知道Javsscript,xml,xmlhttprequest到底是协同工作的,从现在看来我的目的达到了。欢迎各位批评指正!

    随附一句:这是小弟的网站天空在线,刚开始干,不太在行,希望大家有时间光顾一下,价钱都好商量!

posted on 2008-11-22 12:45  我每天都在进步o(∩_∩)o...  阅读(2119)  评论(0编辑  收藏  举报

导航