基于Ajax的多級聯(lián)動研究

許俊

摘要：對行政地區(qū)信息使用Ajax與后臺服務器進行xml數(shù)據(jù)交換，不重新加載整個網(wǎng)頁，實現(xiàn)網(wǎng)頁內(nèi)的地區(qū)列表異步更新。地區(qū)信息為省市縣三級結構的xml文件，根據(jù)節(jié)點的id查詢其子節(jié)點的id和文本，并設置為下拉選擇框的屬性值，下拉選擇框的change事件監(jiān)聽用戶的選擇，填充下一級選擇框元素，達到多級動態(tài)聯(lián)動。

關鍵詞：Ajax;異步;JavaScript;聯(lián)動

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2020）36-0236-02

1 Ajax的工作原理

Ajax即Asynchronous JavaScript And XML，異步JavaScript和XML，是指一種創(chuàng)建交互式、快速動態(tài)網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，無須重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換，Ajax可以使網(wǎng)頁實現(xiàn)異步更新?？梢栽诓恢匦录虞d整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

使用JavaScript 向服務器提出請求并處理響應而不阻塞用戶核心對象XMLHttpRequest。通過這個對象，JavaScript在不需要刷新頁面的情況下，就可以產(chǎn)生局部刷新的效果。

Ajax獨立于Web 服務器，在瀏覽器與Web 服務器之間使用異步數(shù)據(jù)傳輸HTTP 請求，網(wǎng)頁從服務器請求少量的信息，而不是整個頁面，應用程序更小更快更友好。

Ajax 應用程序獨立于瀏覽器和平臺，基于JavaScript、XML、HTML與 CSS 在 Ajax 中使用的 Web 標準定義，并被所有的主流瀏覽器支持。Ajax工作原理如下圖。

2地區(qū)信息xml文件和頁面的結構

地區(qū)信息為省市縣三級結構的area.xml文件，行政單位涵蓋了全國的省直轄市、市、區(qū)縣轄區(qū)。設置四級節(jié)點，area是根節(jié)點，id是root，二級province節(jié)點是省直轄市，id是?。ㄖ陛犑械钠匆簦?，value是省份行政代碼。三級city節(jié)點是地級市，其id是拼音或縮寫。四級county節(jié)點是縣區(qū)，是三級行政單位的最低級，不再向下聯(lián)動，故無須id，如果將來把行政地區(qū)要擴展到鄉(xiāng)鎮(zhèn)級，則需要設置county的id。地區(qū)xml文檔結構如下圖示意。

網(wǎng)頁文件三個select標簽作為省市縣的容器，id分別為province、city、county。

3三級聯(lián)動的設計思路

定義全局變量。頁面加載完成之后，初始化頁面元素，用省直轄市名稱填充id為province的select對象。為province、city選擇框添加change事件監(jiān)聽器。三個選擇框的默認選項設為第一項。

初始化填充省份選擇框的設計是，創(chuàng)建XMLHTTPRequest對象異步讀取web服務器上的area.xml省份，根據(jù)id得到root節(jié)點的所有省份子節(jié)點的id和名稱。并以省名稱為選項的text，id為value，把省份的名稱、id添加到省份選擇框。

province選擇框change事件發(fā)生時，得到被選中項的value，作為讀取xml文件city節(jié)點的父節(jié)點id，根據(jù)此id得到city節(jié)點的所有城市子節(jié)點的id和名稱。并以城市名稱為選項的text，id為value，把城市的名稱、id添加到城市選擇框。

city選擇框change事件發(fā)生時，得到被選中項的value，作為讀取xml文件county節(jié)點的父節(jié)點id，根據(jù)此id得到county節(jié)點的所有縣區(qū)子節(jié)點的id和名稱。并以county名稱為選項的text，id為value，把縣區(qū)的名稱、id添加到縣區(qū)選擇框。

4三級聯(lián)動的Javascript實現(xiàn)

