Well, the answer is yes and no.

It all depends on what you want to achieve.

But, as a good coding practice – Stop unnecessary Postbacks!

During few years back, before the advent of ‘XMLHttpRequest’, a web page had to be re-loaded onto a web browser every time on receiving a Http response.

That would mean reloading the webpage on every round trip to the server. But, that is nott performance efficient nor a user desirable event.
In general, it is expected that as a first time call to a web page, the web page goes through the entire cycle of DOM construction and loading on a browser.

However, imagine a scenario, where you are on a web page, that takes your personal details and when you click submit, simply sends the data to the server for saving/ registering you to their website. In response, you are only interested in knowing if the registration/form has been submitted or not.
As a first time call to the web page, the page will be rendered on the web browser and will need to apply css and will also download any external files as required by the page.

Once your page is loaded on your browser, it is just html / readable text for the user. After the page download is completed, the web page is disconnected from the web server code at this point. The user then fills in required form fields and clicks ‘Submit’. Lets assume the user data is sent using POST to server page to be processed and internally is saved to the Database.

You can read – How the server processes a web request here

The server code, reads this user specific data, saves to database and may simply want to display or send a  message:  ‘Data successfully saved. Thank you for registration’

In traditional web programming, to receive this response, the server would reconstruct the whole html response page again (even though most part of the page is what was loaded as before) and would cause a page to be loaded back on the browser on receiving web response.

 

Postback on response to Webpage

FirstTimePageRequest

 

After, submitting the form data using POST to server (a.k.a Postback), you may want to simply show a hidden label on top of your web page with a message stating to the user, that the form submission was successful.

In which case, you may not want to re-construct the entire html of the page again thus avoiding a full load on the browser. Great thought!

Thus, the concept of ‘XMLHttpRequest‘.

XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript, jQuery and other web browser scripting languages to transfer and manipulate XML data to and from a webserver using HTTP, establishing an independent connection channel between a webpage’s Client-Side and Server-Side.

With the XMLHttpRequest object, clients can retrieve and submit XML or text data or JSON, directly to a web server without reloading the document

The object has a ‘onreadystatechange‘ event.

The readyState property holds the state of the XMLHttpRequest.

There are 5 values to the readyState property:

readyState 0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Often you will also read the status of the response:

status 200: “OK”
404: Page not found

By reading the readyStsate and response status code received, you will be able to only update the partial page or show a message to the user.

Thus avoiding page reload time and creating a better user experience.

The response received and partial page updation diagram would look as follows:

 

Webpage receiving response without a Postback:

PostBackRequestDiagram

 

 

I’d also like to mention a quick fact at this point.

Using XMLHttpRequest in Javascript and asynchronously sending and receiving a response is what AJAX (Asynchronous JavaScript and Xml) is all about. It allows updating of a part of a web page by receiving http response asynchronously and not requiring to reload the entire page again. You can further read about it here.

Also, note that you can wait for http response object i.e. synchronously send request using XMLHttpRequest object. Many a times, you may want user to wait or not interact with your application till the response from the server is received.

 

Suggested Reads:

 

Advertisements