《JavaScript與jQuery網頁前端開發(fā)與設計-第2版》課件 CH12 jQuery AJAX

JavaScript與jQuery

網頁前端開發(fā)與設計-第2版學校名稱：XXXX主講教師：XXXX第12章jQueryAJAX技術 本章學習目標了解什么是AJAX以及AJAX技術的組成部分；了解什么是jQueryAJAX；掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；掌握jQueryAJAX事件的用法。目錄12.1jQueryAJAX簡介12.2準備工作

12.3jQueryAJAX常用方法 12.4jQueryAJAX事件12.5階段案例：簡易單詞查詢12.1jQueryAJAX簡介

12.1.1什么是AJAX12.1.2AJAX的實現(xiàn)原理

12.1.3jQueryAJAX 12.1.1什么是AJAXAJAX來源于英文詞組AsynchronousJavaScriptandXML（異步JavaScript和XML）的首字母縮寫，是一種可以與服務器異步交互數(shù)據(jù)的網頁開發(fā)技術。該名稱是在2005年2月首次出現(xiàn)，由AdaptivePath公司的JesseGarrett在Ajax:AnewapproachtoWebApplication一文中提到。使用AJAX技術可以在不重新加載整個頁面的前提下直接更新當前頁面中的指定內容，例如GoogleSuggest和GoogleMaps就是兩種使用了AJAX技術的Web應用。12.1.1什么是AJAX事實上，AJAX是由多種當前主流的技術組合而成的，包含如下內容：使用XTHML和CSS進行標準化表達；使用DOM(DocumentObjectModel)實現(xiàn)動態(tài)展示和交互；使用XMLHttpRequest實現(xiàn)異步數(shù)據(jù)獲取；使用JavaScript綁定所有技術綜合應用。12.1.2AJAX的實現(xiàn)原理AJAX可以讓瀏覽器和服務器端進行異步交互，其實現(xiàn)原理可以分成5個步驟，如下圖所示。12.1.2AJAX的實現(xiàn)原理當網頁頁面需要顯示從服務器端查詢到的數(shù)據(jù)信息時，先使用JavaScript調用XMLHTTPRequest對象，該對象允許JavaScript向服務器端發(fā)出HTTP請求并且不阻塞用戶。服務器收到請求后在自身后臺處理請求并將響應結果返回給瀏覽器，其中有用的數(shù)據(jù)信息可以封裝成文本、HTML、XML或JSON等形式發(fā)出，再由瀏覽器端解析數(shù)據(jù)包后獲取里面的詳細內容。最后，繼續(xù)使用JavaScript操作HTMLDOM對象來直接更新頁面中的內容，無需刷新網頁。12.1.3jQueryAJAX在不使用jQueryAJAX技術時，JavaScript創(chuàng)建XMLHTTPRequest對象時還得考慮不同瀏覽器的兼容性問題，節(jié)選部分參考代碼如下：//非IE瀏覽器創(chuàng)建XmlHttpRequest對象if(window.XmlHttpRequest){xmlhttpReq=newXmlHttpRequest();}//IE瀏覽器創(chuàng)建XmlHttpRequest對象if(window.ActiveXObject){try{xmlhttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttpReq=newActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}如果使用了jQueryAJAX技術，上述代碼的復雜內容只需要一個$.ajax()就可以完成。12.1.3jQueryAJAXjQuery提供了關于AJAX的一系列方法，使得開發(fā)者可以更方便地從服務器端請求文本、HTML、XML或JSON形式的數(shù)據(jù)。jQueryAJAX技術中封裝的函數(shù)可以化簡原本復雜繁瑣的AJAX相關代碼，使得程序員可以更多關注產品的實現(xiàn)。12.1.3jQueryAJAX注：由于Chrome內核瀏覽器的安全機制不允許使用AJAX請求本地文件，因此本章節(jié)均使用了在本地電腦中臨時搭建服務器的方式（搭建方式見12.2）作為例題運行效果的截圖以供參考，后面不再逐一解釋。讀者在實際運用中如果采用了第三方服務器環(huán)境則無需考慮瀏覽器的限制問題。12.2準備工作12.2.1臨時服務器的搭建12.2.2文件訪問測試12.2.1臨時服務器的搭建若開發(fā)者條件受限，可以將PC端臨時部署為模擬服務器進行開發(fā)和測試。開發(fā)者可以根據(jù)自己的實際情況選擇Apache、Ngnix、Tomcat等任意一款服務器軟件進行安裝部署，以及選用PHP、Node.js、J2EE等任意一種語言進行后端開發(fā)。12.2.1臨時服務器的搭建初學者可以直接使用第三方免費套件幫助我們快速搭建模擬服務器環(huán)境，這里以phpStudyV8.1套裝軟件（包含了Apache/Nginx、PHP和MySQL）為例，部署步驟如下：（1）下載安裝包（官方網址），在PC端中雙擊安裝。（2）完成后啟動Apache/Nginx服務器，如圖所示。（3）在WWW目錄下創(chuàng)建自定義目錄，例如ajaxDemo，未來可以在該目錄下放置圖片素材或PHP文件。至此臨時部署完畢，用戶可以隨時更改服務器上的目錄地址和PHP文件代碼。12.2.2文件訪問測試臨時服務器的WWW目錄就是根目錄，它的網絡地址是“http://localhost/”或“/”。開發(fā)者可以在根目錄下自行創(chuàng)建目錄和文件，例如在ajaxDemo中創(chuàng)建了hello.txt文件，那么該文件的URL地址就是“http://localhost/miniDemo/hello.txt”。在文本文件中隨意寫一句話，例如寫上“Hello”，然后用瀏覽器訪問該文件的地址，效果如下圖所示。注意：如果要顯示中文需要把文本文件保存為UTF-8編碼格式，否則可能會顯示亂碼。12.2.2文件訪問測試以PHP類型的文件為例，就可以用來編寫代碼制作請求接口了。PHP文件的返回語句是echo，例如：這樣發(fā)送ajax請求后將會收到引號里面的文字內容。開發(fā)者也可以直接用瀏覽器訪問該地址，能獲得同樣的文字內容（如下圖所示），因此可以在開發(fā)之前直接使用瀏覽器測試PHP文件是否正確。<?phpecho'你好！';?>12.3jQueryAJAX常用方法12.3.1jQueryAJAXload()方法 12.3.2jQueryAJAXget()方法 12.3.3jQueryAJAXpost()方法 12.3.4jQueryAJAXajax()方法 12.3.5jQueryAJAX更多方法介紹12.3.1jQueryAJAXload()方法 jQueryAJAXload()方法可以向服務器端發(fā)送數(shù)據(jù)獲取請求，并將已獲取到的數(shù)據(jù)加載到指定的HTML元素中。其語法格式如下：$(selector).load(URL[,data][,callback]);12.3.1jQueryAJAXload()方法 其中URL為必填參數(shù)，data和callback為可選參數(shù)。具體解釋如下：

