選課流程比登錄功能也要復(fù)雜，首先要按“選課”按鈕，顯示可選的課程列表；然后在選課列表中選擇課程，并提交到服務(wù)器保存，最后顯示保存選課的處理結(jié)果。在student.js文件的初始化方法（見清單12-5）中，有以下事件注冊(cè)語句。這就是選課按鈕（也就是清單12-4中的<aid="selCourseReq"href="#selCourse">選課</a>）注冊(cè)的單擊事件處理程序displayCourse，這個(gè)函數(shù)用于請(qǐng)求服務(wù)器返回可選課程的列表。addEvent(selCourseReq,'click',displayCourse);下面我們實(shí)現(xiàn)這個(gè)displayCourse()函數(shù)。

12.5.1請(qǐng)求課程列表——displayCourse函數(shù)請(qǐng)求課程列表實(shí)現(xiàn)比較簡(jiǎn)單，沒有復(fù)雜的操作，而且有了12.4節(jié)登錄功能的基礎(chǔ)之后，大家對(duì)這個(gè)函數(shù)的編碼應(yīng)該比較熟悉了，在這就不再詳細(xì)解釋每步代碼的實(shí)現(xiàn)。完整的代碼如清單12-11所示。首先，調(diào)用utils.js中的工具函數(shù)createRequest()創(chuàng)建異步請(qǐng)求對(duì)象。第二，請(qǐng)求StudentServlet中的listCourse方法，該方法返回可選課程的JSON格式的字符串。第三，如果服務(wù)器響應(yīng)成功，則調(diào)用listCourse(req)解析并顯示在網(wǎng)頁容器（清單12-4中的<sectionid="container"></section>）中。listCourse(req)解析與顯示JSON數(shù)據(jù)，涉及到DOM節(jié)點(diǎn)的操作（詳見第6章DOM基礎(chǔ)）。12.5.2顯示課程列表——listCourse函數(shù)

這里顯示課程列表是要供學(xué)生選擇的，而且每個(gè)學(xué)生都可能選擇多門課程，那該如何顯示數(shù)據(jù)，才能供用戶進(jìn)行多選呢？在HTML中你已經(jīng)學(xué)習(xí)過，復(fù)選框（也就是類型為checkbox的input）可以同時(shí)選中多個(gè)，所以這里要把課程號(hào)作為復(fù)選框的值。這樣，就可以通過篩選已選中的復(fù)選框來確定學(xué)生選擇了哪些課程，再讀取這些已選中的復(fù)選框的值，構(gòu)造成請(qǐng)求參數(shù)字符串發(fā)送到服務(wù)器端，就可以實(shí)現(xiàn)選課功能了。為了使課程列表顯示在網(wǎng)頁中比較規(guī)整，需要把課程數(shù)據(jù)顯示在一個(gè)表格（table）中，每一行顯示一門課程。完整的代碼如清單12-12所示。下面對(duì)這些代碼進(jìn)行詳細(xì)解釋。清單12-12里的參數(shù)xhr即是異步請(qǐng)求對(duì)象（XMLHttpRequest），也就是displayCourse調(diào)用listCourse函數(shù)時(shí)傳遞給它的，主要是用來獲取服務(wù)器端傳遞的課程列表（JSON格式）。這里需要注意的是，從服務(wù)器端傳來的JSON數(shù)據(jù)，或者說從異步請(qǐng)求對(duì)象的responseText中讀取的JSON數(shù)據(jù)，只是JSON格式的字符串，而不是JavaScript對(duì)象，所以沒辦法直接操作。需要將它封裝（或轉(zhuǎn)換）成JavaScript對(duì)象，才可以訪問JSON的屬性或數(shù)組元素（JSON實(shí)質(zhì)上就是JavaScript對(duì)象和數(shù)組相互嵌套而成的產(chǎn)物^_^）。所以，在操作JSON數(shù)據(jù)之前需要經(jīng)過以下操作：vartxt=xhr.responseText; varcourses=eval('('+xhr.responseText+')');這里需要注意的是，使用eval()對(duì)JSON進(jìn)行“包裝”時(shí)的語法格式：'('+xhr.responseText+')'這里首尾的'('和')'是必不可少的，這一點(diǎn)一定注意，否則就會(huì)出現(xiàn)語法錯(cuò)誤！第二，創(chuàng)建顯示課程列表的表格，其實(shí)是只包含表頭的表格，在解析JSON數(shù)據(jù)時(shí)，再向表格中添加行，每行一門待選課程。創(chuàng)建表格是調(diào)用的utils.js中的工具函數(shù)createTable，它接收一個(gè)數(shù)組，也就是表頭名稱的數(shù)組。返回一個(gè)創(chuàng)建好表頭的表格，需要的編碼如下：vartitle=["ID","課程名稱","課程類型"]; vartable=createTable(title);第三，就是解析服務(wù)器端傳回的JSON數(shù)據(jù)了。課程列表的JSON數(shù)據(jù)格式如下：{"courseId":"200807006","courseName":"數(shù)據(jù)結(jié)構(gòu)","courseType":"必修"},{"courseId":"200807008","courseName":"JSP程序設(shè)計(jì)","courseType":"必修"},{"courseId":"200907012","courseName":"網(wǎng)絡(luò)攻防技術(shù)","courseType":"選修"},{"courseId":"200907016","courseName":"網(wǎng)絡(luò)原理","courseType":"必修"}]通過對(duì)以上數(shù)據(jù)的觀察，我們可以斷定這是一個(gè)JavaScript的數(shù)組，只需要編寫一個(gè)循環(huán)遍歷一下這個(gè)數(shù)組就可以得到所有待選課程了。數(shù)組的每個(gè)元素是一個(gè)對(duì)象（字面量對(duì)象），按照J(rèn)avaScript訪問對(duì)象屬性的方法讀取對(duì)象的屬性值就可以了。遍歷JSON數(shù)組的代碼如下：for(varcincourses){ vartr=document.createElement("tr"); //取得數(shù)組中的每個(gè)課程 varcrs=courses[c];//對(duì)于每門課程，即JS對(duì)象的解析代碼…}在每次循環(huán)中，需要生成一個(gè)表格行tr，一行中表示一門課程，對(duì)于課程的每個(gè)屬性用一個(gè)td單元格進(jìn)行表示。課程的所有屬性操作方法類似，現(xiàn)面只對(duì)生成課程ID的復(fù)選框和課程名稱進(jìn)行說明。1、生成課程ID復(fù)選框

要生成復(fù)選框，先要生成一個(gè)input元素（標(biāo)記），通過document對(duì)象的createElement()函數(shù)創(chuàng)建input元素。varid=document.createElement("input");創(chuàng)建input元素后，設(shè)置其type屬性設(shè)置為checkbox，name屬性設(shè)置為courseId（注意此屬性用于選取學(xué)生選擇的課程，這會(huì)造成listCourse函數(shù)與其他使用這一復(fù)選框的代碼緊耦合，可以通過符號(hào)常量的方式進(jìn)行解耦。），value屬性設(shè)置為課程的courseId。id.setAttribute("type","checkbox"); id.setAttribute("name","courseId"); id.setAttribute("value",crs.courseId);如果課程是必修課程，則無需學(xué)生選擇，顯示必修課程時(shí)默認(rèn)將該課程選中，而且設(shè)置為只讀。雖然這樣做不是必修的，但這樣做可以改善用戶體驗(yàn)，使學(xué)生不用為了記住哪些課是必修，哪些課是選修而費(fèi)神。這樣的細(xì)節(jié)在顯示數(shù)據(jù)或設(shè)計(jì)界面時(shí)應(yīng)予以考慮。if(crs.courseType=='必修'){ id.setAttribute("checked","checked"); id.setAttribute("readonly","readonly"); }接下來創(chuàng)建一個(gè)td單元格，把生成的課程ID（即這里的id變量）復(fù)選框添加到td中，再把這個(gè)td（即idTd的變量）添加到行tr中，就完成了課程ID復(fù)選框的創(chuàng)建。 varidTd=document.createElement("td"); idTd.appendChild(id); tr.appendChild(idTd);2、顯示課程名稱

首先，也要?jiǎng)?chuàng)建一個(gè)單元格td（nameTd），再用課程名稱（課程對(duì)象的courseName屬性的值）創(chuàng)建一個(gè)文本節(jié)點(diǎn)。創(chuàng)建文本節(jié)點(diǎn)可以使用document對(duì)象的createTextNode()函數(shù)進(jìn)行創(chuàng)建。最后，將創(chuàng)建的文本節(jié)點(diǎn)（即這里的nameTxt）添加到td（即這里的nameTd）中，再把td（即這里的nameTd）添加到tr中，即完成課程名稱的顯示，所用的代碼如下：varnameTd=document.createElement("td");varnameTxt=document.createTextNode(crs.courseName);nameTd.appendChild(nameTxt);tr.appendChild(nameTd);課程其他的信息顯示都與顯示課程名稱類似，不再列出。但需要注意的是：在每次循環(huán)中，最后一次不能忘記把創(chuàng)建的行tr添加到表格table中，否則不會(huì)向表格添加任何數(shù)據(jù)！即在每次循環(huán)的最后，一定要寫上以下代碼：table.appendChild(tr);除了要顯示課程信息之外，還要?jiǎng)?chuàng)建一個(gè)按鈕，在用戶單擊該按鈕時(shí)，向服務(wù)器提交學(xué)生選擇的課