网站首页  词典首页

请输入您要查询的论文:

 

标题 基于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.

    【通联编辑:光文玲】

随便看

 

科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。

 

Copyright © 2004-2023 puapp.net All Rights Reserved
更新时间:2025/3/11 22:12:53