Vladdy
03-12-2003, 12:00 PM
If I am to write a tutorial I figured it deserves it’s own thread. So anyway here are the basics on how to implement server polls using client-side javascript without reloading the HTML page.
Goal:
Get information from the server and use it to update HTML document without reloading it.
Solution:
Spread functionality between two files:
- HTML document page.html
- Server-side script that dataserver.asp that provides the data.
For the sake of simplicity we are going to have a couple of links in HTML document, which when clicked will activate the script that polls the server. Returned information will be displayed in an alert box.
<html>
<head>
<title>Background Server Poll Demo</title>
<script>
function pollServer(query)
{ if(script) return false; //Do not send new request while
//there is one being processed
script = document.createElement('script');
script.src = ‘dataserver.asp?’ + query;
document.getElementsByTagName('head')[0].appendChild(script);
}
function processServerResponse(data)
{ alert(‘Server returned: ‘ + data);
setTimeout(‘requestProcessed()’,50);
return;
}
function requestProcessed()
{ document.getElementsByTagName('head')[0].removeChild(script);
script = null;
return;
}
</script>
</head>
<body>
<a href=”#” onclick=”pollServer(‘get=info1’); return false;”>Get info 1</a>
<a href=”#” onclick=”pollServer(‘get=info2’); return false;”>Get info 2</a>
</body>
</html>
Server side code:
<% ‘Add all the prerequisite code here
‘ We are returning js !!!
Response.Content = “text/javascript”
‘ Add all the happy http stuff to disable caching here
‘ like Response.Expires = Yesterday
Action = Request.QueryString(“get”)
If Action = “info1”Then
ReturnedData = “Returned info1 data”
Else If Action = “info2” Then
ReturnedData = “Returned info2 data”
‘Expand as needed
End If
%>
processServerResponse(‘<%=ReturnedData%>’);
<% ‘ That is pretty much it.
%>
How it works
When you click on one of the links the pollServer function is called. It creates a new script node and sets the node’s src attribute to the name of the server-side script file with attached query string that was passed as a function parameter. It then appends the created node to the document head. At this point the request is set to the server to get the javascript code to execute.
The server side script examines the query string and populates the ReturnedData string with requested information. This string is returned as a parameter to the processServerResponse function. As a result the client gets a javascript containing one line which is a call to a function residing with the HTML page.
The processServerResponse function displays the received data in alert box. Then it calls the requestProcessed function via setTimout (QUIZ: Why it is important to use setTimout and not the straight call?)
The requestProcessed function removes the script node from the document head.
Turning it into a practical application
As shown the new requests are ignored until the current one is being processed. Reception of requests from the user and their processing should be untied so that a queue can be formed.
Server side script can obtain data from sources such as files, databases and whatever else you desire. The resultant data string can be delimited to represent tables and such as long as the format is “agreed upon” between the server-side script delivering data and client side script that is presenting it.
It goes without saying that client side script can present the received data on the page and not in alert box.
Goal:
Get information from the server and use it to update HTML document without reloading it.
Solution:
Spread functionality between two files:
- HTML document page.html
- Server-side script that dataserver.asp that provides the data.
For the sake of simplicity we are going to have a couple of links in HTML document, which when clicked will activate the script that polls the server. Returned information will be displayed in an alert box.
<html>
<head>
<title>Background Server Poll Demo</title>
<script>
function pollServer(query)
{ if(script) return false; //Do not send new request while
//there is one being processed
script = document.createElement('script');
script.src = ‘dataserver.asp?’ + query;
document.getElementsByTagName('head')[0].appendChild(script);
}
function processServerResponse(data)
{ alert(‘Server returned: ‘ + data);
setTimeout(‘requestProcessed()’,50);
return;
}
function requestProcessed()
{ document.getElementsByTagName('head')[0].removeChild(script);
script = null;
return;
}
</script>
</head>
<body>
<a href=”#” onclick=”pollServer(‘get=info1’); return false;”>Get info 1</a>
<a href=”#” onclick=”pollServer(‘get=info2’); return false;”>Get info 2</a>
</body>
</html>
Server side code:
<% ‘Add all the prerequisite code here
‘ We are returning js !!!
Response.Content = “text/javascript”
‘ Add all the happy http stuff to disable caching here
‘ like Response.Expires = Yesterday
Action = Request.QueryString(“get”)
If Action = “info1”Then
ReturnedData = “Returned info1 data”
Else If Action = “info2” Then
ReturnedData = “Returned info2 data”
‘Expand as needed
End If
%>
processServerResponse(‘<%=ReturnedData%>’);
<% ‘ That is pretty much it.
%>
How it works
When you click on one of the links the pollServer function is called. It creates a new script node and sets the node’s src attribute to the name of the server-side script file with attached query string that was passed as a function parameter. It then appends the created node to the document head. At this point the request is set to the server to get the javascript code to execute.
The server side script examines the query string and populates the ReturnedData string with requested information. This string is returned as a parameter to the processServerResponse function. As a result the client gets a javascript containing one line which is a call to a function residing with the HTML page.
The processServerResponse function displays the received data in alert box. Then it calls the requestProcessed function via setTimout (QUIZ: Why it is important to use setTimout and not the straight call?)
The requestProcessed function removes the script node from the document head.
Turning it into a practical application
As shown the new requests are ignored until the current one is being processed. Reception of requests from the user and their processing should be untied so that a queue can be formed.
Server side script can obtain data from sources such as files, databases and whatever else you desire. The resultant data string can be delimited to represent tables and such as long as the format is “agreed upon” between the server-side script delivering data and client side script that is presenting it.
It goes without saying that client side script can present the received data on the page and not in alert box.