《HTML教程》-11.4-11.6教學(xué)材料_第1頁(yè)
《HTML教程》-11.4-11.6教學(xué)材料_第2頁(yè)
《HTML教程》-11.4-11.6教學(xué)材料_第3頁(yè)
《HTML教程》-11.4-11.6教學(xué)材料_第4頁(yè)
《HTML教程》-11.4-11.6教學(xué)材料_第5頁(yè)
已閱讀5頁(yè)，還剩42頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第一步：要將JSON格式的字符串包裝成JavaScript對(duì)象（對(duì)象或數(shù)組）。方法是使用eval()函數(shù)，格式如下：JSON字符串對(duì)應(yīng)的JavaScript對(duì)象=eval(“(”+JSON格式的字符串+”)”);這里需要注意的是：eval參數(shù)的開(kāi)始”(”和結(jié)束”)”不能省略，必須作為參數(shù)的一部分。第二步：訪問(wèn)JSON中的數(shù)據(jù)，只有兩種方式（1）訪問(wèn)對(duì)象的屬性；（2）訪問(wèn)數(shù)組的元素。（1）訪問(wèn)對(duì)象的屬性

格式：對(duì)象名.屬性名（2）訪問(wèn)數(shù)組元素

格式：數(shù)組名[下標(biāo)]下面通過(guò)一個(gè)實(shí)際的例子，演示JavaScript解析JSON的方法和過(guò)程。第1步：新建JSON格式的文本文件新建項(xiàng)目AjaxJSON項(xiàng)目，并在WebContent目錄下新建classes.txt文件，輸入以下內(nèi)容。{"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步：準(zhǔn)備utils.js文件

在WebContent目錄下新建js目錄，并復(fù)制第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步：編寫(xiě)requestJson.js文件

（1）注冊(cè)初始化函數(shù)//注冊(cè)初始化函數(shù)window.onload=init;（2）編寫(xiě)初始化函數(shù)給查看課程按鈕注冊(cè)單擊事件。//文檔初始化functioninit(){ varbtn=document.getElementById("reqDoc"); addEvent(btn,'click',requestJSON,false);}（3）編寫(xiě)請(qǐng)求函數(shù)使用eval()將JSON格式的字符串轉(zhuǎn)換成JS對(duì)象。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)編寫(xiě)解析JSON的函數(shù)checkCourse我們要把第1步中的JSON格式的字符串，轉(zhuǎn)換成HTML表格的形式，并添加到第3步id為title的div中。這個(gè)過(guò)程代碼比較多，我們先講解每一步驟的代碼，最后綜合得到完整的代碼。Step1初始化容器

首先，要得到作為容器的div元素，可以用document對(duì)象的getElementById()函數(shù)。第二，要把容器清空（免得多次顯示數(shù)據(jù)是出現(xiàn)多余數(shù)據(jù)）。初始化容器的代碼如下：varcon=document.getElementById("list");//清空顯示容器for(vari=con.childNodes.length;i>0;i--){

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

}注意，我們?cè)趧h除div容器中的子結(jié)點(diǎn)時(shí)，是從最后一個(gè)結(jié)點(diǎn)開(kāi)始，依次向前刪除，而不是從第一個(gè)結(jié)點(diǎn)開(kāi)始向后刪除（想想為什么這樣？）。當(dāng)然，也可以從前的結(jié)點(diǎn)開(kāi)始向后刪除，只不過(guò)代碼不同。從容器第1個(gè)結(jié)點(diǎn)開(kāi)始向后刪除的代碼如下：varcon=document.getElementById("list");//清空顯示容器for(vari=0;i<con.length;i++){ con.removeChild(con.firstChild);}與從后邊開(kāi)始依次向前刪除的代碼不同的是，每次都是刪除容器的第1個(gè)結(jié)點(diǎn)！想一想，為什么要這樣呢？Step2初始化表格因?yàn)槲覀円褦?shù)據(jù)顯示在表格中，所以這里要初始化表頭。我們先把表頭的標(biāo)題放到一個(gè)數(shù)組中，這樣我們就要通過(guò)遍歷這個(gè)數(shù)組來(lái)創(chuàng)建所有表頭了。先創(chuàng)建表格結(jié)點(diǎn)table和行結(jié)點(diǎn)tr；然后遍歷表頭數(shù)組，為每個(gè)數(shù)組元素創(chuàng)建文本結(jié)點(diǎn)；再創(chuàng)建th結(jié)點(diǎn)，把文本結(jié)點(diǎn)添加到th結(jié)點(diǎn)中；再把th結(jié)點(diǎn)添加到tr結(jié)點(diǎn)中；最后（循環(huán)結(jié)束以后），把tr添加到table中，完成表頭的初始化。代碼如下：//構(gòu)建課程列表的表格和表頭vartableTitle=["課程編號(hào)","課程名稱","學(xué)分","任課教師","是否必修","開(kāi)課學(xué)期","開(kāi)課單位"];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語(yǔ)法的字符串，服務(wù)器返回的JSON字符串就保存在異步請(qǐng)求對(duì)象的responseText屬性中。首先接收服務(wù)器傳回的JSON字符串，然后通過(guò)eval()函數(shù)把它轉(zhuǎn)換成JavaScript對(duì)象，代碼如下：varcourses=req.responseText;courses=eval("("+courses+")");觀察我們要解析的JSON字符串格式，發(fā)現(xiàn)它是一個(gè)JavaScript對(duì)象，有1個(gè)名為class1的屬性，其值為一個(gè)數(shù)組，數(shù)組中的每個(gè)元素也是一個(gè)對(duì)象，且每個(gè)對(duì)象都相同（第1個(gè)元素沒(méi)有semester屬性）。我們首先通過(guò)對(duì)象（courses）的class1屬性獲取它包含的數(shù)組，然后遍歷這個(gè)數(shù)組，對(duì)于數(shù)組中的每個(gè)元素，通過(guò)“對(duì)象名.屬性名”的方式訪問(wèn)JSON中的數(shù)據(jù)，代碼如下所示。for(vari=0;i<courses.class1.length;i++){//獲取JSON對(duì)象中的屬性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; //其他顯示代碼}因?yàn)閿?shù)組的第1個(gè)元素沒(méi)有semester屬性，所以這個(gè)屬性解析時(shí)要特殊處理，代碼與處理其他屬性的代碼不同，如下：varsemester=courses.class1[i].semester==null?"":courses.class1[i].semester;這一點(diǎn)要特別注意。Step4將數(shù)據(jù)顯示在表格中我們最終要顯示的數(shù)據(jù)如圖11-6所示。圖11-6解析后的JSON顯示樣式要生成圖11-6所示的數(shù)據(jù)樣式，要采用如下步驟：

