📄 16-1 使用javascript载入xml文件.htm

📁 JAVASCRIPT完全自学手册,中源码的验证修订实例
💻 HTM
字号:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312" />
<title>16-1  使用JavaScript载入XML文件</title>
<style>
* { font-size:12px; font-family:宋体, Arial; } /*规定了所有的字体样式*/
body { overflow:auto; } a { color:blue; }
li { line-height:20px; }
table { border-collapse:collapse; }
td { padding:5px 10px; border:1px solid #333; }
#data_count { text-decoration:underline; color:blue; }
</style>
<script>
var xml, data_ready, xml_file_path;

//函数“$”根据指定字符串获取相应ID的对象
function $(str){ return(document.getElementById(str)); }
//窗体载入完毕时初始化
window.onload = function(){
    try{
        xml = new ActiveXObject("Microsoft.XMLDOM");
    }catch(e){
        alert("无法创建XML控件对象，请检查您的安全设置");
    }
}

//弹出一个选择文件对话框
function selectFile(){
    var obj, strFilePath;
    //创建一个新的文件选择输入框
    obj = document.createElement("input");
    obj.type = "file"; obj.style.display = "none";
    document.body.appendChild(obj);
    //模拟其鼠标单击事件，以弹出文件选择对话框
    obj.click();
    strFilePath = obj.value;
    //移除文件选择输入框
    document.body.removeChild(obj);
    return(strFilePath);
}

//载入外部XML文件
function loadXML(){
    var strFilePath, nodes;
    //获取用户输入的XML文件地址
    strFilePath = selectFile();
    if(!strFilePath)return;
    //尝试载入XML文件
    try{
        xml.load(strFilePath);
    }catch(e){
        //如果载入失败则提示
        alert("XML文件载入失败，原因是：\r\n\r\n\t" + e.description);
        return;
    }
    //标识数据载入状态为“已载入”，并保存XML数据源文件地址
    data_ready = true; xml_file_path = strFilePath;
    //显示数据内容
    show_data(xml.selectNodes("\/\/图书"));
}

//根据XML节点，显示数据内容
function show_data(nodes){
    var fn, tb, row, cell, obj;
    //清空数据区域
    $("data").innerHTML = "";
    //清空查询部分的“域名”列表
    while($("fieldname").options.length>1)$("fieldname").removeChild($("fieldname").options[1])
    //显示数据长度
    $("data_count").innerHTML = nodes.length;
    //如果节点集为空则返回
    if(nodes.length==0)return;
    //生成数据表格
    tb = document.createElement("table");
    $("data").appendChild(tb);
    //生成表头
    row = tb.insertRow();
    for(var i=0; i<nodes[0].childNodes.length; i++){
        cell = row.insertCell();
        cell.innerHTML = nodes[0].childNodes[i].tagName;
        cell.style.fontWeight = "bold";
        $("fieldname").options[$("fieldname").options.length] = new Option(nodes[0].childNodes[i].tagName, nodes[0].childNodes[i].tagName);
    }
    //填写数据内容
    for(var i=0; i<nodes.length; i++){
        //对于每一条数据，插入一个新的表格行
        row = tb.insertRow();
        for(var j=0; j<nodes[i].childNodes.length; j++){
            //对于每一个字段，插入一个新单元格
            cell = row.insertCell();
            //生成新的链接对象
            obj = document.createElement("A");
            obj.href = "#";
            //将XML节点绑定在链接对象的自定义属性“xmlNode”上
            obj.xmlNode = nodes[i].childNodes[j];
            //将XML节点内容赋值于链接对象“innerHTML”属性
            obj.innerHTML = obj.xmlNode.text;
            //绑定链接的单击事件
            obj.onclick = data_text_onclick;
            cell.appendChild(obj);
        }
    }
}

//单击数据内容进行相应修改
function data_text_onclick(){
    var newText = prompt("请输入新的字段值：", this.innerHTML);
    //如果没有输入或者输入为空字符串则取消修改
    if(!newText)return;
    //执行修改，同时改变XML节点内容与HTML节点内容
    this.innerHTML = this.xmlNode.text = newText;
}

//执行查询
function doSearch(){
    var nodes;
    //如果没有载入过XML文件则返回
    if(!data_ready)return;
    //使用Xpath查询符合条件的节点
    nodes = xml.selectNodes("\/\/图书["+$("fieldName").value+"='"+$("fieldValue").value+"']");
    show_data(nodes);
}

//保存xml控件到原文件
function doSave(){
    //如果没有载入过XML文件则返回
    if(!data_ready)return;
    try{
        xml.save(xml_file_path);
    }catch(e){
        //如果保存失败则提示
        alert("XML文件保存失败，原因是：\r\n\r\n\t" + e.description);
    }
}

</script>
</head>
<body>
<ol>
    <li>选择需要的文件：
        <a href="#" onclick="loadXML();return(false);">选择</a>
    </li>
    <li>数据条目数量：
        <span id="data_count">0</span>条
    </li>
    <li>筛选:
        <a href="#" onclick="show_data(xml.selectNodes('\/\/图书'));return(false);">显示所有</a>
        <br>
        <select id="fieldName">
            <option value="*">-=请选择筛选字段=-</option>
        </select>
        <input id="fieldValue">
        <input type="button" value="筛选并显示" onclick="doSearch();">
    </li>
    <li>数据:<br>
        <div id="data"></div>
    </li>
    <li>保存:<br>
        <input type="button" value="保存" onclick="doSave();">
    </li>
</ol>

</body>
</html>
💿 文件大小 522 K
👤 上传用户 zbcs1025
📂 所属分类 JavaScript
🏷️ 相关标签

#JAVASCRIPT #源码
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -