Talking about the considerations of JavaScript parsing XML file

Before in the Chongqing agricultural business time to do the project, involves a cascade of functions, need to read from the XML data stored in the Select box.

The beginning of the time has been wrong, first of all, Firefox error, but IE normal, then Firefox browser does not error but not display, and IE still show. After a careful study, finally solved the problem, I would like to summarize below, I hope to bring more people to help. First of all, yes. Page LoadTo read the data from the XML and deposit the option in select. The following is the detailed code first step: The following is the XML code name I defined as School.xml

<?XML version= "1.0" encoding= "UTF-8"?><Schools>  <Provincename= "Beijing">  <School>Peking university</School>  <School>Tsinghua university</School>  <School>Ruc</School>  <School>Beijing Jiaotong University</School>  <School>Beijing University of Technology</School>  <School>Beihang University</School>  <School>Peking University (Ministry of Medicine)</School>  <School>Beijing Institute</School>  <School>Beijing University</School>  <School>Central University of Nationalities</School> </Province> <Provincename= "Tianjin">  <School>Nankai University</School>  <School>Tianjin University</School>  <School>Tianjin University of Science and Technology</School>  <School>Tianjin University of Technology</School>  <School>China Civil Aviation University</School> </Province> <Provincename= "Shanghai City">  <School>Fudan university</School>  <School>Tongji university</School>  <School>Shanghai jiaotong university</School>  <School>East China University</School>  <School>Shanghai Polytechnic University</School> </Province></Schools>

The second step: The following is the JavaScript code

<script type= "Text/javascript" >window.onload=function(){     //declaring XML Objects    varXMLHTTP; //ie7+, Firefox, Chrome, Opera, Safari, etc. all support xmlhttprequest, so use new XMLHttpRequest () to get objects directly    if(window. XMLHttpRequest) {XMLHTTP=NewXMLHttpRequest (); }    //but IE6, IE5, etc. do not support xmlhttprequest, so get it in the following way, create an empty Microsoft XML Document Object    Else{//code for IE6, IE5XMLHTTP =NewActiveXObject ("Microsoft.XMLHTTP"); }         //Open XML Document My words are the path to my XML document<s:property value= "Webpath"/>/resource/xml/Schools.xml//this is followed by false, which means: Turn off asynchronous loading so that the parser does not continue the execution of the script until the document is fully loadedXmlhttp.open ("GET", "<s:property value=" Webpath "/>/resource/xml/schools.xml",false);          Xmlhttp.send (); varXmlDom =Xmlhttp.responsexml; //gets the root node of the XML file    varRoot =xmldom.documentelement; //gets the provincial node under the root node    varProvinces =Root.childnodes; varProvince = document.getElementById ("province");  for(vari = 0; i < provinces.length; i++) {          //gets the value of the Name property of the province node        if(Provinces[i].nodetype = = 1){            varName = Provinces[i].getattribute ("name"); //Create an option            varopt = document.createelement ("option")); //add text to optionOpt.appendchild (document.createTextNode (name)); //Add to parent nodeProvince.appendchild (opt); }    }            varCities = document.getElementById ("Prb_schoolname"); Province.onchange=function(){          varPCE = document.getElementById ("province"); varopts =pce.options; //Gets the selected option based on the subscript        varOPT1 =Opts[pce.selectedindex]; varName =opt1.innerhtml;  for(vari = 0; i < provinces.length; i++) {              //gets the value of the Name property of the province node            if(Provinces[i].nodetype = = 1){                varname1 = Provinces[i].getattribute ("name"); if(Name = =name1) {Cities.length= 1;//empty every time you change.                    varPros =Provinces[i]; varCitys =Pros.childnodes;  for(varj = 0; J < Citys.length; J + +) {                       if(Citys[j].nodetype = = 1){       //Create an option       varCityName; if(citys[j].text) {CityName=Citys[j].text; }Else{CityName=Citys[j].textcontent}varopt = document.createelement ("option")); //add text to optionOpt.appendchild (document.createTextNode (CityName)); //Add to parent nodeCities.appendchild (opt); }                     }                  }              }          }      }  } </script>

The third step: The following is the code in the body of the HTML page

<span>                       <SelectID= "Province"name= "Province">                           <option>Please select the province</option>                       </Select>                   </span>                   <span>                       <SelectID= "Prb_schoolname"name= "Prb_schoolname">                           <option>Please select a school</option>                       </Select>                   </span>

If you have a better way, we hope to exchange experience and progress together.

Note: There are typically two implementations of Ajax and XML when cascading.　　　 If the data is fixed, it is recommended to do so in XML, because XML is loaded once, and will not be read repeatedly, more efficiently than in the database! However, if the data is dynamic, the user can freely modify the data, it is recommended to use AJAX, because the XML read and write is very consumption performance, no database read and write efficiency, and is not suitable for large amounts of data read and write frequently.

Talking about the considerations of JavaScript parsing XML file