How do modern web-apps/sites do postbacks? javascript/ajax, <form> or X?

Question

I am curious to know how "modern" web-apps/sites do postbacks, meaning when they are sending back user-input to the site be processed.

Do modern sites still use the old fashion <form>-tags or do they use some sort of javascript/ajax implementation? or is there even a third option?

Answer 1

I tend to use both, where a full page refresh from a normal <form> submit works, but if JavaScript is enabled you hook up to the submit event and override it. This gives you fancy AJAX if possible, and graceful degradation if it's not.

Here's a quick example (jQuery for brevity):

<form type="POST" action="myPage.htm">
  <input type="text" name="UserName" />
  <button type="submit">Submit me!</button>
</form>

If the user has no JavaScript, no problem the form works. If they do (and most will) I can do this:

$(function() {
  $("form").submit(function() {
    $.ajax({ 
      url: this.action,
      type: this.type,
      data: $(this).serialize(),
      success: function(data) {
        //do something with the result
      }
    });
  });
});

This allows the graceful degradation, which can be very important (depends on your attitude/customer base I suppose). I try and not screw over users without JavaScript, or if a JavaScript error happens on my part, and you can see from above this can be done easily/generically enough to not be painful either.

If you're curious about content, on the server you can check for the X-Requested-With header from most libraries and if it's present, return just the <form> or some success message (since it was an AJAX request), if it's not present then assume a full page load, and send the whole thing.