Ajax实现无刷新的获取数据并绑定到GridView,以及无刷新更新数据

首先是获得数据并绑定好GridView
客户端javascript代码:

 1          function  GetPersonnelKPIStep()
 2          {            
 3                      
 4            var sId=GetParam("c_id");
 5            
 6            document.getElementById("hId").value=sId;
 7            
 8            var xmlhttp = new ActiveXObject("MSXML2.XMLHTTP"); 
 9            xmlhttp.Open("post","FmPersonnelKPIData.aspx?MethodName=GetPersonnelKPIStep&c_id="+sId+"&c_sort=",false);
10            xmlhttp.Send();
11            var sGridContent=xmlhttp.responseText;    
12             
13            var iStart=sGridContent.indexOf("<table");
14            var iEnd=sGridContent.indexOf("</table>");            
15            document.getElementById("divStep").innerHTML= sGridContent.substring(iStart,iEnd+8);            
16        }  

因为GirdView最后会翻译成Table在浏览器上显示,所以我只要获得返回流中的Table并将其赋给div的innerHTML属性即可
服务端代码:

1 protected   void  Page_Load( object  sender, EventArgs e)
2      {
3        if (!IsPostBack)
4        {
5            if (sMethodName == "GetPersonnelKPIStep")
6            {
7                GetPersonnelKPIStep(sId, Request.QueryString["c_sort"].ToString()); 
8            }
9     }

 1      public   void  GetPersonnelKPIStep( string  sId,  string  sSort)
 2      {
 3        CWSHr cwsHr = new CWSHr();
 4        _DateNum = cwsHr.GetPersonnelKPIDateNum(sId);
 5        _kpiDatetime = cwsHr.GetPersonnelKPIDateTime(sId);
 6        if (_kpiDatetime == null || _kpiDatetime.Length != 2)
 7            return;
 8
 9        _StartDate = Convert.ToDateTime(_kpiDatetime[0]);
10
11        DataSet ds= cwsHr.GetPersonnelKPIStep(sId,sSort);
12        GV_Step.DataSource = ds.Tables[0].DefaultView;
13        GV_Step.DataBind();
14    }

在服务端获得并绑定数据到GridView

获得xml格式的数据:
服务端代码:

     public   void  GetPersonnelKPIStepOne( string  sId,  string  sSort)
     {
        CWSHr cwsHr = new CWSHr();
        DataSet ds = cwsHr.GetPersonnelKPIStep(sId, sSort);
        Response.Write(ds.GetXml());
        Response.End();
    }

注意,Response.End()一定要加上
客户端代码:

 1 var  xmlhttp  =   new  ActiveXObject( " MSXML2.XMLHTTP " ); 
 2             xmlhttp.Open( " post " , " FmPersonnelKPIData.aspx?MethodName=GetPersonnelKPIStepOne&c_id= " + sId + " &c_sort= " + sSort, false );
 3             xmlhttp.Send();
 4              var  sGridContent = xmlhttp.responseText;    
 5                     
 6              // alert(sGridContent);     
 7              var  xmlDom = new  ActiveXObject( " MSXML2.DOMDocument " );
 8             xmlDom.loadXML(xmlhttp.responseText);
 9              var  nodes = xmlDom.selectSingleNode( " //NewDataSet/Table " ).childNodes;
10              if  (nodes  !=   null )
11              {
12                for (var i=0;i<nodes.length;i++)
13                {                    
14                    if (nodes[i].nodeName=="c_sort")
15                        document.getElementById("ETBSort").value=nodes[i].text;
16                    else if (nodes[i].nodeName=="c_type")
17                        document.getElementById("ETBType").value=nodes[i].text;
18                    else if (nodes[i].nodeName=="c_item")
19                        document.getElementById("ETBKpi").value=nodes[i].text;
20                    else if (nodes[i].nodeName=="c_st_dt")
21                        document.getElementById("ETB_StDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
22                    else if (nodes[i].nodeName=="c_en_dt")
23                        document.getElementById("ETB_EnDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
24                    else if (nodes[i].nodeName=="c_st_dt_fact")
25                        document.getElementById("ETB_StFDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
26                    else if (nodes[i].nodeName=="c_en_dt_fact")
27                        document.getElementById("ETB_EnFDt").value=nodes[i].text.substring(0,nodes[i].text.indexOf("T"));
28                    else if (nodes[i].nodeName=="c_result")
29                        document.getElementById("ETBFact").value=nodes[i].text;
30                    else if (nodes[i].nodeName=="c_propotion")
31                        document.getElementById("ETBPropotion").value=nodes[i].text;
32                    else if (nodes[i].nodeName=="c_score")
33                        document.getElementById("ETBScore").value=nodes[i].text;
34                       
35                }
36            }

注意以上获取时间中日期部分的处理

无刷新更新数据:

 1                  var  xmldoc  =   new  ActiveXObject( " MSXML2.DOMDocument " );            
 2                  var  xmlhttp  =   new  ActiveXObject( " MSXML2.XMLHTTP " );                                     
 3                 xmldoc.loadXML( "" );
 4                 
 5                 newNode1  =  xmldoc.createElement( " NewDataSet " );
 6                 xmldoc.appendChild(newNode1);
 7                 newNode2  =  xmldoc.createElement( " tb_o_k_task " );
 8                 newNode1.appendChild(newNode2);
 9                                 
10                 newNode  =  xmldoc.createElement( " c_id " );
11                 newNode.text  =  document.getElementById('hId').value;
12                 newNode2.appendChild(newNode);
13                 
14                 newNode  =  xmldoc.createElement( " c_sort " );
15                 newNode.text  =  document.getElementById('ETBSort').value;
16                 newNode2.appendChild(newNode);
17                 
18                 newNode  =  xmldoc.createElement( " c_item " );
19                 newNode.text  =  document.getElementById('ETBKpi').value;
20                 newNode2.appendChild(newNode);
21                 
22                 newNode  =  xmldoc.createElement( " c_type " );
23                 newNode.text  =  document.getElementById('ETBType').value;
24                 newNode2.appendChild(newNode);
25
26                 newNode  =  xmldoc.createElement( " c_st_dt " );
27                 newNode.text  =  document.getElementById('ETB_StDt').value;
28                 newNode2.appendChild(newNode);
29                 
30                 newNode  =  xmldoc.createElement( " c_en_dt " );
31                 newNode.text  =  document.getElementById('ETB_EnDt').value;
32                 newNode2.appendChild(newNode);
33                 
34                 newNode  =  xmldoc.createElement( " c_st_dt_fact " );
35                 newNode.text  =  document.getElementById('ETB_StFDt').value;
36                 newNode2.appendChild(newNode);
37                 
38                 newNode  =  xmldoc.createElement( " c_en_dt_fact " );
39                 newNode.text  =  document.getElementById('ETB_EnFDt').value;
40                 newNode2.appendChild(newNode);
41                 
42                 newNode  =  xmldoc.createElement( " c_propotion " );
43                 newNode.text  =  document.getElementById('ETBPropotion').value;
44                 newNode2.appendChild(newNode);
45                 
46                 newNode  =  xmldoc.createElement( " c_result " );
47                 newNode.text  =  document.getElementById('ETBFact').value;
48                 newNode2.appendChild(newNode);
49                 
50                 newNode  =  xmldoc.createElement( " c_score " );
51                 newNode.text  =  document.getElementById('ETBScore').value;
52                 newNode2.appendChild(newNode);
53                 
54                 xmlhttp.Open( " post " ,  " FmPersonnelKPIData.aspx?MethodName=SavePersonnelKPIStep " + " &sAct= " + escape(sAct),  false );     
55                 xmlhttp.setRequestHeader( " Content-Type " , " text/xml " );                                
56                 xmlhttp.send(xmldoc.xml); 
57

首先将要更新的数据构造成一个xml对象,再将这个xml对象做为xmlhttp.send()的参数传给服务端
服务端代码:

 1 public   void  SavePersonnelKPIStep( string  sAct)
 2      {
 3        System.IO.Stream instream = Page.Request.InputStream;
 4        BinaryReader br = new BinaryReader(instream, System.Text.Encoding.UTF8);
 5        byte[] byt = br.ReadBytes((int)instream.Length);
 6        string sXml = System.Text.Encoding.UTF8.GetString(byt);
 7
 8        System.Xml.XmlDocument xmlDoc = new System.Xml.XmlDocument();
 9        xmlDoc.LoadXml(sXml);
10
11        string sid = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_id").InnerText;
12        string ssort = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_sort").InnerText;
13        string sitem = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_item").InnerText;
14        string stype = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_type").InnerText;
15        string sstdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_st_dt").InnerText;
16        string sendt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_en_dt").InnerText;
17        string sstfdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_st_dt_fact").InnerText;
18        string senfdt = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_en_dt_fact").InnerText;
19        string spropotion = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_propotion").InnerText;
20        string sresult = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_result").InnerText;
21        string sScore = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_score").InnerText;
22
23        spropotion = (spropotion == "" ? "1" : spropotion);
24
25        CWSHr cwsHr = new CWSHr();
26
27        if (sAct == "修改")
28        {
29            string soldsort = xmlDoc.SelectSingleNode("//NewDataSet/tb_o_k_task/c_oldsort").InnerText;
30            cwsHr.UpdatePersonnelKPIStep(sid, soldsort, ssort, sitem, stype, sstdt,sendt,sstfdt,senfdt, spropotion, sresult,sScore);
31        }
32        else if (sAct == "新增")
33        {
34            cwsHr.SaveNewPersonnelKPIStep(sid, ssort, sitem, stype, sstdt, sendt, sstfdt, senfdt, spropotion, sresult);
35        }
36
37    }

上面代码的3-6行是获得从客户端传过来的xml.