ajax填充GridView

功能很簡單,頁面異步發送請求,服務器端響應的內容是XML,頁面根據返回的XML填充已存在的GridView

新增頁面用於展示數據

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
02.<html xmlns="http://www.w3.org/1999/xhtml">  
03.<head runat="server">  
04.    <title></title>  
05.    <script type="text/javascript">  
06.        var xmlHttp = null;  
07.        var isIE = !!window.ActiveXObject;  
08.  
09.        function createXMLHttpRequest() {  
10.            if (xmlHttp == null) {  
11.                if (window.XMLHttpRequest) {  
12.                    //Mozilla 瀏覽器    
13.                    xmlHttp = new XMLHttpRequest();  
14.                } else if (isIE) {  
15.                    // IE瀏覽器    
16.                    try {  
17.                        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
18.                    } catch (e) {  
19.                        try {  
20.                            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
21.                        } catch (e) {  
22.                            alert('創建失敗');  
23.                        }  
24.                    }  
25.                }  
26.            }  
27.        }  
28.  
29.        function openAjax() {  
30.            if (xmlHttp == null) {  
31.                createXMLHttpRequest();  
32.                if (xmlHttp == null) {  
33.                    alert('出錯');  
34.                    return;  
35.                }  
36.            }  
37.  
38.            xmlHttp.open("post", "Handler.ashx", true);  
39.  
40.            xmlHttp.onreadystatechange = xmlHttpChange;  
41.  
42.            xmlHttp.send(null);  
43.        }  
44.  
45.        function xmlHttpChange() {  
46.            if (xmlHttp.readyState == 4) {  
47.                if (xmlHttp.status == 200) {                      
48.                    var vehArr = xmlHttp.responseXML.getElementsByTagName('veh');  
49.                    var tb = document.getElementById('<%=gv.ClientID %>');                                         
50.                    var tr,td;                      
51.                    for (var i = 0, len = vehArr.length; i < len; i++) {  
52.                        tr = document.createElement("tr");  
53.                        td = document.createElement("td");  
54.                        td.innerHTML = vehArr[i].getAttribute('id');  
55.                        tr.appendChild(td);  
56.                        td = document.createElement("td");  
57.                        td.innerHTML = isIE ? vehArr[i].firstChild.text : vehArr[i].childNodes[1].textContent;                          
58.                        tr.appendChild(td);  
59.                        tb.tBodies[0].appendChild(tr);  
60.                    }  
61.                    alert('加載完成!');  
62.                }  
63.            }  
64.        }                
65.    </script>  
66.</head>  
67.<body>  
68.    <form id="form1" runat="server">      
69.    獲取數據並填充GridView  
70.    <asp:Button ID="btn" runat="server" Text="GO" OnClientClick="openAjax();return false;" />  
71.    <br />  
72.    <asp:GridView ID="gv" runat="server">  
73.    </asp:GridView>  
74.    </form>  
75.</body>  
76.</html>  


 

對應的cs文件代碼:

01.protected void Page_Load(object sender, EventArgs e)  
02.        {  
03.            if (!IsPostBack)  
04.            {  
05.                gv.DataSource = new[] { new { id = 3, lsh = 1110917109126 } };  
06.                gv.DataBind();  
07.            }  
08.              
09.        }  


 

新增處理程序用於處理異步請求

01./// <summary>   
02.    /// Summary description for Handler   
03.    /// </summary>   
04.    public class Handler : IHttpHandler  
05.    {  
06.  
07.        public void ProcessRequest(HttpContext context)  
08.        {  
09.            context.Response.ContentType = "text/xml";              
10.            string xml=@"  
11.<root>  
12.<head>  
13.    <code>1</code>  
14.    <message>數據下載成功</message>  
15.    <rownum>1</rownum>  
16.</head>  
17.<body>  
18.    <veh id='0'>  
19.        <lsh>1110917109123</lsh>  
20.    </veh>  
21.    <veh id='1'>  
22.        <lsh>1110917109124</lsh>  
23.    </veh>  
24.    <veh id='2'>  
25.        <lsh>1110917109125</lsh>  
26.    </veh>  
27.    <veh id='N'>  
28.        <lsh>N</lsh>  
29.    </veh>  
30.</body>  
31.</root>";  
32.            context.Response.Write(xml);  
33.        }  
34.  
35.        public bool IsReusable  
36.        {  
37.            get  
38.            {  
39.                return false;  
40.            }  
41.        }  
42.    }  


需要注意的地方,在頁面的cs文中 使用了匿名類,要確保運行環境支持,如不支持,請用普通的class來代替。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章