javascript中的自定义属性的应用--避免频繁访问数据库

在WEB应用程序中，经常需要将数据从数据库中取出来，填充到HTML控件中，然后再存回数据库。

如果数据并未改动，仍然占用网络资源存入数据库，则对网络资源是一种浪费，当页面数据很多和网络访问量很大时，就会形成性能的瓶颈。如何能在提交数据前进行判断呢？

一种方法是建隐藏控件或定义全局变量，这种情况适用于控件很少时，若一个表单页面有数十项时，建隐藏控件太多反而降低性能，定义全局变量不容易记忆。

另一种方法，就是在原有控件中增加自定义属性，这样，既能避免逻辑复杂，又能节省网络流量。

如页面中有一文本框:

< input  type ="text"  id ="txtName" >

在页面的 onload 事件中加入如下代码：

function  initvalue()
... {
        var xm = "张三";                //假设从数据库中取得
    var obj = document.getElementById("txtName");
    obj.value = xm;
    obj.setAttribute("originValue",xm);
}

 

页面添加一按钮,其点击事件onclick如下:

function  upload()
... {
    var obj = document.getElementById("txtName");
    var xm = obj.value;
    var origin_xm = getCustomAttributeValue(obj,"originValue");
    if(xm == origin_xm)
    ...{
        alert("值未变,不需存回数据库");
    }
    else
    ...{
            alert("值已发生改变,可以写回! 初始值为:" + origin_xm + " 当前值为:" + xm);
            //写回数据库...
            //...
    }
}

代码如下:

< html >
< head >
     < title > 自定义属性应用 </ title >
     < script  language ="javascript" > ...
        function initvalue()
        ...{
            var xm = "张三";                //假设从数据库中取得
            var obj = document.getElementById("txtName");
            obj.value = xm;
            obj.setAttribute("originValue",xm);
        }
        
        function upload()
        ...{
            var obj = document.getElementById("txtName");
            var xm = obj.value;
            var origin_xm = getCustomAttributeValue(obj,"originValue");
            if(xm == origin_xm)
            ...{
                alert("值未变,不需存回数据库");
            }
            else
            ...{
                    alert("值已发生改变,可以写回! 初始值为:" + origin_xm + " 当前值为:" + xm);
                    //写回数据库...
                    //...
            }
        }
        
        function getCustomAttributeValue(obj,attr)
        ...{
            if(obj.attributes[attr])
                return obj.attributes[attr].nodeValue;
            else
                return null;
        }
        
        
        function setCustomAttributeValue(obj,attr,value)
        ...{
            if(value != null)
            ...{
                obj.attributes[attr].nodeValue = value;
            }
        }
     </ script >
</ head >
< body  onload ="initvalue();" >
     < input  type ="text"  id ="txtName" >
     < input  type ="button"  value ="存回数据库"  onclick ="upload();" >
</ body >
</ html >

源代码: 点此进入下载页面
博客园下载地址: http://www.cnblogs.com/Files/redleaf1995/jsSaveDB.rar