AJax+Json+JQuery----前沿

        今天想写点个人的感想,当然肯定有很多不足的地方,若有哪位仁兄发现不妥之处,还望指出。首先这边文章是引言,是从大局的角度给大家介绍下我的想法,然后具体的实现我会从下一篇文章开始详细讲解。

 

       现在网络上大部分网站(个人认为)的数据传输方式都不是基于像Ajax这样数据传输是异步的。Ajax有两个特点:数据的异步传输和页面无刷新,从某种角度上也可以说这就是它的优点。但是Ajax有两点不好:第一:从服务器端发送回来的数据(一般情况下是XML格式)要绑定到控件上有点麻烦。第二:运用Ajax技术就一定要涉及到Js代码,一旦其中的的Js代码出错,要找出错误就显得不是那么容易。所以个人觉得因为上面的两点才让Ajax在网页设计领域中不能大展身手,关于Ajax会在下一篇文章中介绍。

 

      我需要申明的是这一系列文章都是围绕Ajax这种技术来实现数据的异步传输,只是利用了Json和JQuery这两种技术来提高Ajax在网站开发中的效率,也弥补了Ajax在上面谈到的那两方面的不足,而这也是我写这篇文章的主要目的。

 

      原理是通过Json和JQuery写一些逻辑通用的Js方法,这些方法主要处理两个任务:第一组装要发送的数据;第二:处理从服务器端发送回来的数据,如:将服务器端发送回来的数据绑定到控件上等,而Ajax的方法体只需要负责发送和接受这两个动作。有了Json和JQuery这两个助手,Ajax实现网站开发就很容易了。

 

      我们不如假设这里要实现一个业务逻辑:显示Student表中的一条记录。其中Student表的结构如图2所示,那么利用我们说的方法处理这个业务逻辑的数据流就如图1所示了。(本文章所用的后台代码语言是C#,数据库是SQLServer)

图1

 

 

图2

 

对照图1各个步骤的相应说明:

1、  这个Js方法涉及到Json+JQuery技术,主要作用是遍历一个DIV,获取里面所有控件的ID属性,然后配成一个逻辑条件字符串。而这些显示数据的控件的ID命名将有一些规定,必须包含表名和表的属性名称。具体的规定以后的章节里会详细讲解。

这里为了下面的说明需要我假设客户端有三个Span控件和一个DIV

<div id="StudentID">

  <span id="LbStudent_Name"></span>

  <span id="LbStudent_Age"></span>

  <span id="LbStudent_Number"></span>

<div>

2、 在这里大家可以这样理解,这个业务逻辑条件是通过遍历DIV获取其中的Span控件的ID来获取的,最后就得到这样的一条字符串:

             "Student_Name:Student_Age:Student_Number"

 

3、 在后台代码中,调用一个方法(大家自己也可以写的),可以将上面的逻辑条件配成一个SQL语句,如下:

     "Select  Student.Name,Student.Age,Student.Number From Student"

 

     有些读者会问在第1步中控件的ID命名为什么要包含表名和属性名。这里就是为了动态的配置SQL语句的。

4、  这个Js方法涉及到Json+JQuery技术,然后到数据库中获取数据,所获取出来的数据依照大家自己的习惯,可以是DataTable或者Student实体等。

5、  这这里大家要写一个方法,就是将上面的那条SQL语句所查出来的结果要拼成一个Json格式的字符串,如:获取的数据如图2所示的话,那么最后的Json格式的字符串可以为如下:

    {"Student_Name":"斌羽","Student_Age":"23","Student_Number":"200717030102"}

这里也提示下,现在网上很多关于把实体转换成Json格式的插件,大家可以去下载。

 

6、  读者肯定有个疑问,第5点,为什么从数据库中获取的数据要转换成Json格式的字符串,还有Json格式的字符串每个键的名称为什么要包含表名和属性名,如:Student_Name

,这是为了将这个Json格式的字符串发送到客户端,客户端只要调用一个通用的Js方法就可以动态的将这些数据绑定到每个控件上。具体的我会在后面的文章中给大家一个例子来讲述。

    上面写的这部分内容可能有点抽象,明天开始我会写一些例子,来说明上面图1中的每个步骤,到时候会更好理解。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章