游乐游手机版
首页/前端开发/文章详情

ExtJS下动态生成XML并兼容火狐的写法

时间:2026-06-16 07:02
动态生成XML时,ActiveXObject仅兼容IE,火狐不支持。推荐使用标准DOMAPI如document implementation createDocument,可在内存中构建XML树,无需本地文件,实现跨浏览器兼容,并提升安全性与可维护性。

在Web开发中,动态生成XML文档是常见需求,但不同浏览器的实现差异显著。过去多数开发者习惯使用ActiveXObject创建XML,然而该对象仅适用于IE浏览器,在Firefox(火狐)中完全无法运行。为了实现跨浏览器兼容,同时避免依赖本地XML文件,最可靠的方案是采用标准DOM API动态构建XML。下面这个函数正是为此设计——纯前端生成,跨浏览器兼容。

function getXml() { 
    // 获取输入值 
    var name = textName.getValue(); 
    var pwd = textPwd.getValue(); 
    // 初始化对象 
    var xmlDoc = document.implementation.createDocument("", "", null); 
    xmlDoc.async="false"; // 取消xml在还没有完成数据完整填写就提交的动作

    // xml头部编写 
    var header=xmlDoc.createProcessingInstruction("xml","version='1.0'"); 
    xmlDoc.appendChild(header);

    // 创建子树 
    var root = xmlDoc.createElement("loginInfo"); 
    var username = xmlDoc.createElement("userName"); 
    var userpassword = xmlDoc.createElement("passWord"); 
    // 创建子树文本内容 
    var usernameText=xmlDoc.createTextNode(name); 
    var passwordText=xmlDoc.createTextNode(pwd);

    // 子树文本内容挂载 
    username.appendChild(usernameText); 
    userpassword.appendChild(passwordText);

    // 子树节点挂载 
    root.appendChild(username); 
    root.appendChild(userpassword);

    // 根内容挂载 
    xmlDoc.appendChild(root);

    // 返回xml文本内容 
    return xmlDoc; 
};

而传统的基于IE专有对象的写法则存在严重的兼容缺陷——仅支持IE,其他浏览器一概不理:

var dom= new ActiveXObject()

若将上述ActiveXObject代码部署到Firefox中,将直接引发运行时错误。因此,为确保Firefox(火狐)用户也能正常使用,同时实现无需本地XML文件、完全动态生成,上述标准DOM方案才是最佳选择。该方案不限定浏览器类型,直接在内存中高效构建XML树,不依赖任何外部文件。

来源:https://www.jb51.net/article/35237.htm
上一篇ExtJS3下拉框取值与文本实例详解 下一篇ExtJS中Ext.Direct加载与提交错误排查方法
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
HTML双英雄图精准居中与并排对齐实战指南
前端开发 · 2026-07-04

HTML双英雄图精准居中与并排对齐实战指南

本文详解如何使用CSS Flexbox将两个英雄图在页面中水平居中、等高对齐,并保持50px间距,解决justify-content align-items单独作用于子元素无效的问题。 想让两个视觉冲击力十足的英雄图在首页并排居中,是提升首屏吸引力的经典设计。但很多开发者都踩过同一个坑:直接在 `

Flexbox实现div水平垂直居中的方法
前端开发 · 2026-07-04

Flexbox实现div水平垂直居中的方法

使用 Flexbox 实现 div 的水平垂直居中,推荐在父容器上设置 display: flex,并配合 justify-content: center(控制主轴居中)与 align-items: center(控制交叉轴居中),同时确保父容器拥有明确高度,例如 min-height: 100vh

React循环中正确管理多个独立Modal实例的方法
前端开发 · 2026-07-04

React循环中正确管理多个独立Modal实例的方法

在 React 开发中,我们常常会遇到这样的场景:需要在一个列表循环里渲染多个弹窗(Modal)。如果处理不当,点击任何一个按钮,都会导致所有的弹窗同时打开或关闭,这显然不是我们想要的效果。问题的根源在于状态管理:当多个 Modal 实例共享同一份控制其显示隐藏的状态时,它们的行为就被捆绑在了一起。

鼠标滚动切换图片与7秒无操作自动轮播完整教程
前端开发 · 2026-07-04

鼠标滚动切换图片与7秒无操作自动轮播完整教程

本文介绍如何结合鼠标滚轮交互与定时器机制,实现图片在用户滚动时手动切换、7秒无操作后自动轮播的双重功能,并提供可复用、多实例支持的现代化 JavaScript 解决方案。 在网页开发中,图片轮播组件虽然常见,但许多实现方案在用户体验上仍存遗憾。例如,完全依赖用户滚动切换的轮播,当用户停止操作专注查看

输入新城市自动清除旧天气数据实现方法
前端开发 · 2026-07-04

输入新城市自动清除旧天气数据实现方法

本文详解如何借助 JavaScript 在用户切换查询城市时,自动清空先前展示的天气信息,避免新旧数据混杂叠加,从而优化单页应用的交互体验。 在基于 OpenWeather API 打造天气查询工具时,很多开发者都会遇到一个颇为棘手的小问题:用户查完一个城市后,紧接着输入另一个城市名称,页面上新旧天