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

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/a开发者_开发知识库jax implementation? or is there even a third option?

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.

It will vary depending on what exactly is being done, but most web-apps will do a combination of AJAX for short content (esp where live/interactive updates are helpful without requiring a page refresh) and "old-fashioned" forms for longer content wherein a full page load is not an issue.

Note that nothing about AJAX prevents its use for long content as well as short.

Also note that from the stand-point of the code driving the server app, there is not necessarily much difference at all between a request coming from a standard form or a request coming from an AJAX submission. You could easily structure a single script to properly respond to both types of request (though in some cases you can save bandwidth by sending a shorter "data-only" response to the AJAX version, since the client-side code can be responsible for parsing the data into meaningful content).

Basically, there are three models.

The traditional form model uses form postbacks for every action that requires going to the server, and may use javascript to perform client-side tasks that make the user's life easier without compromising security (e.g. pre-postback validation). The advantage of this is that such a web application, if written correctly, will work without needing any javascript at all, and it is easier to make it work on a wide range of devices (e.g. audio browsers).

The server-centric ajax model uses ajax calls to provide partial page refreshes; the page is built like in the traditional model, but instead of triggering a full page post-back, client-side script uses ajax calls to send clicks and other events, and retrieves information to replace a part of the document (usually in JSON or XHTML form). Because you don't post the entire page every time, the response is usually quicker. This model is useful if you want to use ajax where possible, but still want to be able to fall back to traditional postbacks if javascript isn't available.

Client-centric ajax takes a different path; the core idea is that you write your entire application in javascript, using ajax to exchange data, not markup. When you click a button, the application sends a request to the server, and receives data. The data is then used for further processing on the client. This is more flexible and usually faster than the other methods, but it requires good knowledge of javascript. Applications written in this style generally don't work at all when javascript is disabled on the client.

Most decent web applications try to put progressive enhancement. Meaning that a simple old fashioned button click results in a form post which can be handled by the server. This is for the scenario of people who use an old browser or turned off javascript for some reason.

The enhancement can be done by using hijaxing. Meaning that that same page can perform, with the help of some ajax, the form post to the server but not the entire page. This enables users with javascript enabled to have a better user experience.

old fashion -tags or do they use some sort of javascript/ajax implementation?

In order to have javascript to work on something you still need that somethingl old fashioned tags. Web applications can be structured down to 3 major parts:

• Content: HTML
• Layout: CSS
• Behavior: javascript/ajax