企业级Ajax框架!

知识库

传统表单数据交互方式

网页的基本职能有两个方面:信息显示和信息收集。所有的页面元素都是围绕这两个基本职能构建的,如div、table、input、img等。

所有的网页元素都可以实现信息显示的职能,但是信息收集,在传统表单提交方式下,只能由“表单系列”元素实现,如input(text,file,button,hidden,checkbox,radio)、select、img等。

界定表单元素的一个方法是判断此元素是否具有两个属性:name和value。

下面我们以一个用户登录表单为例来讲解表单提交的要点,代码如下:

<html>
<head>
    <title>用户登录</title>
</head>
<body>
    <!--
        form表单元素, 作为一个可提交到服务端的信息区域块
            method: 提交的方式, get和post
            action: 提交的服务端地址
    -->
    <form method="get" action="login.aspx">
        账号:<input name="id" type="text" style="width:130px;" /><br />
        密码:<input name="pwd" type="password" style="width:130px;" /><br />
        <div style="padding-left:90px;padding-top:5px;">
        <input name="mem" type="checkbox" value="1" />记住我?
        </div>
        <div style="padding-left:90px;padding-top:5px;">
            <input type="reset" value="重置"/>
            <input type="submit" value="登录"/>
        </div>
    </form>
</body>
</html>

当输入内容提交后,如果是get方式,会在浏览器网址显示如下内容:

http://.../login.aspx?id=edojs.com&pwd=123456&mem=1

可以看到有id、pwd和mem三个参数,以及他们的值。

此时,页面的数据提交工作已经完成,需要服务端做数据接收的处理了,代码如下:

String id = Request["id"];
String pwd = Request["pwd"];
String mem = Request["mem"];
//...对收到的数据做处理,进行一些数据库的操作

无论服务端是ASP、PHP、JSP或ASP.NET,都基于这种HTML表单提交的方式进行数据交互。

注:如果您不是ASP.NET开发者,到此可以跳过本节,直接看Ajax无刷新交互;如果您是ASP.NET开发者,可能会对以上内容存在疑虑,请继续阅读。


在ASP.NET平台下,情况有一些改变了。微软实现了一个WebForm的概念,虽然本质还是以上的方式,但是可以将Web编程概念向Windows编程靠拢。

使用ASP.NET开发的程序员,会非常熟悉一个叫做“服务端控件”的东西,下面用ASP.NET的服务端控件实现以上的登录页:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="kb_Default" %>
<html>
<head runat="server">
    <title>用户登录</title>
</head>
<body>
    <form id="form1" runat="server">
        账号:<asp:TextBox ID="id" runat="server"></asp:TextBox><br />
        密码:<asp:TextBox ID="pwd" runat="server" TextMode="Password"></asp:TextBox><br />
        <asp:Button ID="Button1"
            runat="server" Text="登录" onclick="Button1_Click" />  
    </form>
</body>
</html>

这里的按钮绑定了一个"onclick"事件,此事件是服务端事件,用C#来处理,代码如下:

protected void Button1_Click(object sender, EventArgs e)
{
    String ID = id.Text;
    string PWD = pwd.Text;
    //...进行登录信息判断
}

在这里我们并没有编写HTML表单,也没有进行服务端Request的表单信息提取,而是直接通过控件对象id即可进行页面与服务端的数据交互。但是我们来分析一下最终呈现在客户端的HTML页面代码,发现一切还是老样子,如下:

<html>
<head><title>
    用户登录
</title></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTExNTc2NTI3OTlkZDhAU2pqwGz9QIwvDJiLphmcL2bd" />
</div>
        账号:<input name="id" type="text" id="id" /><br />
        密码:<input name="pwd" type="password" id="pwd" /><br />
        <input type="submit" name="Button1" value="登录" id="Button1" />      
<div>
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAK13NjaCALH75rvDALGmdGVDAKM54rGBoZyLV3RTodafTBWGr2AaTw2+b29" />
</div></form>
</body>
</html>

ASP.NET生成的HTML内容,还是包括了form和input等基本HTML表单元素,以及相关表单属性,如表单的method和action等,只是这里的action是此ASP.NET页面自身的地址。

这里其实是ASP.NET做了一个客户端页面和服务端组件的对应组件模型。在生成页面的时候,服务端生成一个必要的组件信息代码,存放在生成的HTML代码中,用hidden隐藏表单字段保存。当页面通过表单的方式提交到服务端时,服务端解析出组件对象,根据服务端的事件处理和组件属性进行操作处理,屏蔽了一些HTML表单组件信息通过Request对象获取的底层逻辑。