URL參數(shù)用于規(guī)定需要獲取數(shù)據(jù)的URL地址，可以是文本、XML或者JSON數(shù)據(jù)；

data參數(shù)用于規(guī)定與請求一起發(fā)送給服務器的字符串，該字符串以鍵/值對集合的形式組成；

callback參數(shù)用于規(guī)定load()方法完成后需要執(zhí)行的函數(shù)。1. 常規(guī)使用例如，將文件test.txt的內容加載到id="demo"的段落元素<p>中。jQuery將使用.innerHTML屬性將指定元素中的全部內容更新為test.txt中的文本內容。如果只需要加載的文件中的某個HTML元素，則可以在URL參數(shù)中追加jQuery選擇器來篩選需要加載的元素。$("#demo").load("test.txt");12.3.1jQueryAJAXload()方法12.3.1jQueryAJAXload()方法1. 常規(guī)使用例如，將文件test.txt中class="style01"的<div>元素加載到id="demo"的段落元素<p>中。需要注意的是，以上兩種情況的選擇器都必須是在網頁文檔中實際存在的HTML元素，否則AJAX請求將不會被發(fā)出。$("#demo").load("test.txt

div.style01");12.3.1jQueryAJAXload()方法1. 常規(guī)使用【例12-1】jQueryAJAXload()方法的簡單應用12.3.1jQueryAJAXload()方法2. 回調函數(shù)的使用jQueryAJAXload()方法中的可選參數(shù)callback規(guī)定了數(shù)據(jù)加載完成后需要執(zhí)行的回調函數(shù)。該函數(shù)包含了三個參數(shù)，其語法格式如下：$(selector).load(URL[,data],function(response,status,xhr){//回調函數(shù)的內部代碼略});12.3.1jQueryAJAXload()方法2. 回調函數(shù)的使用其中三個參數(shù)具體解釋如下：response參數(shù)為調用成功時的結果內容；status參數(shù)為調用的狀態(tài)，例如"success"或"error"等；xhr參數(shù)表示XMLHttpRequest對象。12.3.1jQueryAJAXload()方法2. 回調函數(shù)的使用【例12-2】jQueryAJAXload()方法中回調函數(shù)的使用12.3.2jQueryAJAXget()方法jQueryAJAXget()方法通過HTTPGET請求從服務器端獲取數(shù)據(jù)，其語法格式如下：$.get(URL[,data][,success][,dataType]);12.3.2jQueryAJAXget()方法其中URL為必填參數(shù)，data、success和dataType均為可選參數(shù)。具體解釋如下：URL參數(shù)用于規(guī)定請求的URL地址；data參數(shù)用于規(guī)定與請求一起發(fā)送給服務器的字符串，該字符串以鍵/值對集合的形式組成；success參數(shù)用于規(guī)定請求成功后需要執(zhí)行的函數(shù)，如果沒有該參數(shù)則返回的數(shù)據(jù)將被忽略；dataType參數(shù)用于規(guī)定從服務器端獲取的數(shù)據(jù)類型，例如xml、json、html等。12.3.2jQueryAJAXget()方法如果沒有數(shù)據(jù)需要發(fā)送給服務器，也無需處理獲取的數(shù)據(jù)，可以只使用參數(shù)URL。例如：上述代碼表示向demo.php請求數(shù)據(jù)，但是獲取到的數(shù)據(jù)將被忽略不做任何處理。$.get("demo.php");12.3.2jQueryAJAXget()方法如果需要處理獲取到的數(shù)據(jù)，則需要追加參數(shù)success。例如：

上述代碼表示向demo.php請求數(shù)據(jù)，并使用alert()方法將獲取到的數(shù)據(jù)顯示在警告消息框中。其中function(data)中的參數(shù)data就是獲取到的數(shù)據(jù)返回值，在實際開發(fā)的過程中可以對其進行更為具體的處理。$.get("demo.php",function(data){alert("獲取的數(shù)據(jù)是："+data);});12.3.2jQueryAJAXget()方法如果有數(shù)據(jù)需要一并提交給服務器，則需要再追加參數(shù)data。例如：上述代碼表示向demo.php請求數(shù)據(jù)，并將name和age值發(fā)送給服務器等待處理，最后使用alert()方法將獲取到的數(shù)據(jù)顯示在警告消息框中。其中{name:"Tom",age:"23"}中的元素個數(shù)、名稱和值均可以自定義，元素之間用逗號隔開即可。$.get("demo.php",{name:"Tom",age:"23"},function(data){alert("獲取的數(shù)據(jù)是："+data);});12.3.2jQueryAJAXget()方法【例12-3】jQueryAJAXget()方法的使用12.3.2jQueryAJAXget()方法jQueryAJAXpost()方法通過HTTPPOST請求從服務器端獲取數(shù)據(jù)，其語法格式如下：$.post(URL[,data][,success][,dataType]);12.3.3jQueryAJAXpost()方法其中URL為必填參數(shù)，data、success和dataType均為可選參數(shù)。具體解釋如下：URL參數(shù)用于規(guī)定請求的URL地址；data參數(shù)用于規(guī)定與請求一起發(fā)送給服務器的字符串，該字符串以鍵/值對集合的形式組成；success參數(shù)用于規(guī)定請求成功后需要執(zhí)行的函數(shù)名稱，如果沒有該參數(shù)則返回的數(shù)據(jù)將被忽略；dataType參數(shù)用于規(guī)定從服務器端獲取的數(shù)據(jù)類型，例如xml、json、html等。12.3.3jQueryAJAXpost()方法post()與get()方法的區(qū)別在于請求方式不同，而代碼格式基本一致，因此這里不再進行更多的舉例，讀者可以參照前一節(jié)get()方法的示例來對比學習。12.3.3jQueryAJAXpost()方法在實際開發(fā)中，如果只是獲取數(shù)據(jù)或查詢結果建議使用get()方法；如果需要更新資源信息建議使用post()方法。還可以基于以下兩點考慮選用get()還是post()方法：HTTPGET請求只能向服務器發(fā)送1024字節(jié)的數(shù)據(jù)；HTTPPOST請求可以向服務器發(fā)送大量數(shù)據(jù)（理論上無限制，實際根據(jù)瀏覽器的類型上限稍有不同）。HTTPGET請求提交的數(shù)據(jù)將明文顯示在URL上；通過HTTPPOST提交的數(shù)據(jù)會被放在HTTP包的包體中，更為安全。12.3.3jQueryAJAXpost()方法【例12-4】jQueryAJAXpost()方法的使用12.3.4jQueryAJAXajax()方法jQueryAJAXajax()是最完整的AJAX請求方法，包含了一系列參數(shù)的配置，可供開發(fā)者自定義更為靈活的個性化要求。事實上，之前所學習的load()、get()和post()方法均為ajax()方法的簡化版（省略了一些固定不變的參數(shù)配置），當簡化版無法解決某些設置要求的時候可以選擇使用ajax()方法進一步配置。12.3.4jQueryAJAXajax()方法其語法格式如下：該方法內部由一個或多個名稱/值組成，這些參數(shù)的數(shù)量、順序以及參數(shù)值均可以由開發(fā)者根據(jù)實際開發(fā)需求自定義。$.ajax({ name1:value1, name2:value2,

…… nameN:valueN});12.3.4jQueryAJAXajax()方法jQueryajax()可以使用的參數(shù)名稱如表12-1所示。jQueryajax()方法內部還可以添加一個或多個函數(shù)，可使用的函數(shù)名稱如表12-2所示。12.3.4jQueryAJAXajax()方法常見用法示例如下：$.ajax({ url:"demo.php",//請求的URL地址 method:"POST",//請求的方式 data:{username:"admin",password:"123"},//需要發(fā)送給服務器端的數(shù)據(jù) dataType:"json",//從服務器端獲取數(shù)據(jù)的類型 success:function(){ alert("請求成功！"); }, error:function(){ alert("請求失??！"); }});上述代碼就是一個自定義的ajax()方法，開發(fā)者可以在此模板的基礎上修改參數(shù)值或追加其他參數(shù)內容。12.3.4jQueryAJAXajax()方法【例12-5】jQueryAJAXajax()方法的使用12.3.5jQueryAJAX更多方法介紹除了上述常用方法外，關于jQueryAJAX更多方法如表12-3所示。方法名稱解釋ajaxComplete()當AJAX請求完成時觸發(fā)ajaxComplete事件，并執(zhí)行該函數(shù)。ajaxError()當AJAX請求完成并發(fā)生錯誤時觸發(fā)ajaxError事件，并執(zhí)行該函數(shù)。ajaxSend()當AJAX請求發(fā)送之前觸發(fā)ajaxSend事件，并執(zhí)行該函數(shù)。jQuery.ajaxSetup()設置未來AJAX請求的默認值，也可以寫作$.ajaxSetup()。ajaxStart()當?shù)谝粋€AJAX請求開始時觸發(fā)ajaxStart事件，并執(zhí)行該函數(shù)。ajaxStop()當所有AJAX請求均完成時觸發(fā)ajaxStop事件，并執(zhí)行該函數(shù)。ajaxSuccess()當AJAX請求成功時觸發(fā)ajaxSuccess事件，并執(zhí)行該函數(shù)。jQuery.getJSON()通過HTTPGET請求從服務器獲取JSON類型的數(shù)據(jù)返回值，也可以寫作$.getJSON()。jQuery.getScript()通過HTTPGET請求從服務器獲取JavaScript文件，并執(zhí)行該文件。也可以寫作$.getScript()。jQuery.param()將數(shù)組或對象的序列化，也可以寫作$.param()。serialize()將表單中的數(shù)據(jù)序列化為字符串。serializeArray()將表單中的數(shù)據(jù)序列化為JSON類型數(shù)據(jù)。12.3.5jQueryAJAX更多方法介紹param()方法的作用示例如下：//臨時創(chuàng)建一個對象x：varx=newObject();="Mary";x.age="20";//開始對x進行序列化varresult=$.param(x);//返回值為name=Mary&age=2012.3.5jQueryAJAX更多方法介紹serialize()和serializeArray()方法均是對表單元素進行序列化，前者返回字符串、后者返回JSON類型的數(shù)據(jù)。12.3.5jQueryAJAX更多方法介紹例如，一個包含了2個文本輸入框的簡易表單如下：<form><inputtype="text"name="productName"value="iPhone6s"/><br/><inputtype="text"name="productPrice"value="6800"/></form>12.3.5jQueryAJAX更多方法介紹使用serialize()將其中的數(shù)據(jù)值序列化：使用serializeArray()將其中的數(shù)據(jù)值序列化：varresult=$("form").serialize();//返回值為productName=iPhone6s&productPrice=6800varx=$("form").serializeArray();//此時x為數(shù)組對象result=JSON.stringify(x);//將x轉換為JSON字符串，其返回值如下一行所示//[{"name":"productName","value":"iPhone6s"},{"name":"productPrice","value":"6800"}]需要注意的是，serialize()和serializeArray()方法均需要表單中的控件具有name屬性方可正常使用。12.4jQueryAJAX事件AJAX請求發(fā)送時會依次觸發(fā)多個事件，這些事件按照作用范圍可以分為局部事件與全局事件兩種類型。12.4jQueryAJAX事件AJAX事件按照被觸發(fā)的順序如表所示。12.4jQueryAJAX事件局部事件可以通過前面12.3.4節(jié)介紹的ajax()方法來觸發(fā)并自定義函數(shù)內容，例如：$.ajax({ beforeSend:function(){ alert("AJAX請求即將處理！"); }, success:function(){ alert("AJAX請求成功！"); }});12.4jQueryAJAX事件全局事件可以通過bind()和unbind()方法進行事件綁定與解除。例如，為按鈕元素<button>綁定AJAX全局事件：上述代碼表示當AJAX請求發(fā)送之前將按鈕元素的文字內容更新為“加載中……”。$("button").bind("ajaxSend",function(){$(this).text("加載中……");});12.4jQueryAJAX事件也可以直接為指定的元素調用全局事件對應的函數(shù)方法來觸發(fā)，例如：上述代碼表示當AJAX請求已經完成時更新按鈕元素的文字內容為“已提交”。$("button").ajaxComplete(){$(this).text("已提交");});12.5階段案例：簡易單詞查詢12.5.1案例需求12.5.2準備工作12.5.3界面設計12.5.4邏輯實現(xiàn)12.5.5案例思考12.5.1案例需求使用jQueryAJAX技術制作一款簡易單詞查詢應用，用戶輸入英文單詞提交后可查到單詞的中英文釋義，如果后臺數(shù)據(jù)中沒有此單詞信息則提示用戶未查到。12.5.2準備工作1. 服務器準備本次案例我們使用PC端安裝第三方免費的phpStudyv8.1套件來模擬服務器效果，該套件的下載安裝以及啟動步驟見第12章“12.2.1臨時服務器的搭建”。然后在服務器端的根目錄WWW下新建一個自定義目錄（例如dict）作為本次項目的存放路徑，這樣后續(xù)的文件在瀏覽器中的訪問地址就是：這樣服務器的部署工作就完成了。http://localhost/dict/文件名或者/dict/文件名12.5.2準備工作2. 詞庫文件制作綜合考慮每個單詞需要的通用字段總結如下：word：英文單詞，例如“apple”；meaning_CN：單詞的中文釋義，例如“n.蘋果”；meaning_EN：單詞的英文釋義，例如“n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin.”。12.5.2準備工作2. 詞庫文件制作本次案例將使用較為簡單的JSON格式文件進行單詞數(shù)據(jù)的存儲，開發(fā)者若學過數(shù)據(jù)庫技術也可以自行改造使用數(shù)據(jù)庫對詞庫數(shù)據(jù)進行存儲。JSON格式是一種“名稱：值”對形式的數(shù)據(jù)格式，例如：上述代碼表示存儲了學號（stuID）為123，姓名（name）為zhangsan的數(shù)據(jù)信息。也可以用來存儲多條記錄，例如：{“stuID”:”123”,“name”:”zhangsan”}[{“stuID”:”123”,“name”:”zhangsan”},{“stuID”:”456”,“name”:”lisi”},{“stuID”:”789”,“name”:”wangwu”}]這里最外層追加了中括號表示數(shù)組，每個數(shù)組元素就是原先用大括號括住的每條記錄，且數(shù)組元素之間使用逗號斷開。12.5.2準備工作2. 詞庫文件制作節(jié)選部分單詞的JSON格式效果如下：1. [2. {3. "word":"apple",4. "meaning_CN":"n.蘋果",5. "meaning_EN":"n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin."6. },7. …8. ]注：上述示例單詞可供參考，其他數(shù)據(jù)文件見本書配套代碼包。12.5.2準備工作2. 詞庫文件制作最后，將制作好的數(shù)據(jù)存到文本文檔中并另存為UTF-8格式的JSON文件，名稱可以自定義，例如就叫做data.json。此時詞庫素材就制作完成了，請在服務器端的WWW/dict目錄下新建目錄api（僅為示例，也可以自定義其他目錄）并將詞庫文件存放進去等待使用。12.5.2準備工作3. 接口制作本示例選用了php技術來制作接口文件，并自定義文件名為search.php，同樣需要UTF-8編碼格式。接口文件search.php的內容如下：1. <?php2. //讀取小程序端請求的單詞3. $word=$_GET['word'];4. 5. //讀取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串強制轉為PHP數(shù)組8. $dict_data=json_decode($json_data,true);9.

//查詢結果

$result['status_code']=0;//0表示未查到，1表示查到了

$result['meaning_CN']='';$result['meaning_EN']='';

//遍歷查單詞

foreach($dict_dataas$obj){ //如果查到了

if($obj['word']==$word){ //更新查詢結果

$result['status_code']=1; $result['meaning_CN']=$obj['meaning_CN']; $result['meaning_EN']=$obj['meaning_EN']; //停止遍歷

break; }}//返回解釋(轉成json格式傳輸)echojson_encode($result);?>上述內容表示根據(jù)請求參數(shù)word的取值查找data.json詞庫文件，并把相同單詞word的單詞釋義返回給客戶端。12.5.2準備工作3. 接口制作此時接口文件就制作完成了，請把search.php放在服務器端的WWW/dict/api目錄下等待使用。開發(fā)者也可以先使用瀏覽器自測接口是否有效，在瀏覽器地址欄輸入：瀏覽器運行結果如下：http://localhost/dict/api/search.php?word=apple或者/dict/api/search.php?word=apple如果可以看到其中的“status_code”取值為1，就說明查到了對應的題目數(shù)據(jù)。12.5.3界面設計本案例主要分成表單和查詢結果兩個區(qū)域，其中表單內部包含單行文本輸入框、提交按鈕和重置按鈕。結構如圖所示。12.5.3界面設計創(chuàng)建一個HTML文件，文件名可自定義，例如Dictionary.html。在HTML5中使用<divclass="container">元素聲明查單詞整體區(qū)域，在其中嵌套表單<formid="form01">和段落元素<pid="result">分別表示表單和查詢結果區(qū)域，相關代碼如下：1. <body>2. <!--標題-->3. <h3>簡易單詞查詢程序</h3>4. <!--水平線-->5. <hr>6. <!--查單詞區(qū)域-->7. <divclass="container">8. <!--1表單-->9. <formid="form01"></form>10. <!--2查詢結果-->11. <pid="result"></p>12. </div>13. </body>12.5.3界面設計繼續(xù)補充表單中的內容，代碼片段如下：其中單行文本輸入框<input>的placeholder屬性是用于在未輸入內容時顯示的提示。1. <!--1表單-->2. <formid="form01">3. <!--1-1單行文本輸入框-->4. <inputid="word"type="text"placeholder="請輸入您要查詢的單詞"/>5. <!--1-2提交按鈕-->6. <inputtype="submit"value="提交"/>7. <!--1-3重置按鈕-->8. <inputtype="reset"value="重置"/>9. </form>12.5.3界面設計本示例使用CSS外部樣式表規(guī)定頁面樣式。在css文件夾中創(chuàng)建dict.css文件，并在HTML5文件的<head>首尾標簽中聲明對CSS文件的引用。相關HTML5代碼片段如下：在CSS外部樣式表中設置公共樣式，相關CSS代碼如下：1. <head>2. <metacharset="utf-8">3. <title>簡易單詞查詢程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. </head>1. /*公共樣式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了邊框和內邊距*/4. }5. body{6. text-align:center;/*文本居中*/7. }12.5.3界面設計為表單區(qū)域和查詢結果段落區(qū)域設置樣式，相關CSS代碼如下：1. /*表單*/2. form{3. width:100%;/*寬度100%自適應父容器*/4. height:90px;/*高度90px*/5. }6. /*單行文本輸入框*/7. input[type=text]{8. width:100%;/*寬度100%自適應父容器*/9. height:30px;/*高度30px*/10. margin:10px0;/*外邊距上下10px左右0px*/11. font-size:16px;/*字體大小16px*/12. }13. /*查詢結果文本*/14. #result{15. width:100%;/*寬度100%自適應父容器*/16. height:auto;/*高度自適應內容*/17. text-align:left;/*文本左對齊*/18. }12.5.3界面設計此時CSS樣式設置就全部完成了，由于谷歌內核的瀏覽器禁止跨域訪問，請將本次項目案例涉及到的html、css目錄及內部文件、js目錄及內部文件全部放置到服務器WWW/dict目錄下，然后在瀏覽器中訪問：此時頁面就可以正確顯示出來了，如圖所示。http://localhost/dict/Dictionary.html或/dict/Dictionary.html12.5.4邏輯實現(xiàn)本示例使用外部JS文件實現(xiàn)jQuery相關代碼。在js文件夾中創(chuàng)建dict.js文件，并在Dictionary.html文件的<head>首尾標簽中聲明對JS文件的引用。相關HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>簡易單詞查詢程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/dict.js"></scr