功能很简单,页面异步发送请求,服务器端响应的内容是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来代替。