Webmasters Stack Exchange is a question and answer site for pro webmasters. It only takes a minute to sign up.
Sign up to join this community
Which is better and why?
I can see where a site that works 100% in AJAX might optimize a bit better, due to not having to reload the page on each click.
But I am a huge fan of the big submit button at the bottom of the screen.
Is it worth spending the time to convert a site to AJAX when it mostly only optimizes page load times?
In most cases, you need to have the manual submit, even when you've utilized AJAX to submit your forms. JavaScript is not always enabled for a variety of reasons. Most text-only browsers usually don't interpret JavaScript and so it's important to have a fallback. Also, although I know it's not applicable for most forms, search engines have very limited ability to parse and execute JavaScript, so it's best not to use it to construct menus.
Is it better to enhance a form with AJAX? It depends on your situation and also on your implementation. If all you're doing is an AJAX form submission, I'd recommend against the extra 20K overhead of a JavaScript framework like jQuery or MooTools. In that case, use pure JavaScript. However, if you're using the framework elsewhere as well, it could be a good choice. Just be aware that using AJAX can present a number of usability issues (like the back button behavior).
Also, just as a warning and friendly reminder, don't just do your validation with JavaScript. It needs to be done on the server, first and foremost. Use the JavaScript to enhance the security, not to provide it.
<input> element) does not provide any sort of security at all. Client side validation is only for providing a better user experience. It provides a better user experience by not making the user wait for a whole HTTP request just to learn that their form was not valid.
– Utku
Jul 20 '17 at 13:17
Neither is really better than the other. It's a matter of preference for the most part. Do you want to reload the entire page, or just reload a certain portion of it. If the form is all you're showing, ajax is probably slower than reloading the page. However, if your form is just a small portion of the page, ajax would probably be faster.
You can still have a big submit button. Just don't make it submit. Catch it's onclick event, do your ajax thang, and return false.
Check out jQuery for some pretty painless ajax stuff.
They are not mutually exclusive: with progressive enhancement you can use both!
Start with a basic form that submits via POST, and write some server-side code to handle that and redirect back to the previous page, which will now be updated. This covers the accessibility and no-JS sides.
Next, add your AJAX code to the page, that "hijacks" the onsubmit event for the form, call your AJAX function that runs the same server-side code to process the submission, but this time returns some data that tells you how to update the page. Don't forget to return false from your JS function so that the form is not posted in the normal way.
Now you have the "faster" experience for the majority of users, and still have the functional experience for everyone as a backup.
The issue you should consider is the user's experience and how it relates to conversion.
If using AJAX create a better experience for your users and helps them convert, you should probably use it.
A simple example: your user chooses a user name. The user name is already taken. Using AJAX to check in the background and letting him know right then and there is much better than letting him complete the form and reload the page.
Most of the time, I find that AJAX improves things.