①創(chuàng)建tr結(jié)點(diǎn)vartr=document.createElement("tr");②

對(duì)于數(shù)組中每個(gè)對(duì)象的屬性做如下處理：

◆創(chuàng)建td結(jié)點(diǎn)；

◆用每個(gè)屬性值創(chuàng)建文本結(jié)點(diǎn)；

◆將文本結(jié)點(diǎn)添加到td結(jié)點(diǎn)中；

◆將td結(jié)點(diǎn)添加到tr結(jié)點(diǎn)中。以班級(jí)號(hào)為例的代碼如下，處理其他屬性的代碼雷同：vartd=document.createElement("td");varidNode=document.createTextNode(classID);td.appendChild(idNode);tr.appendChild(td);③將第②創(chuàng)建的tr結(jié)點(diǎn)添加到Step2初始化的表格中，并對(duì)表格添加樣式。將表格添加到Step1初始化的容器中，代碼如下：table.appendChild(tr);table.className="dataCon";con.appendChild(table);說(shuō)明，table.className="dataCon"；這句代碼要求當(dāng)前網(wǎng)頁(yè)（JSONDemo.html）要包含”.dataCon”的樣式聲明文件。綜合以上所述，得到JavaScript解析的完整代碼，如清單11-4所示。第5步：編寫(xiě)responseJSON.jsp文件服務(wù)器端的返回JSON格式的JSP代碼如下。主要任務(wù)是讀取包含JSON字符串的文件，并把讀到的文本寫(xiě)到客戶端。需要經(jīng)過(guò)以下幾個(gè)步驟：

◆讀取文件；

◆把文本內(nèi)容寫(xiě)到緩沖區(qū)；

◆把緩沖區(qū)中的內(nèi)容寫(xiě)到客戶端。

①讀取文件首先，要找到文件在服務(wù)器上的絕對(duì)路徑（保存JSON文本的classes.txt文件，保存在服務(wù)器的files目錄中），代碼如下：Stringpath=application.getRealPath("files");其次，創(chuàng)建Java代碼文件的File類，代碼如下：FilexmlFile=newFile(path+"/classes.txt");第三，創(chuàng)建讀取文本文件的，帶有緩沖區(qū)的BufferedReader對(duì)象，代碼如下：InputStreamReaderis=newInputStreamReader(newFileInputStream(xmlFile)); BufferedReaderbr=newBufferedReader(is);②

把文本內(nèi)容寫(xiě)到緩沖區(qū)首先，創(chuàng)建緩沖區(qū)StringBuilder對(duì)象sb，然后通過(guò)BufferedReader的readLine()方法一次讀取一行，并把讀取到的行去掉首尾空后后添加到sb對(duì)象中，讀取結(jié)束后，關(guān)閉BufferedReader對(duì)象。代碼如下：StringBuildersb=newStringBuilder(); Stringstr=null; while((str=br.readLine())!=null){ sb.append(str.trim()); } br.close();③把緩沖區(qū)內(nèi)容寫(xiě)到客戶端首先，因?yàn)閷?xiě)到客戶端的數(shù)據(jù)是JSON格式的字符串，而不是StringBuilder對(duì)象，所以先要把sb對(duì)象通過(guò)toString()方法轉(zhuǎn)換成字符串，代碼如下：Stringcontent=sb.toString();第二，從JSP的內(nèi)置對(duì)象response獲取PrinteWriter對(duì)象，通過(guò)它將字符串寫(xiě)到客戶端。在此之前要調(diào)用response對(duì)象的setContentType()方法，設(shè)置輸出內(nèi)容的格式為text/html;charset=UTF-8，說(shuō)明我們寫(xiě)到客戶端的內(nèi)容是文本，編碼方式為UTF-8。代碼如下： response.setContentType("text/html;charset=UTF-8"); PrintWriterpw=response.getWriter();第三，通過(guò)PrintWriter的write()方法將內(nèi)容寫(xiě)到客戶端，然后清空緩沖區(qū)，最后調(diào)用close()方法關(guān)閉PrintWriter。注意，這個(gè)close()方法非常必要，否則客戶端的異步對(duì)象將會(huì)一直等待服務(wù)器端響應(yīng)，而收不到數(shù)據(jù)！代碼如下： pw.write(content); pw.flush();pw.close();綜上所

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論