页面加载时也会执行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("
");
        salesrecordsBL _sales = new salesrecordsBL();
        MySqlDataReader dr = _sales.GetFrontListData(num);  //读取数据库
        while(dr.Read())
        {
            sb.Append("
");
            sb.Append("");
            sb.Append(dr["customer"].ToString());
            sb.Append("  ");
            sb.Append(dr["phone"].ToString().Substring(0, 3));
            sb.Append("****");
            sb.Append(dr["phone"].ToString().Substring(7, 4));
            sb.Append("  ");
            sb.Append(dr["address"].ToString());
            sb.Append("  ");
            sb.Append(dr["productName"]);
            sb.Append("  ");
            sb.Append(dr["addDate"].ToString().Substring(0, 10));
            sb.Append("  ");
            sb.Append("已发货");
            //sb.Append("李小姐 （138****1417） 江西省九江市1套 绿瘦B款 2009-07-03 已发货");
            sb.Append("");
            sb.Append("
");
        }
        dr.Close();
        sb.Append("
");
        
        return sb.ToString();
    }