前言
我發現一個人厲害不只是他厲害，他的名字也一定要跟着厲害才行，比如我刀狂劍痴葉小釵了，若是老夫叫做刀狂劍痴葉小草，估計就缺少氣勢了！！！
又如百世經綸一頁書，如果叫做百世經綸一本書估計也不會是絕代高手了！說了我給標題取了個很霸氣的名字：
“前端無優化，庸人自擾之”，其實我也不知道他是什么意思了，好了，啰嗦結束進入正題。
最近遇到一個有意思的東西，是關於考試題相關的東東，其實就是我有很多試題，需要生成試卷讓人來做了（真實應用有點不同），但是他卻讓我想起了我的初戀！
我原來花了一年時間做的考試系統，所以有了這篇文章。
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的頁面片，用戶進來時候隨機引入即可，我這里就暫時不寫了。。。。。
結語
在寫之前，我還以為能寫一篇好文章呢，寫着寫着就找不着北了，哎就這樣吧。。。。