Ajax與服務(wù)器（JSON）通信實例代碼
Ajax與服務(wù)器（JSON）通信
Ajax這個詞，不代表任何東西，它僅僅是稱呼一系列促進客戶端與服務(wù)器通信的技術(shù)時所用的一個術(shù)語。服務(wù)器通信時Ajax技術(shù)的核心內(nèi)容，其目標(biāo)就是從客戶端向服務(wù)器發(fā)送信息，并接受后者的回傳，以求在此過程中創(chuàng)建出更好地打用戶體驗來。Ajax之前所有的服務(wù)器通信都是在服務(wù)器上完成的，所以那是若想重繪頁面的一部分，要么使用iframe（已淘汰），要么刷新整個頁面。這兩種方式都稱不上是良好的用戶體驗。
Ajax提供了兩類服務(wù)器通信手段：同步通信和異步通信。
異步通信Ajax比同步通信要常見的多了，大概是98%的使用頻次。異步意味著此類Ajax調(diào)用并不和其他任務(wù)同時觸發(fā)，這種通信行為發(fā)生在后臺，具備相當(dāng)?shù)莫毩⑿?，與頁面和web應(yīng)用程序相互分離。
使用異步調(diào)用，可以避免同步調(diào)用的阻塞性，它不需要與頁面中的其他HTTP請求擠在一起處理。
XMLHttpRequest對象
XMLHttpRequest對象是所有Ajax調(diào)用的核心。我們的目的是使用Ajax技術(shù)異步獲取JSON中的數(shù)據(jù)，并以適當(dāng)?shù)男问綄⑵湔宫F(xiàn)出來：
//創(chuàng)建ajax通信服務(wù)器對象
function getHTTPObject(){
"use strict"; //注意使用嚴(yán)格模式
var xhr;
//使用主流的XMLHttpRequest通信服務(wù)器對象
if(window.XMLHttpRequest){
xhr = new window.XMLHttpRequest();
//如果是老版本ie，則只支持Active對象
} else if(window.ActiveXObject){
xhr = new window.ActiveXObject("Msxml2.XMLHTTP");
}
//將通信服務(wù)器對象返回
return xhr;
}
跨瀏覽器的兼容問題：微軟Ie起初發(fā)明了XMLHttp對象，那就導(dǎo)致了IE5、IE6只支持ActiveXObject對象，所以要考慮對它的兼容問題。
創(chuàng)建Ajax調(diào)用
首先，我在本地的data目錄下創(chuàng)建好了Salad.json文件，等待Ajax程序去調(diào)用它：
//ajax JSON Salad
var ingredient = {
"fruit":[
{
"name" : "apple",
"color" : "green"
},
{
"name" : "tomato",
"color" : "red"
},
{
"name" : "peach",
"color" : "pink"
},
{
"name" : "pitaya",
"color" : "white"
},
{
"name" : "lettuce",
"color" : "green"
}
]
};
然后要做的是向服務(wù)器發(fā)送請求和接受傳回的數(shù)據(jù)：
在接收到返回的服務(wù)器通信對象“xhr”后，我們緊接著要做的是使用readystatechange 事件對通信對象 “xhr”進行 Ajax請求狀態(tài)和服務(wù)器狀態(tài)，當(dāng)readystate狀態(tài)請求完成和status狀態(tài)服務(wù)器正常時在進行之后 的通信工作。
//輸出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ù)及客戶端請求正常，得以返回
if(request.readyState ===4 || request.status ===200 ){
//為了方便起見，將數(shù)據(jù)打印到瀏覽器控制臺（F12查看）
console.log(request.responseText);
}
//使用GET方式請求.json數(shù)據(jù)文件，并且不向服務(wù)器發(fā)送任何信息
request.open("GET","data/ingredient.json",true);
request.send(null);
};
Ajax也通過GET和POST方法進行調(diào)用，GET方式會把數(shù)據(jù)暴露在URL之中，所以它的處理工作較少；POST相對較安全，但性能不如GET。 接下來分別使用 open()和 send()方法對服務(wù)器請求數(shù)據(jù)文件和發(fā)送數(shù)據(jù)。
通常在實際的開發(fā)項目中，不可能僅僅有一個Ajax調(diào)用。為了復(fù)用，為了方便起見，我們需要將這個Ajax程序封裝成復(fù)用函數(shù)，在這里我傳入了一個outputElement參數(shù)，用于給用戶提示等待；還傳入了一個callback參數(shù)，用于傳入一個回調(diào)函數(shù)，根據(jù)用戶在搜索框鍵入的關(guān)鍵字在JSON文件中進行匹配，將合適的數(shù)據(jù)渲染到頁面響應(yīng)的位置：
//將其封裝成一個供調(diào)用函數(shù)
function ajaxCall(dataUrl,outputElement,callback){
"use strict"; //這是一段截取的js（ajax）代碼
var request = getHTTPObject();
//我想要提醒大家的是：當(dāng)網(wǎng)頁的某個區(qū)域在向服務(wù)器發(fā)送http請求的過程中，要有一個標(biāo)識提醒用戶正在加載...
outputElement.innerHTML = "Loding..."; //也可以根據(jù)各位的需求添加一個循環(huán)小動畫
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類型，則使用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請求的JSON數(shù)據(jù)顯示到HTML文檔的某個區(qū)域中！
(function () {
"use strict";
//下面將給出DOM語句相對應(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");
//請求的JSON數(shù)據(jù)文件名，輸出到HTML的區(qū)域，檢索數(shù)據(jù)文件的核心function語句
ajaxCall('data/ingredient.json','output',function(data){
//searchValue為搜索條目，準(zhǔn)備循環(huán)檢索
var searchValue = searchField.value,
//找到食材條目（詳見JSON數(shù)據(jù)文件）
fruit = data.fruit,
//統(tǒng)計水果的數(shù)量
count = fruit.length,
i;
//阻止默認行為
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ī)范的寫入到DOM
if(isItfount != -1){
target.innerHTML += '<p>'+obj.name+'<a href="mailto:" '+obj.color+'>'+obj.color+'</a></p>'
}
}
}
})
}
};
//事件監(jiān)聽器，監(jiān)聽鼠標(biāo)單擊事件后調(diào)用函數(shù)并請求JSON數(shù)據(jù)文件
searchField.addEventListener("click",search.salad,false);
})();
Ajax 所對應(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>
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年
本文介紹的這個javaScript年份下拉列表框內(nèi)容為當(dāng)前年份及前后50年，默認顯示當(dāng)前年份，大家可以學(xué)習(xí)下2014-05-05
Javascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實例
下面小編就為大家?guī)硪黄狫avascript農(nóng)歷與公歷相互轉(zhuǎn)換的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
Bootstrap實現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項目中用到了一款帶輪播組件，功能非常齊全，可以設(shè)置各種標(biāo)題樣式、動畫效果、輪播時間、開始暫停等功能，下面小編通過本文給大家詳細介紹下實現(xiàn)過程，需要的朋友參考下吧2016-11-11
這篇文章主要為大家詳細介紹了cropperjs實現(xiàn)裁剪圖片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript淺層克隆與深度克隆的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
JavaScript實現(xiàn)加載導(dǎo)出CZML文件詳解
CZML是一種基于?JSON?的文件格式,用于描述地理空間數(shù)據(jù)和時間動態(tài)場景,這篇文章為大家詳細介紹了如何使用JavaScript實現(xiàn)CZML文件的加載與導(dǎo)出,需要的可以了解下2025-02-02
在javascript的函數(shù)中，除了聲明時定義的形參之外，每個函數(shù)還可以接收兩個附加的參數(shù)：this和arguments。這里就講一下this的作用以及不同場景下它的不同指向。2016-10-10
在日常前端開發(fā)過程中，常用到頁面列表加載。這篇文章主要為大家介紹三種常用方法，分別是分頁加載、按鈕加載以及滾動加載，需要的可以參考一下2022-09-09
這篇文章主要為大家介紹了JS中var let聲明范圍區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
今天小編就為大家分享一篇關(guān)于js中實例與對象的區(qū)別講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01