許俊

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

關(guān)鍵詞：Ajax;異步;JavaScript;聯(lián)動(dòng)

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

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

1 Ajax的工作原理

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

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

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

Ajax 應(yīng)用程序獨(dú)立于瀏覽器和平臺，基于JavaScript、XML、HTML與 CSS 在 Ajax 中使用的 Web 標(biāo)準(zhǔn)定義，并被所有的主流瀏覽器支持。Ajax工作原理如下圖。

2地區(qū)信息xml文件和頁面的結(jié)構(gòu)

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

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

3三級聯(lián)動(dòng)的設(shè)計(jì)思路

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

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

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

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

4三級聯(lián)動(dòng)的Javascript實(shí)現(xiàn)

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

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

var xhr = false;//異步對象

var url = "area.xml";

var nodeId="";//area.xml文件中的節(jié)點(diǎn)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é)點(diǎn)，所有省

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

makeRequest（url）;

}

//點(diǎn)擊選擇省框，填充城市選擇框

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）;

}

}

//點(diǎn)擊市選擇框，填充縣選擇框

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）;

}

}

//異步請求服務(wù)器文件

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)建向服務(wù)器的請求并發(fā)送

if （xhr）{

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

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

xhr.send（null）;

} else {

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

}

}

//返回服務(wù)器響應(yīng)的內(nèi)容

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

function getNodeValue（） {

var outMsg = "";

if （xhr.readyState == 4） {

if （xhr.status == 200） {

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

var id = nodeId;

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

for （var i = 0; i

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

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

//設(shè)置下拉選擇框選項(xiàng)文本和value屬性

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

}

} else {

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

}

} else {

var outMsg = "報(bào)錯(cuò)代碼： " + xhr.status;

}

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

}

}

參考文獻(xiàn)：

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

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

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