Ajax Vs Form Submission

I read question/answer about posting the web page in stackoverflow. Presented here for your attention.

<html>
<head>
    <meta name=”viewport” content=”width=device-width” />
    <title>Index</title>
</head>
<body>
    <div>
        <form action=”Home” method=”post”>
            Username:
            <input type=”text” name=”user”>
            Password:
            <input type=”password” name=”pwd”>
            <input type=”submit” value=”Submit”>
        </form>
    </div>
</body>
</html>

Before discussing about difference between the submissions, find below some differences between id and name attribute:

   *  the name attribute relates to how data is labeled when sent to server, and multiple elements may share the same name. When page is posted the name/value pair will be sent to server to easily corelate the value against the control/variable in server. The id attribute on the other hand is for identifying one unique element for the purposes of scripting, styling, or addressing.

   * The use of the name attribute on other elements than form controls was in HTML4.01 the same as that of id, but it allowed for a wider set of characters than the id attribute and wasn’t controlled in quite the same way. Because of this ambiguity the W3C decided to deprecate/remove name attribute on those elements in favor for the unambigous id attribute in XHTML. This is also connected to another detail of XML however – only one attribute of any element may be of the type ID, which would not be the case if they let name stay on the element but corrected the ambiguity problems.

   * As the name attribute didn’t work the same on those two sets of elements, if was best to remove on of them.

In short, for backwards compatibility you should use name and id attribute both, both set to the same value, for all elements except form controls if you use HTML4.01 or XHTML1.0 Transitional. If you use XHTML1.0 Strict or later you should use only id. For form controls you should use name for what you want the form to send to the server and, and only use id for styling or addressing reasons.

The method attribute in form element specifies how to send form-data (the form-data is sent to the page specified in the action attribute). The form-data can be sent as URL variables (with method=”get”) or as HTTP post transaction (with method=”post”).

Notes on GET in Form element:

    * Appends form-data into the URL in name/value pairs [http://localhost:1158/Home?user=ala&pwd=rtc]
    * The length of a URL is limited (about 3000 characters)
    * Never use GET to send sensitive data! (will be visible in the URL)
    * Useful for form submissions where a user want to bookmark the result
    * GET is better for non-secure data, like query strings in Google

Notes on POST in Form element:

    * Appends form-data inside the body of the HTTP request (data is not shown is in URL – http://localhost:1158/Home. You will usually read this in asp.net/asp.net mvc by using Request.Form Or model binder specifically in asp.net mvc)
    * Has no size limitations
    * Form submissions with POST cannot be bookmarked

You can even post the base by using Ajax/XmlHttpRequest request. But in ajax you will have to manually form the request and parse the response and update the page.

POSTing, as compared to GETting, is a different HTTP method with different implementation and semantics. Ajax, or XmlHttpRequest, has its counterpart in normal requesting/navigation. You can use POST or GET for both XmlHttpRequest and normal navigation and form submission (well, POST is always a “form submission”).

The difference between XmlHttpRequest and normal requests is that a normal request replaces the page with a new page.

You could write just about any website using only Ajax to get data and change the DOM; that’s mainly how Gmail works. There are no “form submissions” in the traditional sense. But there are still GETs and POSTs because the server and browsers interpret the results differently. GET is supposed to be idempotent; POST is meant for operations that change the state on the server. For example, an ecom transaction should be a POST. This doesn’t change when using Ajax because you want proxy servers to also understand that this is a POST and that they shouldn’t try to cache the response.

There are also advantages and disadvantages to using GET vs POST. You can’t bookmark the results of a POST because the parameters are hidden. You can’t GET something with parameter values of unlimited length because IE only supports about 2000 chars.

Also there are disadvantages to using Ajax vs normal submissions; you can’t bookmark the resulting page; the back button won’t work as expected. You can’t upload a file using Ajax. But with Ajax you could minimize the data transfered and also provide convenient updates to a page (such as monitoring the status of a long process) without annoying flickering or refreshing.

In summary the two request types, Ajax and traditional form submission, can both be used with GETs and POSTs, and there are pros and cons for each. Neither type can do everything the other can and so you can expect to see a mix for the forseeable future.

Advertisements

Tagged:

2 thoughts on “Ajax Vs Form Submission

  1. […] Ajax Vs Form Submission […]

  2. Facebook and Ajax - NuChange January 1, 2015 at 9:26 pm Reply

    […] Ajax Vs Form Submission […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: