motivación:
Ahora hagamos un pequeño ejemplo de aplicación de XML en IE: resolviendo el problema de vinculación de menús desplegables dobles. Quizás el ejemplo más común sea seleccionar una provincia y luego cambiar las opciones de ciudad, así que intentemos usar XML para completarlo.
Algunas de las funciones que presenté antes se implementaron directamente usando archivos XML+XSL. Es posible que no esté muy familiarizado con su uso, por lo que esta vez usaré HMTL+XML, con la esperanza de que todos comprendan más claramente: "XML puede ser así. ¡simple!" :)
Material:
Hay 2 archivos vinculados al menú de selección de volumen XML: Citys.xml y CitySelect.htm.
Las funciones son:
Después de seleccionar una provincia, la ciudad correspondiente se puede mostrar automáticamente, lo cual es conveniente para los usuarios, mejora efectivamente la interacción de datos y hace que su página sea más colorida.
Efecto:
Navegar aquí
Código:
Ciudades.xml
<?xml versión="1.0" codificación="gb2312"?>
<China>
<Estado id="1" nombre="Jiangxi">
<Ciudad>Jiujiang</Ciudad>
<Ciudad>Nanchang</Ciudad>
<Ciudad>Lushan</Ciudad>
<Ciudad>Jingdezhen</Ciudad>
</Estado>
<Estado id="2" nombre="Pekín">
<Ciudad>Pekín Oeste</Ciudad>
<Ciudad>Juyongguan</Ciudad>
<Ciudad>Jardín Tsinghua</Ciudad>
<Ciudad>Zhoukoudian</Ciudad>
</Estado>
<Estado id="3" nombre="Fujian">
<Ciudad>Fuzhou</Ciudad>
<Ciudad>Xiamen</Ciudad>
<Ciudad>Zhangzhou</Ciudad>
</Estado>
<Estado id="4" nombre="Gansu">
<Ciudad>Lanzhou</Ciudad>
<Ciudad>Lomen</Ciudad>
<Ciudad>Jiayuguan</Ciudad>
</Estado>
<Estado id="5" nombre="Guangdong">
<Ciudad>Cantón</Ciudad>
<Ciudad>Shenzhen</Ciudad>
<Ciudad>Dongguan</Ciudad>
<Ciudad>Shipai</Ciudad>
</Estado>
<Estado id="6" nombre="Anhui">
<Ciudad>Hefei</Ciudad>
<Ciudad>Huangshan</Ciudad>
<Ciudad>Colina de Kowloon</Ciudad>
<Ciudad>Ma'anshan</Ciudad>
</Estado>
</China>
Función personalizada
CitySelect.htm
: ChooseState
(Lea el nombre de la provincia en los datos XML y agréguelo a la lista desplegable de SelState)
funciónElegirEstado()
{
fuente var;
var sourceName = "Ciudades.xml";
var source = new ActiveXObject('Microsoft.XMLDOM'); //Crea una instancia de analizador MSXML
fuente.async = falso;
source.load(nombrefuente); //Cargar documento XML
root = source.documentElement; //Establece el elemento del documento como elemento del nodo raíz.
sortField=root.selectNodes(" //@name "); //Busca todos los nodos cuyos atributos contengan nombre ");
for(var i=0;i<sortField.length;++i) //Agregar nombres de provincias a la lista desplegable
{
var oOption = document.createElement('OPCIÓN');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelState.options.add(oOption);
}
ElijaCiudad();
}
Función personalizada: ElegirCiudad
(Lea el nombre de la ciudad correspondiente en los datos XML según el nombre de la provincia seleccionada actualmente y agréguelo a la lista desplegable SelCity)
funciónElegirCiudad()
{
x=form1.SelState.selectedIndex; //Leer las opciones actuales del cuadro desplegable de provincia
y=form1.SelState.options[x].valor;
sortField=root.selectNodes("//State[@name='"+y+"']/City&q uot;); //Busca todos los nodos de ciudad bajo el nodo Estado cuyo valor de atributo de nombre sea igual al parámetro y
for(var i=form1.SelCity.options.length-1;i>=0;--i) //Deshacer el elemento de la lista original
{
formulario1.SelCity.opciones.eliminar(i)
}
for(var i=0;i<sortField.length;++i) //Agregar nombre de ciudad a la lista desplegable
{
var oOption = document.createElement('OPCIÓN');
oOption.text = " "+sortField[i].text+" ";
oOption.value = sortField[i].text;
form1.SelCity.options.add(oOption);
}
}
Código fuente del formulario
<BODY onLoad="Elegir estado()">
<FORMAcción="" método="publicación" id="form1" nombre="form1">
<SELECT nombre="SelState" id="SelState" onchange="Elegir ciudad()" >
</SELECCIONAR>
<SELECCIONAR nombre="SelCiudad" id="SelCiudad" >
</SELECCIONAR>
</FORM>
</BODY>
Posdata:
Cuando comencé a aprender XML, tenía la misma confusión que todos los demás: "Aprendí XML, pero ¿cómo debo usarlo?" Esta pregunta me ha obstaculizado durante mucho, mucho tiempo...
Porque el comercio electrónico. y el desarrollo de software son mi especialidad, pensé que sería mejor comenzar con lo que estoy más familiarizado. Entonces implementé algunas de las funciones más utilizadas en la construcción de sitios web en XML. ¡Tú también puedes hacerlo!