Ajax與服務(wù)器（JSON）通信
Ajax這個(gè)詞，不代表任何東西，它僅僅是稱(chēng)呼一系列促進(jìn)客戶(hù)端與服務(wù)器通信的技術(shù)時(shí)所用的一個(gè)術(shù)語(yǔ)。服務(wù)器通信時(shí)Ajax技術(shù)的核心內(nèi)容，其目標(biāo)就是從客戶(hù)端向服務(wù)器發(fā)送信息，并接受后者的回傳，以求在此過(guò)程中創(chuàng)建出更好地打用戶(hù)體驗(yàn)來(lái)。Ajax之前所有的服務(wù)器通信都是在服務(wù)器上完成的，所以那是若想重繪頁(yè)面的一部分，要么使用iframe（已淘汰），要么刷新整個(gè)頁(yè)面。這兩種方式都稱(chēng)不上是良好的用戶(hù)體驗(yàn)。
Ajax提供了兩類(lèi)服務(wù)器通信手段：同步通信和異步通信。
異步通信Ajax比同步通信要常見(jiàn)的多了，大概是98%的使用頻次。異步意味著此類(lèi)Ajax調(diào)用并不和其他任務(wù)同時(shí)觸發(fā)，這種通信行為發(fā)生在后臺(tái)，具備相當(dāng)?shù)莫?dú)立性，與頁(yè)面和web應(yīng)用程序相互分離。
使用異步調(diào)用，可以避免同步調(diào)用的阻塞性，它不需要與頁(yè)面中的其他HTTP請(qǐng)求擠在一起處理。
XMLHttpRequest對(duì)象
XMLHttpRequest對(duì)象是所有Ajax調(diào)用的核心。我們的目的是使用Ajax技術(shù)異步獲取JSON中的數(shù)據(jù)，并以適當(dāng)?shù)男问綄⑵湔宫F(xiàn)出來(lái)：
//創(chuàng)建ajax通信服務(wù)器對(duì)象function getHTTPObject(){ "use strict"; //注意使用嚴(yán)格模式 var xhr; //使用主流的XMLHttpRequest通信服務(wù)器對(duì)象 if(window.XMLHttpRequest){ xhr = new window.XMLHttpRequest(); //如果是老版本ie，則只支持Active對(duì)象 } else if(window.ActiveXObject){ xhr = new window.ActiveXObject("Msxml2.XMLHTTP"); } //將通信服務(wù)器對(duì)象返回 return xhr;}跨瀏覽器的兼容問(wèn)題：微軟Ie起初發(fā)明了XMLHttp對(duì)象，那就導(dǎo)致了IE5、IE6只支持ActiveXObject對(duì)象，所以要考慮對(duì)它的兼容問(wèn)題。
創(chuàng)建Ajax調(diào)用
首先，我在本地的data目錄下創(chuàng)建好了Salad.json文件，等待Ajax程序去調(diào)用它：
//ajax JSON Saladvar ingredient = { "fruit":[ { "name" : "apple", "color" : "green" }, { "name" : "tomato", "color" : "red" }, { "name" : "peach", "color" : "pink" }, { "name" : "pitaya", "color" : "white" }, { "name" : "lettuce", "color" : "green" } ]};然后要做的是向服務(wù)器發(fā)送請(qǐng)求和接受傳回的數(shù)據(jù)：
在接收到返回的服務(wù)器通信對(duì)象“xhr”后，我們緊接著要做的是使用readystatechange 事件對(duì)通信對(duì)象 “xhr”進(jìn)行 Ajax請(qǐng)求狀態(tài)和服務(wù)器狀態(tài)，當(dāng)readystate狀態(tài)請(qǐng)求完成和status狀態(tài)服務(wù)器正常時(shí)在進(jìn)行之后 的通信工作。
//輸出ajax調(diào)用所返回的json數(shù)據(jù)var request = getHTTPObject();request.onreadystatechange = function(){ "use strict"; //當(dāng)readyState全等于“4”狀態(tài)，status全等于“200”狀態(tài) 代表服務(wù)器狀態(tài)服務(wù)及客戶(hù)端請(qǐng)求正常，得以返回 if(request.readyState ===4 || request.status ===200 ){ //為了方便起見(jiàn)，將數(shù)據(jù)打印到瀏覽器控制臺(tái)（F12查看） console.log(request.responseText); } //使用GET方式請(qǐng)求.json數(shù)據(jù)文件，并且不向服務(wù)器發(fā)送任何信息 request.open("GET","data/ingredient.json",true); request.send(null);};Ajax也通過(guò)GET和POST方法進(jìn)行調(diào)用，GET方式會(huì)把數(shù)據(jù)暴露在URL之中，所以它的處理工作較少；POST相對(duì)較安全，但性能不如GET。 接下來(lái)分別使用 open()和 send()方法對(duì)服務(wù)器請(qǐng)求數(shù)據(jù)文件和發(fā)送數(shù)據(jù)。
通常在實(shí)際的開(kāi)發(fā)項(xiàng)目中，不可能僅僅有一個(gè)Ajax調(diào)用。為了復(fù)用，為了方便起見(jiàn)，我們需要將這個(gè)Ajax程序封裝成復(fù)用函數(shù)，在這里我傳入了一個(gè)outputElement參數(shù)，用于給用戶(hù)提示等待；還傳入了一個(gè)callback參數(shù)，用于傳入一個(gè)回調(diào)函數(shù)，根據(jù)用戶(hù)在搜索框鍵入的關(guān)鍵字在JSON文件中進(jìn)行匹配，將合適的數(shù)據(jù)渲染到頁(yè)面響應(yīng)的位置：
//將其封裝成一個(gè)供調(diào)用函數(shù)function ajaxCall(dataUrl,outputElement,callback){ "use strict"; //這是一段截取的js（ajax）代碼 var request = getHTTPObject(); //我想要提醒大家的是：當(dāng)網(wǎng)頁(yè)的某個(gè)區(qū)域在向服務(wù)器發(fā)送http請(qǐng)求的過(guò)程中，要有一個(gè)標(biāo)識(shí)提醒用戶(hù)正在加載... outputElement.innerHTML = "Loding..."; //也可以根據(jù)各位的需求添加一個(gè)循環(huán)小動(dòng)畫(huà) request.onreadystatechange = function () { if(request.readyState ===4 || request.status ===200){ //將request.responseText返回的數(shù)據(jù)轉(zhuǎn)化成JSON格式 var contacts = JSON.parse(request.responseText); //如果回調(diào)函數(shù)是function類(lèi)型，則使用callback函數(shù)處理返回的JSON數(shù)據(jù) if(callback === "function"){ callback(contacts); } } }; request.open("GET","data/ingredient.json",true); request.send(null);}然后調(diào)用 ajaxCall()：
//調(diào)用程序，我們將使用Ajax請(qǐng)求的JSON數(shù)據(jù)顯示到HTML文檔的某個(gè)區(qū)域中！(function () { "use strict"; //下面將給出DOM語(yǔ)句相對(duì)應(yīng)的HTML代碼 var searchForm = document.getElementById("search-form"), searchField = document.getElementById("q"), getAllButton = document.getElementById("get-all"), target = document.getElementById("output"); var search = { salad : function(event){ var output = document.getElementById("output"); //請(qǐng)求的JSON數(shù)據(jù)文件名，輸出到HTML的區(qū)域，檢索數(shù)據(jù)文件的核心function語(yǔ)句 ajaxCall('data/ingredient.json','output',function(data){ //searchValue為搜索條目，準(zhǔn)備循環(huán)檢索 var searchValue = searchField.value, //找到食材條目（詳見(jiàn)JSON數(shù)據(jù)文件） fruit = data.fruit, //統(tǒng)計(jì)水果的數(shù)量 count = fruit.length, i; //阻止默認(rèn)行為 event.preventDefault(); //初始化 target.innerHTML = ""; if(count > 0 || searchValue !==""){ for(i = 0;i < count;i++){ var obj = fruit[i], //將name與searchvalue值相匹配，如果值不等于 -1，那么就確定兩者相匹配 inItfount = obj.name.indexOf(searchValue); //將JSON中匹配的數(shù)據(jù)規(guī)范的寫(xiě)入到DOM if(isItfount != -1){ target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>' } } } }) } }; //事件監(jiān)聽(tīng)器，監(jiān)聽(tīng)鼠標(biāo)單擊事件后調(diào)用函數(shù)并請(qǐng)求JSON數(shù)據(jù)文件 searchField.addEventListener("click",search.salad,false); })();Ajax 所對(duì)應(yīng)的HTML文檔：
<h1>制作沙拉所需要的食材</h1> <form action="" method="get" id="search-form"> <div class="section"> <label for="q">搜索食材</label> <input id="q" name="q" required placeholder="type a name"> </div> <div class="button-group"> <button type="submit" id="btn-search">搜索</button> <button type="button" id="get-all">get all contacts</button> </div> </form> <div id="output"></div>
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