Ajax无刷新交互

当我们使用Ajax技术进行数据交互时,突破了传统的表单页面提交的方式。无论数据是存储在一个表单元素,或是一个DIV,或是一个JS变量,只要在Ajax请求时,将数据作为交互参数配置好,即可发送到服务端。

如下代码,是使用Edo.util.Ajax组件与服务端无刷新交互的标准代码:

Edo.util.Ajax.request({
    url: 'login.aspx',      //发送到一个登录页
    type: 'post',           //使用Post方式,发送的数据可以突破255个字符限制
    params: {               //发送的数据对象,可以是一个复杂对象
        id: document.getElementById('id').value,                //账号
        pwd: document.getElementById('pwd').value,              //密码
        mem: document.getElementById('mem').checked             //记住我?
    },
    onSuccess: function(text){
        //交互成功, 处理从服务端返回的字符串(一般是一个JSON)
    },
    onFail: function(code){
        //交互失败, 这里一般是物理错误, 比如404等
    }
});

上节服务端处理表单提交的代码,同样适合处理本节Ajax提交的数据。

这里对比了表单提交和Ajax交互两种方式的编程实现,基本上界面显示代码是一样的,区别在于数据提交时,是依赖HTML表单天然的提交功能(页面刷新),还是使用Ajax无刷新数据交互方式,从而获得更好的用户体验和编程控制。

本篇并不准备详细讲解Ajax技术的使用和配置属性,更多Edo.util.Ajax内容,请访问这里


跨平台的JSON解析器:Edo.util.JSON

JSON无疑是最适合http传输协议下进行传输的数据格式了,体积小、易阅读、与JS无缝结合,因为一个JS Object或Array对象本身就是JSON格式。

数据在HTTP协议下传输的时候,它是以字符串的形式存在的。所以我们需要将客户端的JS对象,以及服务端的C#、JAVA、PHP、ASP等对象转换成JSON格式的字符串,相互序列化和反序列化。

比如我们现在有一个JS对象,存放用户登录信息,如下:

var loginObj = {
    id: 'edojs',
    pwd: '123456',
    mem: true
};

现在我们需要将它转换成字符串(当然是JSON格式的),以便使用AJAX传输,并能方便转换成服务端对象:

var json = Edo.util.JSON.encode(loginObj);

得到的JSON字符串如下,跟JS对象的格式是一样的:

{"id": 'edojs',"pwd": '123456',"mem": true}

在ASP.NET平台,我们可以如下接受AJAX发送的数据,并将它转换为服务端对象(HashtableArrayList):

String json = Request["loginInfo"];
//将JSON字符串,一次性转换为C#对象
Hashtable loginInfo = Edo.util.JSON.decode(json);

//得到准确的参数变量,方便进行后续操作
String id = Convert.ToString(loginInfo["id"]);
String pwd = Convert.ToString(loginInfo["pwd"]);
Boolean mem = Convert.ToBoolean(loginInfo["mem"]);

如果是JAVA平台,我们将JSON转换为MapList

String json = request.getParameter("loginInfo").toString();
//将JSON字符串,一次性转换为JAVA对象
Map loginInfo = (Map)Edo.util.JSON.decode(json);

//得到准确的参数变量,方便进行后续操作
String id = loginInfo.get("id").toString();
String pwd = loginInfo.get("pwd").toString();
bool mem = new Boolean(loginInfo.get("mem").toString());

通过使用Edo.util.JSON,无论在客户端还是服务端,无论是Javascript,还是C#或JAVA,都能使用encode和decode两个函数轻松实现不同平台之间的对象传递。


跨平台的数据交互层:IBatis、IBatis.net

EdoJS使用IBatis作为JAVA和.NET后台的数据交互层,可以轻松做到跨服务端平台和跨数据库的数据库操作。

关于Ibatis的介绍和使用,请访问Ibatis官网,并推荐几篇中文翻译


EdoJS的表单+表格+服务端+数据库完整示例

我们提供了JSON序列化、Ajax交互、Ibatis操作数据库的示例,并且包含使用EdoJS表单和表格CURD(增/删/改/查)的完整演示,帮助开发者学习和了解界面与数据服务分离的开发模式,快速入门、轻松掌握。

这里下载EdoSamples