基于Ajax的多級聯動研究

許俊

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

關鍵詞：Ajax;異步;JavaScript;聯動

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

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

1 Ajax的工作原理

Ajax即Asynchronous JavaScript And XML，異步JavaScript和XML，是指一種創建交互式、快速動態網頁應用的網頁開發技術，無須重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

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

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

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

2地區信息xml文件和頁面的結構

地區信息為省市縣三級結構的area.xml文件，行政單位涵蓋了全國的省直轄市、市、區縣轄區。設置四級節點，area是根節點，id是root，二級province節點是省直轄市，id是省（直轄市的拼音），value是省份行政代碼。三級city節點是地級市，其id是拼音或縮寫。四級county節點是縣區，是三級行政單位的最低級，不再向下聯動，故無須id，如果將來把行政地區要擴展到鄉鎮級，則需要設置county的id。地區xml文檔結構如下圖示意。

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

3三級聯動的設計思路

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

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

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

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

4三級聯動的Javascript實現

函數fillProvince、fillCity、fillCounty分別填充省、城市、縣區選擇框，getNodeValue查詢子節點的id、文本節點值。

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

var xhr = false;//異步對象

var url = "area.xml";

var nodeId="";//area.xml文件中的節點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文件的根節點，所有省

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

//創建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;

}

}

}

//創建向服務器的請求并發送

if （xhr）{

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

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

xhr.send（null）;

} else {

document.getElementById（"updateArea"）.innerHTML="不能創建XMLHTTPRequest";

}

}

//返回服務器響應的內容

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

function getNodeValue（） {

var outMsg = "";

if （xhr.readyState == 4） {

if （xhr.status == 200） {

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

var id = nodeId;

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

for （var i = 0; i

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

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

//設置下拉選擇框選項文本和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無刷新多級聯查詢的應用研究[J].信息與電腦（理論版），2019（22）：62-63.

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

【通聯編輯：光文玲】