develissimo


AJAX not working broken in Chrome / Chromium and IE8

So @ develissimo we wanted to offer Live-Support-Chat via AJAX

Great but unfortunately the first approaches broke on Chrome (Chromium) and ~IE8 using JSON.But why?

AJAX working in Firefox and friends, but broken in Chrome and IE8!? Maybe this post can help you solve your issue.

The AJAX connection did not work out as expected, because it simply did not keep a communication alive. For all of us who are not developing AJAX requests daily things start getting annoying if they perform well in one browser and start breaking in other once. Here the AJAX communication worked well in Firefox but broke for Chromium / Chrome and IE8.

How to tackle down AJAX troubles?

Well if things perform correct in one browser but break in others the solution to the problem can't be that far away. So how to search for it? When it comes to AJAX you have to check for errors on both sides - the Server and the Client side. So check your server log + warning messages. And on the Client side go with one of the developer tools which come with all major browsers to help you tackle down your trouble. Tools we use most during development at our webplatform are "Firefox WebDeveloper", "FireBug and Friends" plus the "Chromium Developer Tools".

AJAX error tracking

So you could either use a sniffer tool which would make you tired fast or go with your favorite developer tools. In this case I want to explain how to do so with chromium developer tools.

  • Go to

Customize and Control Chrome > Tools > Developer Tools > Network

  1. In Chrome go to "Customize and Control Chrome" in the upper right corner
  2. Tools
  3. Developer Tools
  4. Click the Network Tab
Chrome Developer Tools

Now your browsers communication is displayed with source, locations and timeline. But also the method POST,GET,... and the Status is shown. The example in the image shows a well established connection with Status Code 200 and no errors.

Some Major Status Code Examples

  • Status Code 200
    • Standard response for successful HTTP requests.
  • Status Code 404
    • Error - Not Found
  • Status Code 500
    • Error - Internal Server Error

So now you are good to go... Start the broken AJAX call in your browser and check what Network tab is telling you. If you receive 404 errors maybe your resources are not set up properly. Fix them.

Chrome and AJAX

In our case(404 errors on Chrome appeared) the tools above helped us to get an insight where the troubles are coming from. But why is Chrome not working out AJAX well while Firefox did!? The answer is Chrome and the error was not straight to find

Chrome cached the AJAX requests done via JSON and was not in the mood to keep a communication alive.

Quick Solution

The quick solution to cure Chromes troubles with AJAX was to add "cache: false," to the AJAX arguments.

Original AJAX args

var ajax_args = {
url: document.get_message_url,
data: args,
success: gotMessages,
error: getMessagesFailed,
cache: false, //for Chrome and IE8
dataType: 'json'
}

Fixed AJAX args with cache=false

var ajax_args = {
url: document.get_message_url,
data: args,
success: gotMessages,
error: getMessagesFailed,
cache: false, //for Chrome and IE8
dataType: 'json'
}

Attention! Take care!

But If cache argument is set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL.

Do keep in mind that you have to adjust your server side script to handle the new _=[TIMESTAMP] added to the URL to keep your logic working properly.

Now Chrome should work out your AJAX sessions just as Firefox,Safari and all the others do. Enjoy!

  • The author Raphael Reumayr born 1982 is an electronics engineer and software developer at the develissimo webplatform. His interests are related to open source development, environmentalism, astronomy and the future of mankind on and around this beautiful blue planet.

Enjoy the 11th of December

Meta

Published: Jan. 14, 2013

Author: Raphael Reumayr

Comments:  

Word Count: 565

Previous: Django Statistics - Developers Hourly Rates

Bookmark and Share

Tags

AJAX broken cache Chrome Chromium develissimo developer developertools electronics false Google IE8 not tools working

Article Links

  1. ...8/ajaxmsg_1.png

Attachments

Comments powered by Disqus

Tag Cloud

Leave a Message
Welcome to Develissimo Live Support