how AJAX aplication should behave when Javascript is disabled - common practice?

Question

I’m in the process of developing pretty basic web application, that is mostly so I could learn jQuery/ajax/php on the way (and have some fun). I want to make it as accessible to users as possible so it should work with Javascript disabled, validate to AAA and all that. With JS disabled would be of course without all the bells and whistles, but nevertheless should do the job.

I would like to make good use of Ajax, but I don’t fully understand how should I cope when JS is off.

So let’s say JS is on, user submits the form, clicks submit button and thru ajax, data is submitted to register.php (register.php is specified in forms action attribute). register.php returns data and jQuery displays appropriate message. All without reloading the page.

Now, if JS is disabled, submitting form to register.php won’t do much good.

The way I understand it, solution would be to create one php script for JS enabled, other for JS disabled. So by default form would have action attribute with nonjs_register.php, and if JS would be enabled, it would force the form to be submitted to js_register.php rather than default nonjs_register.php. I can imagine that would be quite tedious to create two scripts pages for each user interaction with the application but that’s the only way I can think of at the moment.

I hope all that makes sense but please let me know if my explanation is not quite clear. Now if anyone could explain to me what is the common practice to deal with that kind of problem that would be great.

Answer 1

The best thing I could suggest would be to build it how you would want it to work without the AJAX calls. That way you can get an accurate portrayal of how it will work with JavaScript disabled. Then start to work in your JavaScript and continue to test with/without JavaScript enabled.

Answer 2

Take a look at the Hijax technique, it's a way of using AJAX as a progressive enhancement.

Answer 3

If you use AJAX to implement some ESSENTIAL part of a page, then the whole page will have to require Javascript.

This is a thing you have to point out BEFORE you start implementing it.

If you want to make Javascript optional, then you can't use AJAX to implement all the communication. You'll have to use postbacks, and eventually override the "click" events of buttons to make the postback asynchronous (a.k.a. with AJAX).

So, I would suggest you to write the page as if you don't have Javascript, then override some functionalities later on if Javascript is enabled.

Answer 4

One solution would be to have your register.php file recognize the HTTP header: Accept in requests it receives and it would respond one of several ways:

1. If the incoming request has

   Accept: application/xhtml+xml, text/html, multipart/mixed, */*

   Then return an HTML page as a response.

2. Or if it's something else, such as

   Accept: application/json, application/javascript, text/javascript

   It would return JSON (in this case), or XML if it had the appropriate mime types listed for example.

Then in your Javascript code, you'd handle the onsubmit event and override the normal behavior to perform what you suggest in your question (but also changing the Accept header, like above). If javascript is disabled, the form will submit normally and will pass along a header that should trigger your PHP to return a web page.

Answer 5

The way I would deal with this sort of thing is to use an event with javascript that cancels the default action of the form. The default action of the form is to submit to a different url:

html

<form id="AjaxForm" action="/nonJS_register.php" method="POST">
   <!-- form input elements -->
</form>

js

document.getElementById("AjaxForm").onsubmit = function ()
{
     //- do ajax posting...
     ajaxPostForm();

     //- Cancel the default action of the form
     event.preventDefault();
     return false;
}

The ajax function could submit to nonJS_register or you could even just add a parameter that tells the script to return the data in a different format and not encapsulated by HTML.

Answer 6

the recipe is very basic:

1. always pull everything on the page before JS is even called.
2. then change everything via JS - e.g. hide elements as required etc.
3. AJAX needs to hook up on the events and cancel the original events (e.g. clicking the link will get you to another HTML/PHP generated page without JS available, but with JS available you can change targets to pull AJAX only and return false, so click won't actually change the page)