ajax 实现数据库数据的读取,因与页面加载异步,故不影响页面打开速度。实现了js操作数据库
思韵闪耀
2010-10-01
0
页面加载时也会执行initIndex()函数,并会执行完毕,但因采用的是异步方式,数据读取与函数执行分开,故数据读取所用的时间不包含在页面加载的时间之内,提高了速度。实现了静态与动态的分离,时间的分离!

以下程序兼容Firefox 与 IE

1,在页面加载时调用initIndex();
  

2, JS
var projecturl = "WebService.asmx/";
function InitIndex()
{
    //发货记录
      var record = document.getElementById("spanShipRecord");
      getString(record,"get", "ShipRecord", "num=8");  //传入页面中将要显示数据的控件,一般为一个div,或span.
      var knowledge = document.getElementById("loseweightknowledge");
      getString( knowledge,"get", "News", "sortId=1&&num=10");
      var words = document.getElementById("guestWords");
      getString( words,"get", "GuestWords", "num=10");
}

function getString(record,methods,functions,key)
{

    url = "WebService.asmx/"+functions+"?"+key;  //通过此来执行连接,转到页面进行处理,数据库操作就在页面中完成,可转到java中的action
    var xmlhttp = false;
    try
    {
        xmlhttp = new XMLHttpRequest();
    }
    catch (trymicrosoft)
    {
        try
        {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)
        {
            try
            {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                xmlhttp = false;
            }
        }
    }

    if (!xmlhttp)
    {
        alert("Error initializing XMLHttpRequest!");
    }

    xmlhttp.open(methods, url,true); //true代表异步传输,结果在onreadystatechange的回调函数中进行处理。
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlhttp.onreadystatechange= function (){

    if(xmlhttp.readyState == 4){ 

             if(xmlhttp.status == 200){ 

     if (window.ActiveXObject)
    {
        dom = new ActiveXObject("Microsoft.XMLDOM");
        dom.async = true;
        dom.resolveExternals = false;
        dom.load(xmlhttp.responseBody);
        //dom = xmlhttp.responseXML;
        //dom.load(xmlhttp.responseXML);
    }
    else if (document.implementation && document.implementation.createDocument)
    {
        var parser=new DOMParser();
        dom=parser.parseFromString(xmlhttp.responseText,"text/xml");
    }

    var nodes = dom.documentElement.childNodes;  //获取页面中操作完之后返回的页面,会自动转成xml
    if ( nodes[0] != undefined){
                record.innerHTML = nodes[0].nodeValue;  //record.innerHTML显示结果。
            }
                       } else{
                     record.innerHTML = "服务器故障";
                }
             }
    }

    xmlhttp.send("");      

}

3, 页面处理数据:通过上面的open 一个url,执行其中的函数,读取数据库中的数据。
 public string ShipRecord(int num)
    {
        StringBuilder sb = new StringBuilder();
        sb.Append("


");

        return sb.ToString();
    }


【版权声明】
本站部分内容来源于互联网,本站不拥有所有权,不承担相关法律责任。如果发现本站有侵权的内容,欢迎发送邮件至masing@13sy.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

上一篇: DWR与Spring的融合

下一篇: 色彩理论

相关内容

将IIS设置克隆到新服务器...
将IIS设置克隆到新服务器的最佳方法是使用IIS配置文件。以下是详...
2025-06-06
网页保护、网页图片保护
1、禁止另存网页,把如下代码加入到网页body/body中 程序代...
2025-05-30
搭建Git服务器及本机克隆...
Git是什么?Git是目前世界上最先进的分布式版本控制系统。SVN...
2025-03-17
ubuntu环境下搭建gi...
操作环境:服务器:Ubuntu 24.04.2 LTS+git 2...
2025-03-17
SqlServer 数据库...
--查看数据库大小SELECT DB_NAME(database_...
2024-09-03
docker-compos...
1.Compose介绍 DockerCompose是一个用来定义和...
2024-04-26

热门资讯

Invalid left-ha... 写一个提交函数的时候,发现函数不生效,F12之后看到Invalid left-hand side i...
响应图片(Responsive... 一、开门见山 响应图片技术可以说是响应布局衍生出来的一个小分支。说白了,就是不同显示器宽度下调用不同...
轻松删除MetInfo CMS... 第一步:首页底部版权,模板文件foot直接删除; 第二部:首页头部generator版权,\publ...
ckplayer6.3如何替换... 1.刚打开播放器,视频在缓冲时播放器中间的LOGO怎么替换?(如下图) 2.视频播放器右上角的CK ...
inDensity,inTar... 如果接触Android中的Bitmap较深的话,肯定会知道标题上的这三个属性值,那么这三个属性值的关...
JS 验证 利用Javascript中每个对象(Object)的prototype属性我们可以为Javascri...
在文本框中输入时保证总是在最... 那就要在keypress时保证文本框的光标在尾部,而文本框value赋值后其光标默认在最后,故可采用...
微信UA Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5...
检测大写锁定键(Caps Lo... h1检测大写锁定键/h1form action="#" method="post" p label ...
iframe高度自适应,全屏,... !注意此方法用于同一个域名下,可能需要部署在服务器上才能看出效果 !DOCTYPE html PUB...