【web前端优化】前端无优化，庸人自扰之！
前言
我发现一个人厉害不只是他厉害，他的名字也一定要跟着厉害才行，比如我刀狂剑痴叶小钗了，若是老夫叫做刀狂剑痴叶小草，估计就缺少气势了！！！
又如百世经纶一页书，如果叫做百世经纶一本书估计也不会是绝代高手了！说了我给标题取了个很霸气的名字：
“前端无优化，庸人自扰之”，其实我也不知道他是什么意思了，好了，啰嗦结束进入正题。
最近遇到一个有意思的东西，是关于考试题相关的东东，其实就是我有很多试题，需要生成试卷让人来做了（真实应用有点不同），但是他却让我想起了我的初恋！
我原来花了一年时间做的考试系统，所以有了这篇文章。
PS：本人前端水平很水，在此就是大言不惭罢了，甚至想引出真正的高手解决问题，各位看到我的“优化”权当笑话看吧
在线考试系统
有图有真相
图太长给删了。。。
当年我还很纯洁
那一年是我在大学的一年，那一年我还以为苍老师只是老师，那一年我不会把波多野结衣当做林志玲，那一年我还是处男。。。。
于是那一年天真的我做出了以上页面，并且承受住了学院400人的C语言期末考试。但是如今我们来看看页面，来看看我的纯洁吧：
因为有几年的时间了，我已经忘了当年开发.net项目的岁月了，但是我隐约记得，我的这个界面使用gridview搞出来的，里面还好像有很多嵌套。。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Student_Exam_Ajax_Paper.aspx.cs" 2 Inherits="Student_Student_Exam_Ajax_Paper" %> 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head id="Head1" runat="server"> 7 <title>考试界面</title> 8 <%--曾沿用--%> 9 <link href="../css/style.css" type="text/css" rel="stylesheet" /> 10 <%--曾沿用--%> 11 <link href="css/public.css" rel="stylesheet" type="text/css" /> 12 <link href="css/master.css" rel="stylesheet" type="text/css" /> 13 <style type="text/css"> 14 body 15 { 16 padding-bottom: 70px; 17 background: #e2f1ff url(http://exam.51edu.com/images/pagebodybg.jpg) 0 0 repeat-x; 18 } 19 .wlArea880 20 { 21 margin: 5px 0px 0px; 22 border: 1px solid #ecc9c9; 23 width: 300px; 24 height: 20px; 25 font-size: 12px; 26 line-height: 18px; 27 background-color: #fff0f0; 28 color: #333; 29 } 30 </style> 31 32 <script type="text/javascript"> 33 34 35 var xmlhttprequest_yas //XMLHttp对象 36 37 38 39 var m=<%=lbRemainTime.Text %>; 40 if(m==90) 41 { 42 m=m+1; 43 } 44 var TimeNum=m*60; 45 var timeStr; 46 47 48 function createXmlHttpRequest() 49 { 50 //IE7,FireFox and others; 51 if(window.XMLHttpRequest) 52 { 53 xmlhttprequest_yas=new XMLHttpRequest(); 54 } 55 else if(window.ActiveXObject)//IE其它的版本 56 { 57 xmlhttprequest_yas=new ActiveXObject("Microsoft.XMLHTTP"); 58 } 59 else 60 { 61 alert("Your browser cannt support XMLHttpRequest!") 62 } 63 } 64 65 function autoputin() //自动提交发送Ajax请求 ，完成的业务逻辑为，将当前剩余时间，与当前考试时间读入，并将考试状态读出。 66 { 67 var remaintime=m; //获得剩余时间 68 var RequestURL="AjaxServer.aspx?remaintime="+remaintime+"&examid="+<%=lbExamID.Text %>+""; 69 70 createXmlHttpRequest(); 71 if(xmlhttprequest_yas) 72 { 73 74 xmlhttprequest_yas.onreadystatechange=callBack; 75 xmlhttprequest_yas.open("GET",RequestURL,true) ; 76 xmlhttprequest_yas.send(null); 77 // xmlhttprequest_yas=null; 78 } 79 } 80 81 82 function callBack() 83 { 84 if(xmlhttprequest_yas.readyState==4) 85 { 86 87 88 89 //xml中读出状态 90 var stateNodes=xmlhttprequest_yas.responseXML.documentElement.getElementsByTagName("state"); 91 var state ; 92 state=stateNodes[0].text; 93 94 //var o= document.getElementById("wlqq"); 95 // getreturn =state; 96 // o.value=getreturn ; 97 98 // if(state==0) 99 // { 100 // alert("你已经断线，请尽快同管理员联系"); 101 // } 102 103 if(state ==3) 104 { 105 document.getElementById("btOk").click(); 106 } 107 108 } 109 } 110 111 112 113 var timeShowId="timeshow"; //设置时间显示层ID 114 115 116 117 function ChangeTime(){ 118 TimeNum--; 119 if(TimeNum > 0){ 120 var mn=TimeNum/60; 121 if(m-mn==1) 122 { 123 var now=new Date(); 124 m--; 125 126 autoputin(); 127 } 128 129 timeStr=setTimeout("ChangeTime()",1000); 130 } 131 else{ 132 m=0; 133 autoputin(); 134 document.getElementById("btOk").click(); 135 } 136 var mmm,sss; 137 mmm=Math.floor(TimeNum/60) 138 sss=TimeNum%60 139 if(mmm<10) 140 mmm="0"+mmm; 141 if(sss<10) 142 sss="0"+sss; 143 144 document.getElementById(timeShowId).innerHTML= mmm+"分"+sss+"秒"; 145 146 } 147 148 </script> 149 150 <script type="text/javascript" charset="UTF-8"> 151 152 var xmlhttprequest_wl //XMLHttp对象 153 154 155 function createXmlHttpRequestForProblem() 156 { 157 158 //IE7,FireFox and others; 159 if(window.XMLHttpRequest) 160 { 161 162 xmlhttprequest_wl=new XMLHttpRequest(); 163 } 164 else if(window.ActiveXObject)//IE其它的版本 165 { 166 xmlhttprequest_wl=new ActiveXObject("Microsoft.XMLHTTP"); 167 } 168 else 169 { 170 alert("Your browser cannt support XMLHttpRequest!") 171 } 172 } 173 174 175 function putinanwer(answer , id) //自动提交发送Ajax请求 ，完成的业务逻辑为，将当前剩余时间，与当前考试时间读入，并将考试状态读出。 176 { 177 178 var RequestURL="AjaxServerPutIn.aspx?id="+id+"&answer="+escape(answer)+"&rand="+new Date().getTime().toString(36)+""; 179 180 createXmlHttpRequestForProblem(); 181 if(xmlhttprequest_wl) 182 { 183 184 185 xmlhttprequest_wl.onreadystatechange=callBackAnswer; 186 xmlhttprequest_wl.open("GET",RequestURL,true) ; 187 xmlhttprequest_wl.setRequestHeader("Content-Type", "utf-8"); 188 xmlhttprequest_wl.send(null); 189 190 } 191 192 } 193 194 195 196 function callBackAnswer() 197 { 198 if(xmlhttprequest_wl.readyState==4) 199 { 200 201 // var o= document.getElementById("wlqq"); 202 var getreturns=xmlhttprequest_wl.responseXML.documentElement.getElementsByTagName("getreturn"); 203 var getreturn ; 204 getreturn =getreturns[0].text; 205 // o.value=getreturn ; 206 if(getreturn==0) 207 { 208 alert("你已经断线，请尽快同监考老师联系,或者重新登录考试！"); 209 window.close(); 210 } 211 212 //alert(xmlhttprequest_wl.responseText); 213 214 //alert("你已经断线，请尽快同管理员联系"); 215 216 } 217 218 219 } 220 221 222 </script> 223 224 <script language="JavaScript"> 225 <!-- 226 227 if (window.Event) 228 document.captureEvents(Event.MOUSEUP); 229 230 function nocontextmenu() 231 { 232 event.cancelBubble = true 233 event.returnValue = false; 234 235 return false; 236 } 237 238 function norightclick(e) 239 { 240 if (window.Event) 241 { 242 if (e.which == 2 || e.which == 3) 243 return false; 244 } 245 else 246 if (event.button == 2 || event.button == 3) 247 { 248 event.cancelBubble = true 249 event.returnValue = false; 250 return false; 251 } 252 253 } 254 255 document.oncontextmenu = nocontextmenu; //对ie5.0以上 256 document.onmousedown = norightclick; //对其它浏览器 257 //--> 258 259 260 <!-- 261 function document.onkeydown() 262 { 263 if ( event.keyCode==116) 264 { 265 event.keyCode = 0; 266 event.cancelBubble = true; 267 return false; 268 } 269 } 270 271 --> 272 273 </script> 274 275 <script type="text/javascript"> 276 277 //更改字体大小 278 var status0=''; 279 var curfontsize=12; 280 var curlineheight=20; 281 var count=1; 282 function fontZoomA(){ 283 if(curfontsize>8){ 284 document.getElementById('fontzoom').style.fontSize=(--curfontsize)+'px'; 285 document.getElementById('fontzoom').style.lineHeight=(--curlineheight)+'px'; 286 } 287 } 288 function fontZoomB(){ 289 if(curfontsize<100){ 290 document.getElementById('fontzoom').style.fontSize=(++curfontsize)+'px'; 291 document.getElementById('fontzoom').style.lineHeight=(++curlineheight)+'px'; 292 } 293 } 294 </script> 295 296 </head> 297 <body onload="ChangeTime()"> 298 <!--paperBox_begin--> 299 <div id="paperBox" runat="server"> 300 <div id="paperBoxTop"> 301 <div class="pagelogo"> 302 <img src="images/pagelogo.jpg" width="168" height="79" border="0" /> 303 </div> 304 <div class="paperBoxtext"> 305 <span>欢迎您， 306 <%=lbStudentName.Text %> 307 </span> 308 </div> 309 </div> 310 <!--paperCont_begin--> 311 <div id="paperCont"> 312 <form id="paperForm" runat="server"> 313 <h2 class="box_title"> 314 <asp:Label ID="lbName" runat="server" Text="Label"></asp:Label> 315 <asp:Label ID="lbStateTime" runat="server" Text="Label" Visible="false"></asp:Label> 316 <%--测试Ajax传输问题 317 318 319 <input type="text" id="wlqq" value="111" style=" width:400px;" /> 320 --%> 321 322 <br /> 323 </h2> 324 <div class="box_sttg"> 325 <span>所属课程： 326 <asp:Label ID="lbCourse" runat="server" Text="Label"></asp:Label> 327 </span><span>试卷性质： 328 <asp:Label ID="lbFlag" runat="server" Text="Label"></asp:Label></span> <span>难度系数： 329 <asp:Label ID="lbGrade" runat="server" Text="Label"></asp:Label>【0为随机难度】 330 </span> 331 </div> 332 <div class="box_sttg"> 333 <table width="100%"> 334 <tr> 335 <td> 336 <span> 337 <asp:Label ID="lbTime" runat="server" Text="1" Visible="false"></asp:Label></span> <span>总分： 338 <asp:Label ID="lbScore" runat="server" Text="Label"></asp:Label> 339 </span> 340 341 【字体：<a href="javascript:fontZoomB();" target="_self">↑大</a> <a href="javascript:fontZoomA();" target="_self">↓小</a>】 342 </td> 343 </tr> 344 </table> 345 </div> 346 <div class="pagerref"> 347 <table cellpadding="0" cellspacing="0" width="400px" align="center"> 348 <tr> 349 <td align="right" valign="top"> 350 剩余时间： 351 </td> 352 <td align="left" valign="top" style="color: Red;"> 353 <asp:Label ID="lbRemainTime" runat="server" Visible="false"></asp:Label> 354 <asp:Label ID="timeshow" runat="server"></asp:Label> 355 </td> 356 </tr> 357 </table> 358 <input type="hidden" id="answerQuestionNum" name="answerQuestionNum" /> 359 </div> 360 <div class="coda-slider-wrapper"> 361 <div class="coda-slider preload" id="coda-slider-1"> 362 <!-- end panel --> 363 <table cellpadding="0px" cellspacing="0px" width="100%" class="text" id="fontzoom" > 364 <tr> 365 <td align="left" valign="top"> 366 <br /> 367 <table cellpadding="0px" cellspacing="0px" width="100%"> 368 <tr> 369 <td align="left" valign="top"> 370 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="90%" 371 BorderStyle="None" GridLines="None" OnRowDataBound="GridView1_RowDataBound"> 372 <Columns> 373 <asp:TemplateField HeaderText="基础型选择题"> 374 <HeaderStyle HorizontalAlign="Center" /> 375 <HeaderTemplate> 376 <table cellpadding="0px" cellspacing="0px" width="100%"> 377 <tr> 378 <td width="10%"> 379 </td> 380 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 381 基础型选择题 382 </td> 383 </tr> 384 </table> 385 </HeaderTemplate> 386 <ItemTemplate> 387 <br /> 388 <table cellpadding="0px" cellspacing="0px" width="100%"> 389 <tr> 390 <td align="right" valign="top" width="50px"> 391 <span style="font-size: 14px; font-weight: bold; color: Black;"> 392 <%# Container.DataItemIndex+1%>. </span> 393 </td> 394 <td align="left" valign="top" width="650px" > 395 <%# Eval("ProblemName")%> 396 </td> 397 <td align="right" valign="top" width="150px"> 398 【分值：<%# Eval("ProblemScore")%>分】 399 <%-- 400 <%# lbSingleScore.Text = "【分值："+Eval("ProblemScore")+"分】 "%> 401 --%> 402 </td> 403 </tr> 404 <tr> 405 <td> 406 </td> 407 <td align="left" valign="top" colspan="2"> 408 <div> 409 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 410 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 411 Visible="false"></asp:Label> 412 <asp:RadioButtonList ID="radioSingleBasic" runat="server" Width="300px" RepeatDirection="Horizontal"> 413 <asp:ListItem Value="A" Text="A" onclick='putinanwer("A", this.value)'></asp:ListItem> 414 <asp:ListItem Value="B" Text="B" onclick='putinanwer("B", this.value)'></asp:ListItem> 415 <asp:ListItem Value="C" Text="C" onclick='putinanwer("C", this.value)'></asp:ListItem> 416 <asp:ListItem Value="D" Text="D" onclick='putinanwer("D", this.value)'></asp:ListItem> 417 </asp:RadioButtonList> 418 </div> 419 <div runat="server" id="div1" visible="false" style="border-bottom: 1px dashed red; 420 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 421 <table cellpadding="0px" cellspacing="0px" width="100%"> 422 <tr> 423 <td align="right" valign="top" width="10%"> 424 <span style="color: Red;">正确答案：</span> 425 </td> 426 <td align="left" valign="top" width="90%"> 427 <%# Eval("ProblemAnswer")%> 428 </td> 429 </tr> 430 <tr> 431 <td align="right" valign="top" width="10%"> 432 <span style="color: Red;">试卷性质：</span> 433 </td> 434 <td align="left" valign="top" width="90%"> 435 <%# Eval("FlagDes")%>. . <span style="color: Red;">所属章节：</span><%# Eval("CourseName")%>. 436 . <span style="color: Red;">试题难度：</span><%# Eval("GradeName")%>. 437 . 438 </td> 439 </tr> 440 <tr> 441 <td align="right" valign="top" width="10%"> 442 <span style="color: Red;">【解析】：</span> 443 </td> 444 <td align="left" valign="top" width="90%"> 445 <%# Eval("ProblemDes")%> 446 </td> 447 </tr> 448 </table> 449 </div> 450 </td> 451 </tr> 452 </table> 453 </ItemTemplate> 454 </asp:TemplateField> 455 </Columns> 456 </asp:GridView> 457 </td> 458 </tr> 459 </table> 460 </td> 461 </tr> 462 <tr> 463 <td align="left" valign="top"> 464 <br /> 465 <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" Width="90%" 466 BorderStyle="None" GridLines="None" OnRowDataBound="GridView2_RowDataBound"> 467 <Columns> 468 <asp:TemplateField HeaderText="综合型选择题"> 469 <HeaderStyle HorizontalAlign="Center" /> 470 <HeaderTemplate> 471 <table cellpadding="0px" cellspacing="0px" width="100%"> 472 <tr> 473 <td width="10%"> 474 </td> 475 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 476 综合型选择题 477 </td> 478 </tr> 479 </table> 480 </HeaderTemplate> 481 <ItemTemplate> 482 <br /> 483 <table cellpadding="0px" cellspacing="0px" width="100%"> 484 <tr> 485 <td align="right" valign="top" width="50px"> 486 <span style="font-size: 14px; font-weight: bold; color: Black;"> 487 <%# Container.DataItemIndex+1%>. </span> 488 </td> 489 <td align="left" valign="top" width="700px"> 490 <%# Eval("ProblemName")%> 491 </td> 492 <td align="left" valign="top" width="100px"> 493 【分值：<%# Eval("ProblemScore")%>分】 494 <%-- 495 <%# lbSingleScore.Text = "【分值："+Eval("ProblemScore")+"分】 "%> 496 --%> 497 </td> 498 </tr> 499 <tr> 500 <td> 501 </td> 502 <td align="left" valign="top" colspan="2"> 503 <div> 504 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 505 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 506 Visible="false"></asp:Label> 507 <asp:RadioButtonList ID="radioSingle" runat="server" Width="300px" RepeatDirection="Horizontal"> 508 <asp:ListItem Value="A" Text="A" onclick='putinanwer("A", this.value)'></asp:ListItem> 509 <asp:ListItem Value="B" Text="B" onclick='putinanwer("B", this.value)'></asp:ListItem> 510 <asp:ListItem Value="C" Text="C" onclick='putinanwer("C", this.value)'></asp:ListItem> 511 <asp:ListItem Value="D" Text="D" onclick='putinanwer("D", this.value)'></asp:ListItem> 512 </asp:RadioButtonList> 513 </div> 514 <div runat="server" id="div1" visible="false" style="border-bottom: 1px dashed red; 515 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 516 <table cellpadding="0px" cellspacing="0px" width="100%"> 517 <tr> 518 <td align="right" valign="top" width="10%"> 519 <span style="color: Red;">正确答案：</span> 520 </td> 521 <td align="left" valign="top" width="90%"> 522 <%# Eval("ProblemAnswer")%> 523 </td> 524 </tr> 525 <tr> 526 <td align="right" valign="top" width="10%"> 527 <span style="color: Red;">试卷性质：</span> 528 </td> 529 <td align="left" valign="top" width="90%"> 530 <%# Eval("FlagDes")%>. . <span style="color: Red;">所属章节：</span><%# Eval("CourseName")%>. 531 . <span style="color: Red;">试题难度：</span><%# Eval("GradeName")%>. 532 . 533 </td> 534 </tr> 535 <tr> 536 <td align="right" valign="top" width="10%"> 537 <span style="color: Red;">【解析】：</span> 538 </td> 539 <td align="left" valign="top" width="90%"> 540 <%# Eval("ProblemDes")%> 541 </td> 542 </tr> 543 </table> 544 </div> 545 </td> 546 </tr> 547 </table> 548 </ItemTemplate> 549 </asp:TemplateField> 550 </Columns> 551 </asp:GridView> 552 </td> 553 </tr> 554 <tr> 555 <td align="left" valign="top"> 556 <br /> 557 <asp:GridView ID="GridView3" runat="server" AutoGenerateColumns="False" Width="90%" 558 BorderStyle="None" GridLines="None" OnRowDataBound="GridView3_RowDataBound"> 559 <Columns> 560 <asp:TemplateField HeaderText="填空题"> 561 <HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" /> 562 <HeaderTemplate> 563 <table cellpadding="0px" cellspacing="0px" width="100%"> 564 <tr> 565 <td width="10%"> 566 </td> 567 <td width="90%" align="left" style="font-size: 14px; font-weight: bold; color: Black;"> 568 填空题 569 </td> 570 </tr> 571 </table> 572 </HeaderTemplate> 573 <ItemTemplate> 574 <br /> 575 <table cellpadding="0px" cellspacing="0px" width="100%"> 576 <tr> 577 <td align="right" valign="top" width="50px"> 578 <span style="font-size: 14px; font-weight: bold; color: Black;"> 579 <%# Container.DataItemIndex+1%> 580 . </span> 581 </td> 582 <td align="left" valign="top" width="700px"> 583 <%# Eval("ProblemName")%> 584 </td> 585 <td align="left" valign="top" width="100px"> 586 【分值：<%# Eval("ProblemScore")%>分】 587 </td> 588 </tr> 589 <tr> 590 <td> 591 </td> 592 <td align="left" valign="top" colspan="2"> 593 <div> 594 <input type="text" id="txtFills" onchange='putinanwer(this.value,<%# Eval("ExamDetailID")%>)' 595 style="width: 300px;" class="wlArea880" value='<%# Eval("StudentAnswer")%>' /> 596 <br /> 597 <asp:TextBox ID="txtFill" runat="server" Width="300px" CssClass="wlArea880" Visible="false" 598 ToolTip='<%# Eval("ExamDetailID")%>'></asp:TextBox> 599 <asp:Label ID="lbID" runat="server" Text='<%# Eval("ExamDetailID")%>' Visible="false"></asp:Label> 600 <asp:Label ID="lbStudentAnswer" runat="server" Text='<%# Eval("StudentAnswer")%>' 601 Visible="false"></asp:Label> 602 </div> 603 <div runat="server" id="div4" visible="false" style="border-bottom: 1px dashed red; 604 border-left: 1px dashed red; border-right: 1px dashed red; border-top: 1px dashed red;"> 605 <table cellpadding="0px" cellspacing="0px" width="100%"> 606 <tr> 607 <td align="right" valign="top" width="10%"> 608 <span style="color: Red;">正确答案：</span> 609 </td> 610 <td align="left" valign="top" width="90%"> 611 <%# Eval("ProblemAnswer")%> 612 </td> 613 </tr> 614 <tr> 615 <td align="right" valign="top" width="10%"> 616 <span style="color: Red;">试卷性质：</span> 617 </td> 618 <td align="left" valign="top" width="90%"> 619 <%# Eval("FlagDes")%>. . <span style="color: Red;">所属章节：</span><%# Eval("CourseName")%>. 620 . <span style="color: Red;">试题难度：</span><%# Eval("GradeName")%>. 621 . 622 </td> 623 </tr> 624 <tr> 625 <td align="right" valign="top" width="10%"> 626 <span style="color: Red;">【解析】：</span> 627 </td> 628 <td align="left" valign="top" width="90%"> 629 <%# Eval("ProblemDes")%> 630 </td> 631 </tr> 632 </table> 633 </div> 634 </td> 635 </tr> 636 </table> 637 </ItemTemplate> 638 </asp:TemplateField> 639 </Columns> 640 </asp:GridView> 641 </td> 642 </tr> 643 <tr> 644 <td align="left" valign="top"> 645 </td> 646 </tr> 647 </table> 648 <asp:Label ID="lbPaperID" runat="server" Text="Label" Visible="false"></asp:Label> 649 <asp:Label ID="lbStudentID" runat="server" Text="Label" Visible="false"></asp:Label> 650 <asp:Label ID="lbNum" runat="server" Text="Label" Visible="false"></asp:Label> 651 <asp:Label ID="lbExamID" runat="server" Text="Label" Visible="false"></asp:Label> 652 <asp:Label ID="lbStudentName" runat="server" Text="Label" Visible="false"></asp:Label> 653 <%-- <asp:Label ID="lbSingleScore" runat="server" ></asp:Label>--%> 654 <div class="pagescoll"> 655 <asp:Button ID="btOk" runat="server" OnClick="btOk_Click" Text="全部完成,交卷" CssClass="btnOrgBig" 656 UseSubmitBehavior="False" /> 657 </div> 658 <!-- end panel --> 659 </div> 660 </div> 661 </form> 662 <!--paperCont_end--> 663 </div> 664 </div> 665 <div id="smallLay" class="hidden"> 666 <div class="laybottom"> 667 </div> 668 </div> 669 <!--收藏浮层结束--> 670 </body> 671 </html>
我还记得当年我很神奇的组织了许多学生在实验室帮我测试，生怕考试过程中出现问题，甚至在期末考试前一周仍然这是问题那是问题，最后终于承受住了各种压力写下了我大学光辉的一页，甚至现在想起来我还是很自豪的呢。
PS：本来想运行起来，截图说明问题的，无奈确实找不到数据库了，而且这个给改来改去也不知道改成什么样了，所以只有作罢
虽然无图，但是我这里还是可以说说原来系统存在的一些问题：
① 使用了很多.net服务器空间，光是页面就有36K（还没有算生成后的大小呢。。。）
② 请看当时数据库中存的数据：
我也是绝技没有想到我当时会这样存储题目的（用的fck直接由word上将题目考进来的）
③ 我们来看看我们一共有多少题呢？
PS：乖乖，这家伙居然还有这么多题呢。。。
结果
不知道从什么时间开始，不知道是什么原因，系统变得很卡！！！然后呢，然后我就大四了，也就没有管这个系统了，而且还靠着这个系统忽悠了几个offer呢！
去年今日此门中
现在回过头来看，整个系统的优化似乎心里都有谱了，除却数据库的东西，我们来看看前端的优化吧，首先我从数据库中选择100到单选题出来：
PS：当然还是使用gridview啦！！！哇哈哈
哎，当年的题导入的怎一个丑字了得！现在让我们来处理一番：
第一步去掉多余的东西，只留下题目即可！但是：
真正到看到题目我突然明白了当年为什么会这么做，因为他是有格式的。。。
引出问题，万能的json
其实之前扯这么多东西都没什么意义的，原因就是在工作中遇到的，我这里没胆子写出来，所以就东扯西扯的搞了这么久，其实就是为了数据源！！！
真实的场景是这样的：
我有100道题，已经存于数据库中，而且每个用户读取不会改变，后端同事问我如何请求？
我想了下，首先得到了这一个结论：
后端同事将100道题目形成json格式的数据，我直接将json格式保存在js中，页面加载时候就引用了
我当时的思考点就是，反正题目是不变的，所以我就将它静态化得了，完了又遇到了一个问题：
因为页面上一次只显示10道题，点击下一页再显示下一道题，于是问题出来了：
1 我将所有题目一次生成，点击下一页控制隐藏显示即可
2 我只生成10道题，点击下一页再生成10道题
我当时在这两种方案徘徊了好久，地球人都知道方案一简单一点，而且迫于项目时间，我当时就直接运用了第一种方案！！！
对于这个各位大哥可以说下自己的想法，请一定说出来哟！
无心插柳，去你的json
我当时做着做着，突然发现另外一件事情：
1 我会将数据库中的数据变为json格式时因为我想减少服务器以及数据库的压力
2 因为数据是不变的，所以我可以这样做
于是我傻傻的意识到一件事情：
1 我将不变的json数据生成了不变的题目，而且每次我都会使用js生成相同的HTML！！！！
于是我感觉我真是弱爆了！！！
我为什么不直接将json生成的html保存为页面片呢？？？
考试系统与页面片
当年，我为了防止学生作弊，会随机生成100套试卷，而学生进入时随机选择一套来做，所以作弊的情况可以杜绝，那么我们进入今天的思考阶段：
在人数比较多的情况下，生成试卷会不停的访问服务器，不停的读取数据库，在刚刚开始考试的时间点，对我们来说是个噩梦！
但是，经过最近发生的事情，我觉得我们是不是可以这样做：
1 每个人都会做100道题
2 每个人做的题来源于数据库
3 所以我们要读取数据库
。。。。
但是，我们是不是可以这样做呢？提前生成试卷，并且学生考试时候，根本不访问数据库，直接由服务器拖页面：
我们生成试卷时候，设置一个随机数生成100套不同的页面片
学生进入考试时候，根据随机是直接引入htm页面片生成试卷
如此一来我们考试时候的性能是否会有所优化呢，原来能承受400人同时考试的系统可否变为800人呢？我不知道，也许我永远都不会知道了！！！
光说不练假把式
说了那么多也没有意思，我们今天就来干一下吧，实现我们儿时的梦想：
PS： 100道题太多，我们搞10道就是了吧。。。。
然后我们将这100道题保存为变化p_1-p_10的页面片，用户进来时候随机引入即可，我这里就暂时不写了。。。。。
结语
在写之前，我还以为能写一篇好文章呢，写着写着就找不着北了，哎就这样吧。。。。
