Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Javascript: How to get dynamic web content using HTTPRequest

In this article we will discuss about different web content refreshing techniques. This article will discuss practical issues and their solutions on web content refreshment area.

This is more popularly known as dynamic web content generation so that the users always get current data.


The content refreshing is an important aspect in all the web applications. So the web developer must have a good understanding about different approaches and their advantages/disadvantages.

Web content refreshing on web pages is a critical need for all modern web applications. This is tyFigureally more applicable where the content has a significant impact and plays a major role. The reason behind it is to serve customers with current and updated content. So developers use different mechanisms to implement dynamic content. The traditional ways are always refreshing the entire web page. But it has some negative impact on the user experience and usability side. But we need to understand that the implementation of a particular technique always depends upon the requirement of the web application. If the entire page refresh does not hamper the functionality then it can a followed. If it requires refreshing a particular section then we have to plan it accordingly.

Traditional ways of refreshing web content:

Before we discuss the advanced and unique ways to refresh web content/pages, we need to understand the existing ways and their pros/cons. In traditional way, the entire page is generally refreshed by using different mechanisms. Following are some popular ways to refresh page content. But these mechanisms are also having issues and we will discuss it in out next section.

  • By explicit clicking on a button or link to send request
  • By clicking F5/refresh button to reload the entire webpage
  • By implementing some tag/meta data which refreshes the web page after certain interval
  • By using javascript functions to reload page based on a timer
  • By using jquery functions to refresh the page in a particular interval
  • By submitting any form to get new data which is also a type of content refresh

The main disadvantages of all these approaches are that the content refresh is at the page level. It means the data retrieval is always done based on the entire page even if it is not required all the time. So if you need to refresh a particular section of the page data then also you need to refresh the entire page. The obvious effect of this approach is to cause flickering the page and also lose your concentration from a particular section. This is really annoying from user's perspective and hence has a negative impact on the usability side. If the page has a lot of content and you are in the middle of it, then sudden refresh takes you back to the top of it and you lose your book mark. The other issue is losing already entered data in a form which is inside the page. If the page refreshes then you lose your entry and have to re-enter it again. So we can note down the following disadvantages.

  • Loosing scroll position due to entire page refresh
  • Loosing already entered data
  • Flickering of the page during retrieval of new content
  • Negative user experience

In modern complex web applications, the entire web page consists of several sections having different functionalities. For example, may be some portion is showing current stock market update, some showing current news and some section is a form to get some user input. So the requirement for each section is different from the other section. We need to understand what section needs an update and which remains static. But if we always take entire page refresh approach then it is not serving the purpose of the application itself. So the content refresh approach is always different from application perspective.

Modern approaches of web page refresh:

  • First approach: To start with simple options, we can consider of using frames. But in frame, as the entire webpage is divided into separate sections it is not always well organized. As a result, the pages look bad. And the refresh option is not totally solved by using frames because it only solves the visual impact.
  • Second approach: The second and most probably one of the good options is to use applet and DHTML. By using applet you can load any section of data in a web page without disturbing the other section and the DHTML will help you to identify the right section of html to update. This approach is quite efficient and gives freedom to move date back and forth between web browser and server. And most importantly, it does not depend upon the GET and POST operations at the page level. Now if we think about the other side of applet, then there is a security issue while using it in web pages. Applet runs in a browser JVM so the user must have JVM installed to get the applet work properly. So if the user does not have any knowledge about the dependency (like JVM here) then he/she might find it difficult to use.
  • Third approach: Now we will discuss about the third approach which is using HTTP GET and POST is a different way. These options can be used by javascript developers and solve the entire page refresh issue. In this approach, javascript sends the request to any server and gets its response. But the difference is, it does not have any effect on other section of the page. The user can use some timer or some action to invoke the javascript and the javascript function sends the request accordingly. After receiving the data developer can use it as per the requirement. The DHTML helps to identify the section and display the data which was received by the javascript.

Let us take an example to understand the concept.

Listing 1: The sample code shows the use of HTTP request to fetch data

      var xmlDocRefRef = null ;  

      function getData() {
        if (typeof window.ActiveXObject != 'undefined' ) {
          xmlDocRef = new ActiveXObject("Microsoft.XMLHTTP");
          xmlDocRef.onreadystatechange = processData ;
        else {
          xmlDocRef = new XMLHttpRequest();
          xmlDocRef.onload = processData ;
        } "GET", "content_refresh.html", true );
        xmlDocRef.send( null );
      function processData() {
        if ( xmlDocRef.readyState != 4 ) return ;
        document.getElementById("outputdata").value = xmlDocRef.responseText ;
      function emptyData() {
        document.getElementById("outputdata").value = 'Data cleaned, Press GetData to fetch data' ;
      <textarea id="outputdata" cols='50' rows='20'>No Data retrieved. Press 'GetData' to fetch data </textarea>
      <button onclick="getData()">GetData</button>  
      <button onclick="emptyData()">CleanData</button>

If you run the code the page will be loaded as shown below.

The html page is loaded

Figure 1: The html page is loaded

Now you click on the ‘GetData’ button and the data will be fetched and displayed as shown below.

Data loaded successfully

Figure 2: Data loaded successfully

One point we need to understand is that the entire process is done through polling. It means the browser must send some request to get the data and then it will be retrieved and displayed. But in case of applet the process can be automated and the server can push data to the applet whenever required. But in case of HTTPRequest object, user can only get data upon request. So polling is important factor to be considered in this type of approaches. So the exact approach depends upon the requirement of the application and there is no single approach which can be fitted in all scenarios.

Note: You can also see the DEMO of this example working in your browser.


Till now we have discussed different approaches for page refreshing. It allows multiple users to view, edit and submit data on webpage simultaneously without any annoying experience. The other advantage is that the user can check their update immediately without refreshing the entire page. The other positive impact is, it removes the flickering, loss of scroll position, loss of unsaved data issues. Hope you will try out these options and find it useful in your web application development.

Website: Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login