ajax

最新推荐文章于 2024-11-17 11:44:11 发布

weixin_30500105

最新推荐文章于 2024-11-17 11:44:11 发布

阅读量63

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/hejinyang/archive/2013/04/25/3043762.html

版权

一，新建一个一般处理程序Common.ashx

View Code

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.Script.Serialization;
 6 
 7 namespace web_ajax {
 8     /// <summary>
 9     /// 处理班级表的增删改查
10     /// </summary>
11     public class Common : IHttpHandler {
12         // 全局变量--创建业务层的班级操作对象
13         BLL.Classes bll = new BLL.Classes();
14         public void ProcessRequest(HttpContext context) {
15             context.Response.ContentType = "text/plain";
16             List<MODEL.Classes> list = bll.GetAllList(false);
17             
18             //1.将泛型集合转换成json格式的字符串数组：1添加程序集System.Web.Extensions 2 .导入命名空间：System.Web.Script.Serialization;
19             //2.创建js序列化器对象
20             JavaScriptSerializer jsS = new JavaScriptSerializer();
21             //3.Serialize方法传入泛型集合，返回json格式的字符串；原理：使用反射，读出传入的类型的属性；
22             string jsonArrStr = jsS.Serialize(list);
23             //4.输出给浏览器的异步对象
24             context.Response.Write(jsonArrStr);
25 
26         }
27 
28         public bool IsReusable {
29             get {
30                 return false;
31             }
32         }
33     }
34 }

二，使用浏览器兼容的方式创建异步对象

View Code

 1 //使用浏览器兼容的方式创建 异步对象
 2 function createXhr() {
 3     var xhobj = false;
 4     try {
 5         xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+
 6     } catch (e) {
 7         try {
 8             xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6
 9         } catch (e2) {
10             xhobj = false;
11         }
12     }
13     if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari
14         xhobj = new XMLHttpRequest();
15     }
16     return xhobj;
17 }

三，创建一个list.html静态页面，发送异步对象到Common.ashx ，获得数据显示在页面上

View Code

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>班级列表</title>
 5     <style type="text/css">
 6     #tbList{border-top:1px solid #000;border-left:1px solid #000; margin:0px auto; width:600px;}
 7     #tbList th,td{border-bottom:1px solid #000;border-right:1px solid #000; padding:5px;}
 8     </style>
 9     <script src="Common.js" type="text/javascript"></script>
10     <script type="text/javascript">
11         var xhr = false; //异步对象
12         var tbListObj = false; //表格对象
13         //当浏览器加载数据后
14         window.onload = function () {
15             tbListObj = document.getElementById("tbList");//获得表格dom对象
16             //创建异步对象
17             xhr = createXhr();
18             LoadList();
19         }
20         //一.加载列表
21         function LoadList() {
22             //1.设置参数,为了拿数据所以用get,参数[get/post,页面,是否用异步]
23             xhr.open("get", "common.ashx", true);
24             //2.设置浏览器不使用缓存
25             xhr.setRequestHeader("If-Modified-Since", "0");
26             //3.设置回调函数（为onreadystatechange事件设置回调函数）：异步对象状态发生改变的时候，它自己就触发这个事件来，进而来调用的这个回调函数
27             xhr.onreadystatechange = function () {
28                 //4.看准备状态，看服务器的数据有没有回来,=4的时候服务器响应报文完全发回到浏览器了
29                 if (xhr.readyState == 4) {
30                     //5.服务器返回的状态码200，则服务器运行正常
31                     if (xhr.status == 200) {
32                         //6.获得服务器返回的数据,返回json格式的字符串
33                         var listData = xhr.responseText;
34                         var listJsonArr = eval(listData); //把字符串解析为json数组
35                         loadTableData(listJsonArr);
36                     }
37                 }
38             }
39             //7.异步对象发送请求给服务器
40             xhr.send(null);
41         }
42 
43         //为表格创建行数据
44         function loadTableData(trsJsonArr) {
45             for (var i = 0; i < trsJsonArr.length; i++) {
46                 var jsonClasses = trsJsonArr[i];
47                 var newRow = tbListObj.insertRow(-1); //创建行，追加一行到表的最后  
48                 var newCell1 = newRow.insertCell(-1); //为行追加一列
49                 newCell1.innerHTML = jsonClasses.CID;
50 
51                 var newCell2 = newRow.insertCell(-1);
52                 newCell2.innerHTML = jsonClasses.CName;
53                 var newCell3 = newRow.insertCell(-1);
54                 newCell3.innerHTML = jsonClasses.CCount;
55                 var newCell4 = newRow.insertCell(-1);
56                 newCell4.innerHTML = jsonClasses.CImg;
57                 var newCell5 = newRow.insertCell(-1);
58                 newCell5.innerHTML = "删 改";
59             }
60         }
61     </script>
62 </head>
63 <body>
64  <table id="tbList" cellspacing="0">
65         <tr>
66             <th>ID</th>
67             <th>班级名</th>
68             <th>总人数</th>
69             <th>班级LOGO</th>
70             <th>操作</th>
71         </tr>
72     </table>
73 </body>
74 </html>