一，新建一个一般处理程序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; 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>