Code Muri

The following is a list of things to review so that a web page is compatible, not only with Firefox, but with any browser which implements the latest standards, including of course Mozilla derivates as Camino, Galeon, Epiphany, etc.

Some might say that making a page compatible requires double the effort in making it, and that is not worth the trouble since everybody uses explorer. In this article I want to show that this is not true. It's roughly the same effort to make a page that is compatible with Firefox as one that that is not.

This text does not intend to tell you how to make pages compatible with ancient browsers (as Netscape 4 or Explorer 4) That would certainly be a much larger task. This article aims to guide you about supporting browsers that are very similar in their support of things like dynamic HTML. It's not necessary to have a page for each kind of browser, it's better to share the code while taking into account the small differences. The details enumerated here will be used for browsers like Firefox, Mozilla, Netscape 6+, Konqueror, Opera, Apple's Safari, etc.. Some of the properties explained which are equivalent to those of Explorer don't belong to any standard, these cases will be noted.

Sripting. The great majority of the compatibility problems falls in this category, specially in "AJAX" applications. And they are not generally problems with the JavaScript language itself, but with the fact that the browsers represents the page in objects differently. A different API, sortof. This API is called the DOM (although in Microsoft docs you should search for DHTML instead).

Let's now see which are the most common problems...

http://www.reloco.com.ar/mozilla/compat.html

The following section is designed to help Web authors understand how to access the dimension and location of elements on the page through the Dynamic HTML (DHTML) Object Model.

Understanding Properties That Measure Element Dimension and Location

The diagrams illustrated in this document represent different DHTML Object Model properties for the same page. The sample page contains a div element that is relatively positioned on the page. Since the overflow attribute of the div has been set to scroll and it contains more content than can be displayed within its limited client area, scroll bars are displayed.

출처 : http://msdn.microsoft.com/en-us/library/ms533024%28VS.85%29.aspx

Internet Explorer on Windows, Safari on Mac OS-X, Mozilla on all platforms, Konqueror in KDE, IceBrowser on Java, and Opera on all platforms including Symbian provide a method for client side javascript to make HTTP requests. From the humble begins as an oddly named object with few admirers, it's blossomed to be the core technology in something called AJAX [1].

The Object makes many things easier and neater than they other would be, and introduces some things that were otherwise impossible such as HEAD requests to see when a resource was last modified, or to see if it even exists. It makes your scripting options more flexible allowing for POST requests without having the page change, and opens up the possibility of using PUT, DELETE etc. These methods are increasingly used to provide richer Web Applications like G-Mail that use lower bandwidth and offer snappier user interaction.

Why XML HTTP Request object?

Whilst the object is called the XML HTTP Request object it is not limited to being used with XML, it can request or send any type of document, although dealing with binary streams can be problematical in javascript.

Creating the object

In Internet Explorer, you create the object using new ActiveXObject("Msxml2.XMLHTTP") or new ActiveXObject("Microsoft.XMLHTTP") depending on the version of MSXML installed. In Mozilla and Safari (and likely in future UA's that support it) you use new XMLHttpRequest() IceBrowser uses yet another method the window.createRequest() method.

This means that you need to show different script to different browsers, as what works in one, will error in another. The script below does this, and if it's not supported, the variable is set to false to allow for appropriate error messages and recovery with degrading to more normal HTTP transaction methods when the object isn't available. This degradation is important, even in IE the objects can often be blocked by slightly raised security settings (popular due to the commonly exploited holes of course). Where possible degrade, some approaches are talked about below, if you really can't, I'd recommend providing an alternative page aswell. GMail for example has said they'll be providing a less demanding version in the future, hopefully with no javascript at all, full degradation.

How do I make a request?

Making a HTTP request is very simple. You tell the XML HTTP request object what sort of HTTP request you want to make and which url you want to request. Provide a function to be called when as the request is being made, and finally what, (if any) information you want sent along in the body of the request.

The following script makes a GET request for the relative url "text.txt" (relative to the calling page) It provides the function, which checks the readyState property each time it's called and when it has the value 4 - meaning the load is complete, it displays the responseText to the user with an alert.

Making a HEAD request

With a HEAD request, a server will only return the headers of a resource, rather than the resource itself, this means you can find out the Content-Type or Last-Modified of a document, without downloading it itself.

A typical HEAD request might return something like this:

To make a HEAD request, you simply replace the first parameter with HEAD, and then extract the headers, either using getAllResponseHeaders or getResponseHeader("Name") to get an individual one.

Using HEAD requests, to find the Last-Modified of another file.

One use of HEAD requests, is to find out when a url was modified, extending the previous example, you get something like this:

To format the date differently, or use something other than alert, the javascript FAQ will tell you more.

Does a url exist?

Another simple use is finding if a url exists, in HTTP there are various status codes returned by both HEAD and GET requests, 200 means success, 404 means failure, and the others mean other things. See HTTP status codes for a full explanation. using the status property of the xmlhttp object provides you this status

Calling a server-side Script without refreshing the page

Forms are the way to "call" serverside scripts in HTML, they force the page reload, and this is often not very user friendly. Using the HTTP Request, you can call the script without refreshing the page, and still have the form "fallback" to working when the XML HTTP Request Object is not available.

The example above uses JScript in ASP as the server side language, the HTTP ACCEPT header is used to tell the server which response to send back - either the full page or just the result. The HTTP ACCEPT header is used to tell servers what mime-types the client will accept, normally it says things like text/html etc. Here though we tell it we only accept "message/x-jl-formresult", so the server knows it is our client (or another client, who knows about "message/x-jl-formresult") making the request.

Other methods of identifying what to return may be appropriate depending on the type of data you send to the server, or you could simply use different urls for the form submission and xmlhttp request, whatever you do, remember to have sensible fallback to the non-xml http request browsers where possible.

Using JSON as the transfer language

Whilst XML can be used to encode the information you retrieve with the object and it will be available in the responseXML property, however xml is less well supported, some browsers require that the content type of the resource is one of only 2 possible XML mime-types text/xml or application/xml for the property to be populated, and there are always the normal well formness problems you always get with XML. JSON is a good alternative, it's fast to parse, and much, much faster to access in script.

I use JSON in the Flight Routeplanner to look up information on airports, an Example with London Heathrow, you can easily parse the returned JSON into a script object using the new Function constructor, it checks the status as the script returns 404 if it fails to find an airport with that iata code.

Using XMLHTTP with GOOGLE's SOAP API

Google provides a SOAP interface to it's database. You need to register for a key that lets you make 1000 a day, to make a request. You then need to parse the returned XML.

Google is using a SOAP interface, many people think SOAP has some serious issues worth considering. REST is probably a better model as it works with the current web framework, proxies, caches etc. So whilst we can use the XML HTTP Request object to talk soap, it's probably best not to unless you have no control over what's happening on the server end. (Thanks to Dan Schmierer for pointing out an error in my script.)

By default the object can only call back to the same server, in a reduced security environment (accessed from file:// say) IE can access any domain, Mozilla can also do that if you request and are granted the appropriate permissions see "a google thread I can't get to offline!"

Nearby...

• Dynamically updating SVG.

[1] Actually a lot of the "AJAX" applications make little use of this object, using the older and often more flexible IFRAME remote scripting methods, but they could've been using this object, and AJAX should be thought of more as a concept of the kind of applications that can be created with the object.