Ajax and IE7 problems

Published:
Today I am discussing AJAX problems in IE7 and I bet this will helps many guys out here who have problems with AJAX work. Lets start with the discovery of problem and then we will talk about its different solutions.

My last two projects included AJAX work. In, first one, search result were displayed dynamically. It took me fewer hours to code that part of the project and when it started working ( in Firefox. I always recommend Firefox ), I was about to jump for joy. It was looking so cool and awesome and that "loading..." effect was fabulous. It was late night when I finished this task. So, after a few minutes of success I was in bed.

The next morning, when I was checking my task for bugs. I was really happy. Because it was working flawlessly. After testing in major browsers. last, step was to test this in IE. My heart starts beating really fast when I test my products in IE... :) Hopefully you know why.

Tested in IE8..result: passed!...Tested in IE7...result PASSED....Oh! oh! wait a minute. It just accepted first AJAX call and it is doing nothing for next AJAX calls in IE7. I was hooked at the edge. What the hell dude! I was about to finalize this part :(

Then I tried to make tweaks in code to make it work. Like changing sequence of function calls, opening connection, writing success function and then sending request and different other sequence.

After searching some solutions and reasons for this on Google and hitting wall hard throughout the day. Finally, I found the solution.

Tthe problem is that IE7 ignores the no-cache header and save the resource to its cache using request URL as key. Thus, Your every second call using same URL will gets ignored in IE7.

Suppose your code is :

if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                              xmlhttp=new XMLHttpRequest();
                          }
                          else{// code for IE6, IE5
                      //        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                          try{
                                   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE 5
                               } catch (e) {
                                   try {
                                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6
                                   } catch (e) {
                                       alert("...your error message here...");
                                       return false;
                                   }
                               }
                          }
                              var rpag = "anypage.php?param1=somveval";
                              xmlhttp.open("GET",rpag,true);
                              xmlhttp.send();
                              xmlhttp.onreadystatechange=function(){
                                  if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                      xmlDoc=xmlhttp.responseText;
                                      xmlhttp.abort();
                                  }
                              }

Open in new window



Here, notice this line of code:

        var rpag = "anypage.php?param1=somveval";

Open in new window


Now, IE7 will saves 'rpag' value as key and will rejects your every next call in which you have used same 'rpag' value(that is you requesting URL).

This means if you call this URL

        var rpag = "anypage.php?param1=1";

Open in new window


it will works and will gets you the results, and if next call is

1)        var rpag = "anypage.php?param1=2";

Open in new window


This will works too and will gets you the results too. (Marking this line as point 1)

Now, if third call is

        var rpag = "anypage.php?param1=1";

Open in new window


Now you will get no results in IE7. (Mark it as point 2)

At point 1 we gets result because first AJAX call URL and second AJAX call URL was different. param=1 and param=2, This 1 and 2 makes the two URLs different and it works but in point 2 notice that param=1 is already used. So, this time IE7 will hits you on the back and will say that you have done this before. So,no more requests are accepted.

SOLUTION:

A simple solution to this problem is to  attach an extra parameter with you URL, that will not be used and is only attached to make every requesting URL different. A way is to use math random function. Thus, this will goes like,

        var rpag = "anypage.php?param1=somveval&extra="+Math.random();

Open in new window


This code will work 90% time but not 100%. Guess why?

The reason is, this will fails if one number gets generated twice. So whats the solution to this problem now?

A simplest and a little dirty solution to this problem is that, instead of generating a random number.

Just create a hidden field inside your <body></body> tags. Assign that filed a value of 1.

Now before making every AJAX call. get this field value, increment it by 1 and save that new value back in hidden field first and then attach that value to your extra parameter. This way your URL will be different time for every AJAX call. So, now you will have 100% working IE7 code.

This method will be coded like this way.

<html>
                      <head>
                      <script type="text/javascript">
                      if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
                              xmlhttp=new XMLHttpRequest();
                          }
                          else{// code for IE6, IE5
                      //        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                          try{
                                   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE 5
                               } catch (e) {
                                   try {
                                       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 6
                                   } catch (e) {
                                       alert("...your error message here...");
                                       return false;
                                   }
                               }
                          }
                              var extraval = document.getElementById('inc').value; //Read value of hidden field.
                              extraval = extraval + 1;     // increment of 1.
                              document.getElementById('inc').value = extraval;    //updating value of hidden field so                                                                                      //that next time it is incremented value
                              var rpag = "anypage.php?param1=somveval&extra="+extraval; 
                              xmlhttp.open("GET",rpag,true);
                              xmlhttp.send();
                              xmlhttp.onreadystatechange=function(){
                                  if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                      xmlDoc=xmlhttp.responseText;
                                      xmlhttp.abort();
                                  }
                              }
                      </script>
                      </head>
                      <body>
                              <input type=hidden id="inc" value = "0"/>
                      </body>

Open in new window


So, now we are done with this AJAX problem in IE. All you need to do is just attach an extra variable to your requesting URL and give it a new but unique value. You can use any logic to achieve this thing. Either you can use that hidden field method of mine that I discussed above or you can create your own. Another method to get every time a unique value is to use date and time.
2
3,709 Views

Comments (1)

Author

Commented:
Thnx for your words and suggestions. I have made some changes as per your requirements. Hopefully, it is fine now.

regards,
aqid

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.