Агляд: In this article we will discuss about different web content refreshing techniques. 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. 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.
Увядзенне: Web content refreshing on web pages is a critical need for all modern web applications. This is typically 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 java script 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. У выніку, 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 java script developers and solve the entire page refresh issue. In this approach, java script 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 java script and the java script 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 java script.
Let us take an example to understand the concept
Listing 1: The sample code shows the use of HTTP request to fetch data
[код]
<HTML>
<скрыпт>
var xmlDocRefRef = null ;
function getData() {
калі (typeof window.ActiveXObject != ‘undefined’ ) {
xmlDocRef = new ActiveXObject(“Microsoft.XMLHTTP”);
xmlDocRef.onreadystatechange = processData ;
}
яшчэ {
xmlDocRef = new XMLHttpRequest();
xmlDocRef.onload = processData ;
}
xmlDocRef.open( “GET”, “content_refresh.html”, праўда );
xmlDocRef.send( нулявы );
}
function processData() {
калі ( 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>
<br></br>
<button onclick=”getData()”>GetData</кнопка>
<button onclick=”emptyData()”>CleanData</кнопка>
</цела>
</HTML>
[/код]
If you run the code the page will be loaded as shown below
Pic 1: The html page is loaded
Now you click on the ‘GetData’ button and the data will be fetched and displayed as shown below.
Pic 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.
Заключэнне: 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.
