做了个简单使用JavaScript、JQuery、ExtJs进行DOM对象创建的测试，主要是使用JavaScript、JQuery、ExtJs动态创建Table对象、动态Table数据填充、多选控制。
1.简单前台数据处理界面有点丑了，没美化界面，主要是JavaScript动态创建Table。效果图：
1 2 3 45 43 44 45 4679 80476249
6150 6051 留言信息52 5354 日期55 5657 时间58 59637864 请填写你宝贵的建议：65
6667 匿名69 实名70 71 72 73 74 7677
2.JavaScript动态创建DOM对象
主要是使用JavaScript动态创建按钮、文本、链接、表格、加上CheckBox的表格(简单实现全选)，这里Table的数据是页面数据，不是服务端数据，主要是与后面的JQuery和ExtJs请求服务端数据动态创建Table的差异比较。界面有点丑，主要是看JavaScript动态创建Dom对象，效果图：
1 2 3 45 12 196 197 198 199 200 201 202 203206 207204205
3.JavaScript简单效果实现
主要是自定义分割文本、Timer时钟使用、JS粘贴板使用、Div随鼠标移动的简单测试，这个稍稍好看些，效果图：
1 2 3 45 12 141 142 143 145238146 147 148 149 150 151152153228156
227157 170158 159 160161 编号162 163164 标题165 166167 内容168 169171 184172 173 174175 001176 177178 标题1179 180181 内容1182 183185 198186 187 188189 002190 191192 标题2193 194195 内容2196 197199 212200 201 202203 003204 205206 标题3207 208209 内容3210 211213 226214 215 216217 004218 219220 标题4221 222223 内容4224 225230231233234235 236237240 我是移动DIV!241242 243
4.使用XMLHttp进行Ajax调用动态创建Table
主要是使用XMLHttpRequest的AJAX请求服务端数据，服务端使用一般处理程序(*.ashx)处理，并使用JavaScriptSerializer和DataContractJsonSerializer进行对象的序列化操作，转换为JSON字符串数据发送客户端，客户端再进行反序列化操作，进行动态Table创建和数据填充。注意：前端JQuery和ExtJs脚本的引入以及服务端两个序列化所在的命名空间(System.Web.Script.Serialization和System.Runtime.Serialization.Json)的引入。效果图：
前端代码： 1 23 10 11 12 13 220 221 222 223232 233224 225 226 227228230231
服务端代码：
1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Runtime.Serialization.Json; 6 using System.Text; 7 using System.Web; 8 using System.Web.Script.Serialization; 9 10 namespace JsJQueryExtJsReview.JQueryReview.Ajaxs11 {12 /// 13 /// AjaxHandler 的摘要说明14 /// 15 public class AjaxHandler : IHttpHandler16 {17 18 public void ProcessRequest(HttpContext context)19 {20 context.Response.ContentType = "text/plain";//application/json text/plain21 string JsonData = string.Empty;22 23 System.Threading.Thread.Sleep(2000);//延迟2000毫秒24 25 List list = initMessages();26 27 JsonData = GetJavaScriptData(list);//JavaScript序列化操作28 JsonData = GetDataContractData(list);//DataContract序列化操作29 30 context.Response.Write(JsonData);31 }32 33 /// 34 /// DataContractJsonSerializer序列化数据35 /// 36 /// 信息对象集合37 /// 信息对象Json串 38 private string GetDataContractData(List messages)39 {40 string json = string.Empty;41 DataContractJsonSerializer dataContract = new DataContractJsonSerializer(messages.GetType());42 MemoryStream ms = new MemoryStream();43 dataContract.WriteObject(ms, messages);44 json = Encoding.UTF8.GetString(ms.ToArray());45 return json;46 }47 48 /// 49 /// JavaScriptSerializer序列化数据50 /// 51 /// 信息对象集合52 /// 信息对象Json串 53 private string GetJavaScriptData(List messages)54 {55 string json = string.Empty;56 JavaScriptSerializer javaScript = new JavaScriptSerializer();57 json = javaScript.Serialize(messages);58 return json;59 }60 61 /// 62 /// 初始化数据63 /// 64 /// initMessages()66 {67 List list = new List () {68 new Message(){ Name="百度",Html=" 百度简介"},69 new Message(){ Name="新浪",Html=" 新浪简介"},70 new Message(){ Name="搜狐",Html=" 搜狐简介"}71 };72 73 return list;74 }75 76 public bool IsReusable77 {78 get79 {80 return false;81 }82 }83 }84 85 public class Message86 {87 public string Name { get; set; }88 public string Html { get; set; }89 }90 } 5.使用JQuery和ExtJs进行Ajax调用动态创建Table
主要是对JQuery、ExtJs的Ajax使用以及如何使用JQuery、ExtJs动态创建Table对象填充数据，简单实现CheckBox的全选操作。服务端的代码是第4点的一般处理程序。效果图：
代码如下：(还是第4点的页面，再加上下面4个脚本函数) 1 //JQuery的Ajax方式取得数据,添加全选按钮 2 function JQueryAjax() { 3 var message = "JQuery信息加载中......"; 4 var divMessage = " " + message + " "; 5 $("#divContent").html(divMessage); 6 7 $.ajax({ 8 type: "POST", 9 url: "../Ajaxs/AjaxHandler.ashx", 10 async: true, //异步加载信息 11 dataType: "json", 12 success: function (data) { 13 var message = "JQuery信息加载成功!"; 14 var divMessage = " " + message + " "; 15 $("#divContent").html(divMessage); 16 17 createJQueryTable(data); 18 JQueryCHKBoxTable(data); 19 }, 20 error: function () { alert("请求失败！"); } 21 }); 22 } 23 24 function JQueryCHKBoxTable(data) { 25 var tab = $(" " + message + "
"; 63 var divContent = Ext.get("divContent"); 64 Ext.DomHelper.append(divContent, divMessage); 65 66 Ext.Ajax.request({ 67 method: "POST", 68 url: "../Ajaxs/AjaxHandler.ashx", 69 async: true, //异步加载信息 70 success: function (response, opts) { 71 message = "ExtJs信息加载成功!"; 72 var divMessage = " " + message + "
"; 73 //Ext.get("divMessage").dom.innerHTML = message; 74 Ext.DomHelper.append(divContent, divMessage); 75 76 var data = Ext.util.JSON.decode(response.responseText); 77 createExtJsTable(data); //ExtJs创建Table 78 ExtJsCHKBoxTable(data); //ExtJs创建CheckBox的Table 79 }, 80 failure: function (response, opts) { alert("请求失败！"); } 81 }); 82 } 83 84 //ExtJs的CheckBox Table 85 function ExtJsCHKBoxTable(data) { 86 var divContent = Ext.get("divContent"); 87 var tabTag = { tag: "table", style: "width:300px;border:1px solid blue", children: [{ tag: "caption", html: "ExtJs CheckBox Table"}] }; 88 var tab = Ext.DomHelper.append(divContent, tabTag); //将table追加到divContent 89 90 //创建列头 91 var ths = { tag: "tr", children: [ 92 { tag: "th", style: "border:1px solid blue", children: [ 93 { tag: "input", type: "checkbox", id: "chkAll" } 94 ] 95 }, 96 { tag: "th", style: "border:1px solid blue", html: "名称" }, 97 { tag: "th", style: "border:1px solid blue", html: "简介" } 98 ] 99 };100 Ext.DomHelper.append(tab, ths); //将tr追加到table101 102 Ext.each(data, function (item) {//遍历数据103 var trTag = { tag: "tr", children: [104 { tag: "td", style: "border:1px solid blue", children: [{ tag: "input", type: "checkbox", name: "chkSingle"}] },105 { tag: "td", style: "border:1px solid blue", html: item.Name },106 { tag: "td", style: "border:1px solid blue", html: item.Html }107 ]108 };109 Ext.DomHelper.append(tab, trTag); //将tr追加到table110 });111 112 Ext.get("chkAll").on("change", function (obj) {113 var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合114 Ext.each(chkSingles, function (item) {115 item.checked = Ext.get("chkAll").dom.checked;116 });117 });118 119 // Ext.get("chkAll").addListener("click", function (obj) {120 // var chkSingles = Ext.query("input[name='chkSingle']"); //Dom集合121 // Ext.each(chkSingles, function (item) {122 // item.checked = Ext.get("chkAll").dom.checked;123 // });124 // });125 } 6.使用JQuery和ExtJs简单创建对象
其实前面复杂的操作处理了，这个就比较简单，简单创建几个input对象。依然是第4点的页面，再加上下面2个脚本函数，代码如下： 1 //JQuery创建其他对象 2 function createJQueryObjs() { 3 var divContent = $("#divContent").css("text-align", "left").append(" JQuery创建其他对象 "); 4 5 $("", { type: "button", val: "创建按钮" }).appendTo(divContent); 6 $("").appendTo(divContent); 7 $("", { type: "button", val: "添加样式", class: "buttonCSS" }).appendTo(divContent); 8 $("").appendTo(divContent); 9 $("", { type: "button", val: "添加事件", click: function () {10 alert($(this).val() + "，测试成功！");11 }12 }).appendTo(divContent);13 $("").appendTo(divContent);14 $("", { type: "text", id: "txt", val: '创建文本', css: { "background-color": "red"} }).appendTo(divContent);15 $("").appendTo(divContent);16 $("", { type: "radio", name: "sex", val: "男" }).appendTo(divContent);17 $("", { text: "男" }).appendTo(divContent);18 $("", { type: "radio", name: "sex", val: "女", checked: "true" }).appendTo(divContent);19 $("", { text: "女" }).appendTo(divContent);20 $("").appendTo(divContent);21 }22 23 //ExtJs创建其他对象24 function createExtJsObjs() {25 var divContent = Ext.get("divContent");26 Ext.DomHelper.append(divContent, "
ExtJs创建其他对象");27 var buttonTag = { tag: "input", type: "button", value: "ExtJs按钮" };28 Ext.DomHelper.append(divContent, buttonTag);29 Ext.DomHelper.append(divContent, "");30 var textTag = { tag: "input", type: "text", id: "testText", value: "ExtJs文本框" };31 Ext.DomHelper.append(divContent, textTag);32 } 使用原生JavaScript动态创建Table有些生硬，不太灵活；使用JQuery和ExtJs是各个API方法的调用，相对灵活些，代码也相对减小一些。
ExtJs一般不用Table来显示列表数据，一般直接用GridPanel直接绑定数据，显示数据，再加上CheckBox的多选功能。