解决Js解析xml浏览器不兼容问题及省市区三级联动实现

来源：互联网发布：tensorflow 预测结果编辑：程序博客网时间：2024/06/01 20:12

首相分析一下，浏览器不兼容的原因：

不同的浏览器在加载xml是的方法不同

//IE浏览器

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

// firefox opera其他浏览器

var xmlDoc = document.implementation.createDocument("","",null);

Firefox，opera以及其他一些浏览器，会把空的空白或换行作为文本节点来处理，而 Internet Explorer 不会这样。

处理空白和换行的方式

for(var i=0;i<provinces.length;i++){ //在输出所有的子节点的时候

if(provinces[i].nodeType==1){//在这里判断该节点是否是元素节点

}

这样做就OK啦！

要说明的是 opera11.01以下这样做都是兼容的；但是在opera 11.01是不兼容的

因为在opera11.01版本中会出现xmlDoc.async<window.onload的异常信息

XMLHttpRequest to files is disabled for security reasons.

==> Set "Allow File XMLHttpRequest" with opera:config#UserPrefs|AllowFileXMLHttpRequest to disable this security check.

有两种解决方案

1，就是在服务器页面中访问，开启服务器，进行访问，

2，在opera11.01中设置User Prefs属性

1>、打开opera浏览器,在地址栏中输入:about:cofig

2>、在列举的首选项编辑器中找到: User Prefs

3>、点击打开User Prefs 找到里边的:Allow File XMLHttpRequest并勾选

4、勾选上之后点击下面的保存按钮即可解决;

就以省市区三级联动为例，代码实现如下：

创建一个city.xml

</city>

</province>

</city>

</city>

</province>

</city>

</city>

</province>

</city>

</city>

</city>

</city>

</city>

</city>

</city>

</city>

</city>

</city>

</city>

</province>

太多省略。。。

可以在下面下载完整的city,xml

</root>

在javascript中解析

function getxmlDoc() {

var xmlDoc;

try { //IE浏览器

xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

} catch (err) {

try { //firefox 等浏览器

xmlDoc = document.implementation.createDocument("", "", null);

} catch (e) {

alert("你的浏览器版本太低了。。。");

}

//关闭异步加载

xmlDoc.async = false;

//加载XML

xmlDoc.load("city1.xml");

return xmlDoc;

}

window.onload = function() {

//获得dom中的对象

var sheng = document.getElementById("sheng");

var shi = document.getElementById("shi");

var xian = document.getElementById("xian");

//定义函数对象

var xmlDoc = getxmlDoc();

//获得根节点

var root = xmlDoc.documentElement;

//通过根节点获取子节点的集合

var provinces = root.childNodes;

//遍历省份

for ( var i = 0; i < provinces.length; i++) {

//判断该节点是不是元素节点，同时也实现不同浏览器的兼容性

if (provinces[i].nodeType == 1) {

//创建option属性

var shengopt = document.createElement("option");

//添加文本

shengopt.appendChild(document.createTextNode(provinces[i]

.getAttribute("name")));

//创建属性及属性值

shengopt.setAttribute("value", provinces[i]

.getAttribute("postcode"));

//添加到div中

sheng.appendChild(shengopt);

}

//点击省份触发oncheange事件

sheng.onchange = function() {

//获取省节点的option对象的集合

var shengs = sheng.options;

//获取option对象的selectedIndex对象（下标值）

var num = shengs.selectedIndex;

//清除市区；

shi.length = 0;

xian.length = 0;

// 根据获得的节点获取其value值

var ppostcode = shengs[num].getAttribute("value");

//遍历省份

for ( var i = 0; i < provinces.length; i++) {

//判断该节点是不是元素节点同时也为了实现不同浏览器的兼容性

if (provinces[i].nodeType == 1) {

//通过节点获取postcode值

var postcode = provinces[i].getAttribute("postcode");

//判断postcode是否相同

if (postcode == ppostcode) {

//通过省份获得城市节点的集合

var cities = provinces[i].childNodes;

shi.length = 0;

//遍历城市

for ( var i = 0; i < cities.length; i++) {

//判断给节点是否为元素节点

if (cities[i].nodeType == 1) {

//创建option对象

var shiopt = document.createElement("option");

//添加文本

shiopt.appendChild(document

.createTextNode(cities[i]

.getAttribute("name")));

//创建属性及赋值

shiopt.setAttribute("value", cities[i]

.getAttribute("postcode"));

//添加到div中

shi.appendChild(shiopt);

}

break;

}

//点击市触发oncange事件

shi.onchange = function() {

//获得市option对象集合

var shis = shi.options;

//通过option获得selesctedIndex对象

var nums = shis.selectedIndex;

//通过节点获取value值

var spostcode = shis[nums].getAttribute("value");

//遍历省

for ( var i = 0; i < provinces.length; i++) {

if (provinces[i].nodeType == 1) {

var cities = provinces[i].childNodes;

for ( var j = 0; j < cities.length; j++) {

if(cities[j].nodeType == 1){

var postcode = cities[j].getAttribute("postcode");

if (postcode == spostcode) {

xian.length = 0;

var areas = cities[j].childNodes;

for ( var k = 0; k < areas.length; k++) {

if (areas[k].nodeType == 1) {

var xianopt = document.createElement("option"); xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));

xianopt.setAttribute("value",areas[k].getAttribute("postcode"));

xian.appendChild(xianopt);

}

break;

}

</script>

Html中显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>cities.html</title>

</head>

<body>

<div>

</select> </span>

</select> </span>

</select> </span>

</div>

</body>

</html>