《HTML教程》-12.5-12.5.2教学材料

选课流程比登录功能也要复杂，首先要按“选课”按钮，显示可选的课程列表；然后在选课列表中选择课程，并提交到服务器保存，最后显示保存选课的处理结果。在student.js文件的初始化方法（见清单12-5）中，有以下事件注册语句。这就是选课按钮（也就是清单12-4中的<aid="selCourseReq"href="#selCourse">选课</a>）注册的单击事件处理程序displayCourse，这个函数用于请求服务器返回可选课程的列表。addEvent(selCourseReq,'click',displayCourse);下面我们实现这个displayCourse()函数。

12.5.1请求课程列表——displayCourse函数请求课程列表实现比较简单，没有复杂的操作，而且有了12.4节登录功能的基础之后，大家对这个函数的编码应该比较熟悉了，在这就不再详细解释每步代码的实现。完整的代码如清单12-11所示。首先，调用utils.js中的工具函数createRequest()创建异步请求对象。第二，请求StudentServlet中的listCourse方法，该方法返回可选课程的JSON格式的字符串。第三，如果服务器响应成功，则调用listCourse(req)解析并显示在网页容器（清单12-4中的<sectionid="container"></section>）中。listCourse(req)解析与显示JSON数据，涉及到DOM节点的操作（详见第6章DOM基础）。12.5.2显示课程列表——listCourse函数

这里显示课程列表是要供学生选择的，而且每个学生都可能选择多门课程，那该如何显示数据，才能供用户进行多选呢？在HTML中你已经学习过，复选框（也就是类型为checkbox的input）可以同时选中多个，所以这里要把课程号作为复选框的值。这样，就可以通过筛选已选中的复选框来确定学生选择了哪些课程，再读取这些已选中的复选框的值，构造成请求参数字符串发送到服务器端，就可以实现选课功能了。为了使课程列表显示在网页中比较规整，需要把课程数据显示在一个表格（table）中，每一行显示一门课程。完整的代码如清单12-12所示。下面对这些代码进行详细解释。清单12-12里的参数xhr即是异步请求对象（XMLHttpRequest），也就是displayCourse调用listCourse函数时传递给它的，主要是用来获取服务器端传递的课程列表（JSON格式）。这里需要注意的是，从服务器端传来的JSON数据，或者说从异步请求对象的responseText中读取的JSON数据，只是JSON格式的字符串，而不是JavaScript对象，所以没办法直接操作。需要将它封装（或转换）成JavaScript对象，才可以访问JSON的属性或数组元素（JSON实质上就是JavaScript对象和数组相互嵌套而成的产物^_^）。所以，在操作JSON数据之前需要经过以下操作：vartxt=xhr.responseText; varcourses=eval('('+xhr.responseText+')');这里需要注意的是，使用eval()对JSON进行“包装”时的语法格式：'('+xhr.responseText+')'这里首尾的'('和')'是必不可少的，这一点一定注意，否则就会出现语法错误！第二，创建显示课程列表的表格，其实是只包含表头的表格，在解析JSON数据时，再向表格中添加行，每行一门待选课程。创建表格是调用的utils.js中的工具函数createTable，它接收一个数组，也就是表头名称的数组。返回一个创建好表头的表格，需要的编码如下：vartitle=["ID","课程名称","课程类型"]; vartable=createTable(title);第三，就是解析服务器端传回的JSON数据了。课程列表的JSON数据格式如下：{"courseId":"200807006","courseName":"数据结构","courseType":"必修"},{"courseId":"200807008","courseName":"JSP程序设计","courseType":"必修"},{"courseId":"200907012","courseName":"网络攻防技术","courseType":"选修"},{"courseId":"200907016","courseName":"网络原理","courseType":"必修"}]通过对以上数据的观察，我们可以断定这是一个JavaScript的数组，只需要编写一个循环遍历一下这个数组就可以得到所有待选课程了。数组的每个元素是一个对象（字面量对象），按照JavaScript访问对象属性的方法读取对象的属性值就可以了。遍历JSON数组的代码如下：for(varcincourses){ vartr=document.createElement("tr"); //取得数组中的每个课程 varcrs=courses[c];//对于每门课程，即JS对象的解析代码…}在每次循环中，需要生成一个表格行tr，一行中表示一门课程，对于课程的每个属性用一个td单元格进行表示。课程的所有属性操作方法类似，现面只对生成课程ID的复选框和课程名称进行说明。1、生成课程ID复选框

要生成复选框，先要生成一个input元素（标记），通过document对象的createElement()函数创建input元素。varid=document.createElement("input");创建input元素后，设置其type属性设置为checkbox，name属性设置为courseId（注意此属性用于选取学生选择的课程，这会造成listCourse函数与其他使用这一复选框的代码紧耦合，可以通过符号常量的方式进行解耦。），value属性设置为课程的courseId。id.setAttribute("type","checkbox"); id.setAttribute("name","courseId"); id.setAttribute("value",crs.courseId);如果课程是必修课程，则无需学生选择，显示必修课程时默认将该课程选中，而且设置为只读。虽然这样做不是必修的，但这样做可以改善用户体验，使学生不用为了记住哪些课是必修，哪些课是选修而费神。这样的细节在显示数据或设计界面时应予以考虑。if(crs.courseType=='必修'){ id.setAttribute("checked","checked"); id.setAttribute("readonly","readonly"); }接下来创建一个td单元格，把生成的课程ID（即这里的id变量）复选框添加到td中，再把这个td（即idTd的变量）添加到行tr中，就完成了课程ID复选框的创建。 varidTd=document.createElement("td"); idTd.appendChild(id); tr.appendChild(idTd);2、显示课程名称

首先，也要创建一个单元格td（nameTd），再用课程名称（课程对象的courseName属性的值）创建一个文本节点。创建文本节点可以使用document对象的createTextNode()函数进行创建。最后，将创建的文本节点（即这里的nameTxt）添加到td（即这里的nameTd）中，再把td（即这里的nameTd）添加到tr中，即完成课程名称的显示，所用的代码如下：varnameTd=document.createElement("td");varnameTxt=document.createTextNode(crs.courseName);nameTd.appendChild(nameTxt);tr.appendChild(nameTd);课程其他的信息显示都与显示课程名称类似，不再列出。但需要注意的是：在每次循环中，最后一次不能忘记把创建的行tr添加到表格table中，否则不会向表格添加任何数据！即在每次循环的最后，一定要写上以下代码：table.appendChild(tr);除了要显示课程信息之外，还要创建一个按钮，在用户单击该按钮时，向服务器提交学生选择的课