Ajax, IE and Firefox!

       As a web programmer, I believe that you must have complained the differences between IE and firefox. Sometimes, the web you designed looks perfect in one web browser, but looks ugly in other browsers. Furthermore, because IE and Firefox parse javascript in different ways, when we use the technology of ajax, sometimes, we have to program for IE and firefox separately.
      Today, I am going to show an example of using javascript to parse XML files in both IE and firefox, so the the application would behave the same in both of the web browsers.

      The interface of the example looks like:

        Each time, after selecting a country from the drop list of country, a request will be sent to the server for the xml files. For this example, I prepare two xml files, china.xml and united_state.xml separately. Then, the client will get the response from the server, and it will parse the xml file and display the cities of the coutry in the list under the lable of city.

//china.xml
<?xml version=”1.0″ encoding=”gb2312″?>
<cities>
      <city>Beijing</city>
      <city>Shanghai</city>
      <city>Chengdu</city>
      <city>Wuhan</city>
      <city>Changsha</city>
</cities>

//united_state.xml
<?xml version=”1.0″ encoding=”gb2312″?>
<cities>
      <city>New York</city>
      <city>Sanfrancisco</city>
      <city>Los Angeles</city>
      <city>Philadelphia</city>
      <city>Chicago</city>
      <city>Seattle</city>
      <city>Houston</city>
</cities>

The core javascript code are showed below:

    //create the ajax coonnection
    //for IE
    var req = null;
    if(window.ActiveXObject)
    {
          req = new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    //for Firefox
    else if(window.XMLHttpRequest)
    {
          req = new XMLHttpRequest();
    }
    //define the file requested
    var url = document.form1.country.options[selected].value+”.xml”;
    //define which function to deal with the result of the request
    req.onreadystatechange = getCities;
    //using Post or get method to send the request,we use get method here
    req.open(“GET”,url, true);
    //send request to the server
    //there is a trick, when you don’t want to send any parameters
    //you need to use null, otherwise, there will be some problem in Firefox
       req.send(null);

function getCities(){
   //when the request is complete
   if(req.readyState == 4){
       //check if the request is success
      if(req.status == 200){
            //req.responseText represents the returning text from the server
           var response = req.responseText;
           var xmlDoc;
           var value;
           document.form1.city.options.length = 0;
          //for IE
         if (window.ActiveXObject)
        {
             //crate xml docuemnt object in IE
            xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);
            xmlDoc.async=”false”;
            xmlDoc.loadXML(response);
            var x = xmlDoc.documentElement;
            //navigate the xml docuemnt object
            //take notice: firstly, we assign 0 to i, then i adds 1 each time
           for (var i=0;i<x.childNodes.length;(i = i+1))
          {
                 value = x.childNodes[i].childNodes[0].nodeValue;
                 //add the city to the list one by one
                 document.form1.city.options[i] = new Option(value,value);
          }    
       }
        //for Firefox
       else
       {
           //create the xml docuemnt object in firefox
           var parser=new DOMParser();
           xmlDoc=parser.parseFromString(response,”text/xml”);
           var x = xmlDoc.documentElement;
           var num = 0;
           //take notice: firstly, we assign 1 to i, then i adds 2 each time
           for (var i=1;i<x.childNodes.length;(i = i+2))
           {
                 value = x.childNodes[i].childNodes[0].nodeValue;
                 //add the city to the list one by one
                 document.form1.city.options[num] = new Option(value,value);
                 num++;
            }   
         }
       }
     }
  }

The html code is listed below:

<form name=”form1″>
     <table width=”300″ border=”0″>
          <tr>
              <td width=”150″ align=”center”>Country</td>
              <td width=”150″ align=”center”>City</td>
          </tr>
          <tr>
              <td valign=”top” align=”center”>
                    <select name=”country” onchange=”getTheCity()”>
                         <option></option>
                         <option value=”china”>China</option>
                         <option value=”united_state”>United State</option>
                    </select>
              </td>
               <td>
                     <select name=”city” size=”10″ style=”width:140px”>
                     </select>
               </td>
          </tr>
     </table>
 </form>

You can see the perfomance of this example through this link