This post originated from an RSS feed registered with Java Buzz
by Alan Williamson.
Original Post: Various AJAX gotchas with IE
Feed Title: Technical @ alan.blog-city.com
Feed URL: http://www.ibm.com/us/en/
Feed Description: (Technical) the rants of a java developer trapped in the body of a java developer!
I have just finished implementing a progress bar (something similar to the likes of Expedia and other airline sites) to give feedback of what is going on with a potentially long operation. There was a number of ways I was hoping to achieve this without having to poll the server every second.
In all the examples everyone has their event handler tied to the readystate=4; which indicates that the operation has completed. There is another readystate=3 that is suppose to state when data is available. This works well on Firefox, where by your remote server sends its updates one-line-at-a-time, however fails miserably on Internet Explorer, with this state when invoked giving you the complete request data. So I was forced to use the polling method.
However that wasn't without its problems. Again it worked beautifully on FireFox but on IE it would stop updating after the initial poll. The problem was simple; IE was caching the request inbetween each one and the server wasn't even getting triggered. A quick fix was to keep changing the URL on every poll and I achieved this using a simple counter appended to the end of the URL.
A final gotcha with IE which isn't strictly related to AJAX is to be careful with the timing of your Javascript execution. Wait until the whole page has loaded before you start anything; IE doesn't like setting elements that appear later on in the page that it hasn't necessarily loaded the page for. Again, this never proved a problem in Firefox, but was very evident in IE.
I now have a progress bar with very little Javascript providing realtime data on what it's doing as oppose to simple incrementing dots. Marvellous.