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

原文：http://www.cnblogs.com/DoNetBird/archive/2006/08/25/486665.html


首先是获得数据并绑定好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属性即可
服务端代码:

1protected 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()一定要加上
客户端代码:

 1var 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()的参数传给服务端
服务端代码:

 1public 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.