函數(shù)fillProvince、fillCity、fillCounty分別填充省、城市、縣區(qū)選擇框，getNodeValue查詢子節(jié)點的id、文本節(jié)點值。

window.addEventListener（"load"， initAll， false）;

var xhr = false;//異步對象

var url = "area.xml";

var nodeId="";//area.xml文件中的節(jié)點id值

var pageSelectElementId;//index.html頁面中select下拉框ID：province、city、county

function initAll（） {//初始化

fillProvince（）;

document.getElementById（"province"）.addEventListener（"change"， fillCity， false）;

document.getElementById（"city"）.addEventListener（"change"， fillCounty， false）;

document.getElementById（"province"）.selectedIndex = 0;

document.getElementById（"city"）.selectedIndex = 0;

document.getElementById（"county"）.selectedIndex = 0;

}

//填充省份選擇框

function fillProvince（） {

nodeId = "root";//xml文件的根節(jié)點，所有省

pageSelectElementId = "province";//決定填充的是省份選擇框

makeRequest（url）;

}

//點擊選擇省框，填充城市選擇框

function fillCity（） {

var option = this.options[this.selectedIndex];

var province = option.value;

if （province ！= ""） {

document.getElementById（"city"）.options.length = 1;

document.getElementById（"county"）.options.length = 1;

nodeId = option.value;

pageSelectElementId="city";

makeRequest（url）;

}

}

//點擊市選擇框，填充縣選擇框

function fillCounty（） {

var option = this.options[this.selectedIndex];

var city = option.value;

if （city ！= ""） {

document.getElementById（"county"）.options.length = 1;

nodeId = option.value;

pageSelectElementId ="county";

makeRequest（url）;

}

}

//異步請求服務器文件

function makeRequest（url） {

//創(chuàng)建XMLHTTPRequest對象xhr

if （window.XMLHttpRequest） {

xhr = new XMLHttpRequest（）;

} else{

if（window.ActiveXObject）{

try{

xhr = new ActiveXObject（"Microsoft.XMLHTTP"）;

}catch（e）{

document.getElementById（"updateArea"）.innerHTML = e.message;

}

}

}

//創(chuàng)建向服務器的請求并發(fā)送

if （xhr）{

xhr.addEventListener（"readystatechange"， getNodeValue， false）;

xhr.open（"GET"， url， true）; //true：默認值，異步，false：同步。

xhr.send（null）;

} else {

document.getElementById（"updateArea"）.innerHTML="不能創(chuàng)建XMLHTTPRequest";

}

}

//返回服務器響應的內(nèi)容

//對響應的文件類型是xml，根據(jù)元素的ID，遍歷元素的子節(jié)點，查詢子節(jié)點的id、文本節(jié)點值。

function getNodeValue（） {

var outMsg = "";

if （xhr.readyState == 4） {

if （xhr.status == 200） {

if （xhr.responseXML&&xhr.responseXML.childNodes.length> 0） {? ? ? ?//根據(jù)指定的ID，讀其子節(jié)點

var id = nodeId;

var elements = xhr.responseXML.getElementById（id）.children;

for （var i = 0; i

var chilId = elements[i].getAttribute（"id"）; //子節(jié)點的id

var nodeValue= elements[i].firstChild.nodeValue; //文本節(jié)點值各級名稱

//設置下拉選擇框選項文本和value屬性

document.getElementById（pageSelectElementId）.options.add（new Option（nodeValue，chilId））;

}

} else {

var outMsg = "文件類型不是xml";

}

} else {

var outMsg = "報錯代碼： " + xhr.status;

}

document.getElementById（"updateArea"）.innerHTML = outMsg;

}

}

參考文獻：

[1] 童緒軍，陳濤.基于AJAX UpdatePanel無刷新多級聯(lián)查詢的應用研究[J].信息與電腦（理論版），2019（22）：62-63.

[2] 王志娟，班婭萌，平金珍.基于AJAX技術和JAVAEE的分頁查詢優(yōu)化[J].信息通信，2019，32（1）：118-119.

【通聯(lián)編輯：光文玲】