HTML Form versus XMLHTTPRequest?

Question

What is the difference between POSTing with an HTML Form element and with an XMLHTTPRequest?

Why can a form allow a redirect to another web page, but apparently a XMLHTTPRequest cannot?

If I'm making POST requests, I should be able to formulate a request with the same attributes and expect the same behavior.

Answer 1

What is the difference between POSTing with an HTML Form element and with an XMLHTTPRequest?

An XMLHttpRequest allows for asynchronous operations to be performed, which don't block the UI of the client. When using an HTML form, the client is blocked while the operation is being performed.

Also (as you point out), an HTML form submission causes a page reload to a specified URL, whereas an XHR does not - - it simply results in data being returned. The returned data may only be a portion of a page's content, so XHR does not cause a full page reload. It allows us to dynamically update a portion of a page.

Why can a form allow a redirect to another web page, but apparently a XMLHTTPRequest cannot?

An XHR can have a "success" callback function configured for it. When the operation is successfully completed, the callback function can do whatever you like, including a redirect.

If I'm making POST requests, I should be able to formulate a request with the same attributes and expect the same behavior.

Do you mean that an HTML request should be able to be configured the same as an XHR request? If so, then no, that's not the case. An XHR request can be configured to a very granular level (user name and password, data type, caching, success callback, failure callback, etc.). This (and the asynchronous nature of XHR) is the reason that XHR is popular.

Answer 2

I think you should walk through a brief history and evolution.

Back in old days when HTML HTTP was simple people used to post forms but it had some issues ?

1. every time request submitted
2. go to server gets processed response
3. coming to client (entire page re-rendered/redirected to new page)

Ok but what if user did not entered correct form values ??? Net use to be slow back then so came in hero JavaScript

1. Now used submit forms
2. On client/browser it gets validated
3. User gets error message right away and (server does not need to burn processor for incorrect request. can serve more requests)
4. But still when information submitted page refresh or redirects means time to render and load it

Now smart people came with XMLHTTPRequest/AJAX why to refresh page why ?

1. What if page stays same and only needed information can be transferred to server?
2. Now under the current page only server response can be read success or failure.
3. Only part of page is updated to indicated if operation is done on server. resulting in better user experience.

With better browsers and server this evolved in SPA (Single Page Application) and much more.

Import one is With some code,

even XHR can redirect to other pages or reload page ex window.location = '' And also FORM can be prevented from redirecting ex e.preventDefault()

Check AJAX related information it would help you understand the why part and why its so much fun.

Hope that helped