《HTML教程》-11.4-11.6教学材料_第1页
《HTML教程》-11.4-11.6教学材料_第2页
《HTML教程》-11.4-11.6教学材料_第3页
《HTML教程》-11.4-11.6教学材料_第4页
《HTML教程》-11.4-11.6教学材料_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第一步：要将JSON格式的字符串包装成JavaScript对象（对象或数组）。方法是使用eval()函数，格式如下：JSON字符串对应的JavaScript对象=eval(“(”+JSON格式的字符串+”)”);这里需要注意的是：eval参数的开始”(”和结束”)”不能省略，必须作为参数的一部分。第二步：访问JSON中的数据，只有两种方式（1）访问对象的属性；（2）访问数组的元素。（1）访问对象的属性

格式：对象名.属性名（2）访问数组元素

格式：数组名[下标]下面通过一个实际的例子，演示JavaScript解析JSON的方法和过程。第1步：新建JSON格式的文本文件新建项目AjaxJSON项目，并在WebContent目录下新建classes.txt文件，输入以下内容。{"class1":[ { "classID":"CS115", "department":"ComputerScience", "credits":3, "req":"yes", "instructor":"Adams", "title":"ProgrammingConcepts" },{ "classID":"CS205", "semester":"fall", "department":"ComputerScience", "credits":3, "req":"yes", "instructor":"Dykes", "title":"JavaScript" },{ "classID":"CS255", "semester":"fall", "department":"ComputerScience", "credits":3, "req":"yes", "instructor":"Brunner", "title":"Java" }]}第2步：准备utils.js文件

在WebContent目录下新建js目录，并复制第10章中的utils.js文件。第3步：新建JSONDemo.html在WebContent目录下新建JSONDemo.html文件，并输入以下代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><scripttype="text/javascript"src="js/utils.js"></script><scripttype="text/javascript"src="js/requestJson.js"></script></head><body> <h1>查看课程</h1> <form> <inputtype="button"id="reqDoc"value="查看课程"/> </form> <divid="title"></div></body></html>第4步：编写requestJson.js文件

（1）注册初始化函数//注册初始化函数window.onload=init;（2）编写初始化函数给查看课程按钮注册单击事件。//文档初始化functioninit(){ varbtn=document.getElementById("reqDoc"); addEvent(btn,'click',requestJSON,false);}（3）编写请求函数使用eval()将JSON格式的字符串转换成JS对象。functionrequestJSON(){req=createRequest();req.open('GET','responseJSON.jsp',true);req.onreadystatechange=function(){if(req==null){return;}if(req.readyState==4){if(req.status==200){varcourses=req.responseText;courses=eval("("+courses+")");checkCourse(courses);}}};req.send();}(4)编写解析JSON的函数checkCourse我们要把第1步中的JSON格式的字符串，转换成HTML表格的形式，并添加到第3步id为title的div中。这个过程代码比较多，我们先讲解每一步骤的代码，最后综合得到完整的代码。Step1初始化容器

首先，要得到作为容器的div元素，可以用document对象的getElementById()函数。第二，要把容器清空（免得多次显示数据是出现多余数据）。初始化容器的代码如下：varcon=document.getElementById("list");//清空显示容器for(vari=con.childNodes.length;i>0;i--){

con.removeChild(con.childNodes[i-1]);

}注意，我们在删除div容器中的子结点时，是从最后一个结点开始，依次向前删除，而不是从第一个结点开始向后删除（想想为什么这样？）。当然，也可以从前的结点开始向后删除，只不过代码不同。从容器第1个结点开始向后删除的代码如下：varcon=document.getElementById("list");//清空显示容器for(vari=0;i<con.length;i++){ con.removeChild(con.firstChild);}与从后边开始依次向前删除的代码不同的是，每次都是删除容器的第1个结点！想一想，为什么要这样呢？Step2初始化表格因为我们要把数据显示在表格中，所以这里要初始化表头。我们先把表头的标题放到一个数组中，这样我们就要通过遍历这个数组来创建所有表头了。先创建表格结点table和行结点tr；然后遍历表头数组，为每个数组元素创建文本结点；再创建th结点，把文本结点添加到th结点中；再把th结点添加到tr结点中；最后（循环结束以后），把tr添加到table中，完成表头的初始化。代码如下：//构建课程列表的表格和表头vartableTitle=["课程编号","课程名称","学分","任课教师","是否必修","开课学期","开课单位"];vartable=document.createElement("table");vartitleTr=document.createElement("tr");for(varj=0;j<tableTitle.length;j++){ vartitleText=document.createTextNode(tableTitle[j]); varth=document.createElement("th"); th.appendChild(titleText); titleTr.appendChild(th);}table.appendChild(titleTr);Step3解析JSON

JSON就是符合JSON语法的字符串，服务器返回的JSON字符串就保存在异步请求对象的responseText属性中。首先接收服务器传回的JSON字符串，然后通过eval()函数把它转换成JavaScript对象，代码如下：varcourses=req.responseText;courses=eval("("+courses+")");观察我们要解析的JSON字符串格式，发现它是一个JavaScript对象，有1个名为class1的属性，其值为一个数组，数组中的每个元素也是一个对象，且每个对象都相同（第1个元素没有semester属性）。我们首先通过对象（courses）的class1属性获取它包含的数组，然后遍历这个数组，对于数组中的每个元素，通过“对象名.属性名”的方式访问JSON中的数据，代码如下所示。for(vari=0;i<courses.class1.length;i++){//获取JSON对象中的属性varclassID=courses.class1[i].classID;vartitle=courses.class1[i].title;varcredits=courses.class1[i].credits;varinstructor=courses.class1[i].instructor;varreq=courses.class1[i].req;varsemester=courses.class1[i].semester==null?"":courses.class1[i].semester;vardepartment=courses.class1[i].department; //其他显示代码}因为数组的第1个元素没有semester属性，所以这个属性解析时要特殊处理，代码与处理其他属性的代码不同，如下：varsemester=courses.class1[i].semester==null?"":courses.class1[i].semester;这一点要特别注意。Step4将数据显示在表格中我们最终要显示的数据如图11-6所示。图11-6解析后的JSON显示样式要生成图11-6所示的数据样式，要采用如下步骤：

①创建tr结点vartr=document.createElement("tr");②

对于数组中每个对象的属性做如下处理：

◆创建td结点；

◆用每个属性值创建文本结点；

◆将文本结点添加到td结点中；

◆将td结点添加到tr结点中。以班级号为例的代码如下，处理其他属性的代码雷同：vartd=document.createElement("td");varidNode=document.createTextNode(classID);td.appendChild(idNode);tr.appendChild(td);③将第②创建的tr结点添加到Step2初始化的表格中，并对表格添加样式。将表格添加到Step1初始化的容器中，代码如下：table.appendChild(tr);table.className="dataCon";con.appendChild(table);说明，table.className="dataCon"；这句代码要求当前网页（JSONDemo.html）要包含”.dataCon”的样式声明文件。综合以上所述，得到JavaScript解析的完整代码，如清单11-4所示。第5步：编写responseJSON.jsp文件服务器端的返回JSON格式的JSP代码如下。主要任务是读取包含JSON字符串的文件，并把读到的文本写到客户端。需要经过以下几个步骤：

◆读取文件；

◆把文本内容写到缓冲区；

◆把缓冲区中的内容写到客户端。

①读取文件首先，要找到文件在服务器上的绝对路径（保存JSON文本的classes.txt文件，保存在服务器的files目录中），代码如下：Stringpath=application.getRealPath("files");其次，创建Java代码文件的File类，代码如下：FilexmlFile=newFile(path+"/classes.txt");第三，创建读取文本文件的，带有缓冲区的BufferedReader对象，代码如下：InputStreamReaderis=newInputStreamReader(newFileInputStream(xmlFile)); BufferedReaderbr=newBufferedReader(is);②

把文本内容写到缓冲区首先，创建缓冲区StringBuilder对象sb，然后通过BufferedReader的readLine()方法一次读取一行，并把读取到的行去掉首尾空后后添加到sb对象中，读取结束后，关闭BufferedReader对象。代码如下：StringBuildersb=newStringBuilder(); Stringstr=null; while((str=br.readLine())!=null){ sb.append(str.trim()); } br.close();③把缓冲区内容写到客户端首先，因为写到客户端的数据是JSON格式的字符串，而不是StringBuilder对象，所以先要把sb对象通过toString()方法转换成字符串，代码如下：Stringcontent=sb.toString();第二，从JSP的内置对象response获取PrinteWriter对象，通过它将字符串写到客户端。在此之前要调用response对象的setContentType()方法，设置输出内容的格式为text/html;charset=UTF-8，说明我们写到客户端的内容是文本，编码方式为UTF-8。代码如下： response.setContentType("text/html;charset=UTF-8"); PrintWriterpw=response.getWriter();第三，通过PrintWriter的write()方法将内容写到客户端，然后清空缓冲区，最后调用close()方法关闭PrintWriter。注意，这个close()方法非常必要，否则客户端的异步对象将会一直等待服务器端响应，而收不到数据！代码如下： pw.write(content); pw.flush();pw.close();综上所

人人文库> 全部分类> 教育资料 > 作文作品

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论