Low Level Ajax Coding GotCha
November 17, 2007 – 5:45 am by coachwei | Category WebDev |People say Ajax is hard…and this may be why.
I spent some time playing with Bob Buffone’s newest work on Ajax over the last few days. Bob built an xModify processor that runs on either jQuery, Dojo or Mootools. The xModify processor is powerful but quite lightweight (10KB without gzip). There will be more news on xModify but that is not the point of this post. Anyway, I wrote a little app that uses his stuff. The entire application uses three JavaScript file: jQuery library (70KB), xModify processor (10KB) and my little JavaScript file (2KB).
My target is to run the little app on Internet Explorer and FireFox. In particular, I have used FireBug on FireFox during development. FireBug is a popular FireFox browser add-on that provides JavaScript debugging capability. After a little while, without a lot of effort (thanks to FireBug, jQuery and xModify), my app is working. It does exactly what I intended. Flawlessly.
Then I applied a modified version of ShinkSafe, reducing the number of round trips as well as download size. ShrinkSafe is a tool provided by Dojo that compresses JavaScript files. Using ShrinkSafe, the three JavaScript files are combined into one and the total download footprint also reduced by about 30% to 40%. The result worked well on both IE and FireFox. At this point, I happily concluded my little project and moved onto my day job of web browsing.
However, it turns out that my browsing experience is unusually slow at this moment. Eventually I realized it is because I have my FireBug turned on due to my earlier little project. After I disabled FireBug, web browsing resumed its normal performance.
A few hours later when I tried to run my little application again, it surprisingly failed on FireFox. The app loads into FireFox, but it does not respond to any user interaction. It is not frozon or dead, as I can still type into text fields. It looks fine too as the UI is still rendered correctly. But it is just not responding to any event such as “submit” or “click”. On IE, the application is still working fine. The only thing that’s changed is that I have FireBug disabled now. Would disabling FireBug break my app? Hard to imagine. Nevertheless, I re-enabled FireBug. Surprisingly the application is working again. If I disable FireBug, the application stops working. So does disabling FireBug actually break my application?
There is one error message on the JavaScript console: Error: uncaught exception: [Exception... "Not enough arguments"
nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS
frame :: http://localhost:1000/app/javascript/jquery/all.js ::
anonymous :: line 1" data: no]
What does the error message mean? Where does the error come from?
My natural intuition is that my modified ShrinkSafe is the trouble maker here. It may have screwed up one or two characters when compressing jQuery, xModify or my own JavaScript code. For example, it may have incorrectly removed a “;” from the JavaScript source. IE browser and FireFox with FireBug turned on are able to handle this issue but FireFox without FireBug is not able to interpret JavaScript statements with a missing “;”.
Well, now enters a four-hour exciting debugging session….
After four hours, I finally figured out the problem. It is not FireBug. It is not ShrinkSafe. It is actually a coding issue in my little JavaScript code. In my code, I used “XmlHttpRequest” object. Here is the code snippet:
if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject)
req = new ActiveXObject((navigator.userAgent.toLowerCase().indexOf(’msie 5′) != -1) ? “Microsoft.XMLHTTP” : “Msxml2.XMLHTTP”);
req.open(”GET”, url, false);
req.send();
The problem is the “req.send()” statement. When you call “send()” method for an XHR object, FireFox expects an argument for this method, even if it is “null”. Without an argument, FireFox throws the above exception. Once I changed “req.send();” to “req.send(null);”, the problem went away.
The strange thing is that that code works fine on IE, further, works fine on FireFox if FireBug is enabled. In a typical development environment where FireBug is enabled, the problem is never exposed. And then, in a production environment where FireBug is disabled, you get an error. But the message says “Error: uncaught exception: [Exception... "Not enough arguments"
nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS
frame :: http://localhost:1000/app/javascript/jquery/all.js ::
anonymous :: line 1" data: no]“.
Can the message be any more esoteric?
Happy coding!
5 Responses to “Low Level Ajax Coding GotCha”
Why would you need to create your own XHR object when the functionality is built into jQuery? That's the point of using a package like jQuery: it prevents browser-specific problems like these.
By Anonymous on Nov 17, 2007
The reason that I have to create my own XHR instead of using jQuery's support for it is because I intended for my app to be independent of any Ajax toolkit except for Bob's work on xModify. “By independent”, i mean that the app can run on Dojo, jQuery as well as Mootools - without changing a single line of code except for changing the “script” tag for Ajax toolkit inclusion.
A little more on xModify (you should see a lot more of it going forward): xModify is a declarative layer that provides incremental update to a DOM - it enables operations like “append”, “insert”, “remove”, “set attribute”, “replace child”, etc using a simple XML syntax and CSS or xPath selectors. Bob Buffone wrote this in a way that it works on top of jQuery, Dojo as well as Mootools. The benefit of xModify is that it makes DOM manipulation really really easy.
By Anonymous on Nov 18, 2007
I experienced the same behavior. Replacing the false with true in your req.open will do the trick.
By Anonymous on Nov 27, 2007
Patrick:
Replacing “false” with “true” in req.open(…) statement changes the call from being synchronous to asynchronous. So the change of behavior may not be desired, depending on the application.
My solution was to change ” req.send()” to ” req.send(null);”.
By Anonymous on Nov 28, 2007
Replacing “false” with “true” in req.open(…) statement changes the call from being synchronous to asynchronous. So the change of behavior may not be desired, depending on the application.
Ah, so it's not 'AJAX' then is it.
By Anonymous on Apr 28, 2008