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

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


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

 1        function GetPersonnelKPIStep()
 2 

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

1protected void Page_Load(object sender, EventArgs e)
2     }

 1    public void GetPersonnelKPIStep(string sId, string sSort)
 2    }

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

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

    public void GetPersonnelKPIStepOne(string sId, string sSort)
    }

注意,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            }

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

无刷新更新数据:

 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-6行是获得从客户端传过来的xml.