Five ‘s Weblog

October 11, 2007

Ajax, IE and Firefox!

Filed under: Programming — by powerdream5 @ 1:42 am
Tags: , , ,

       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:

10_1_2007.JPG

        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

10_2_2007.JPG

Advertisements

3 Comments »

  1. Hey, great article it totally helped me out!

    I had trouble interpreting the XML with FF, but you pointed out the subtle differences it has with IE which got me on the right track.

    Thanks a lot!

    Comment by Wouter — July 3, 2008 @ 4:34 pm |Reply

  2. Really it is a good article

    Comment by Ashraf Abu Aisheh — April 6, 2010 @ 2:59 am |Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: