If I am to write a tutorial I figured it deserves it抯 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 = 慸ataserver.asp??+ query;
document.getElementsByTagName('head')[0].appendChild(script);
}
function processServerResponse(data)
{ alert(慡erver returned: ?+ data);
setTimeout(憆equestProcessed()?50);
return;
}
function requestProcessed()
{ document.getElementsByTagName('head')[0].removeChild(script);
script = null;
return;
}
</script>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/??onclick=攑ollServer(慻et=info1?; return false;?gt;Get info 1</a>
<a href=??onclick=攑ollServer(慻et=info2?; return false;?gt;Get info 2</a>
</body>
</html>
Server side code:
<% 慉dd all the prerequisite code here
?We are returning js !!!
Response.Content = æ•ext/javascript?br />
?Add all the happy http stuff to disable caching here
?like Response.Expires = Yesterday
Action = Request.QueryString(æ¼et?
If Action = æƒnfo1擳hen
ReturnedData = æÂÂœeturned info1 data?br />
Else If Action = æƒnfo2?Then
ReturnedData = æÂÂœeturned info2 data?br />
æ…Âxpand as needed
End If
%>
processServerResponse(?lt;%=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抯 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 æ³greed 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 = 慸ataserver.asp??+ query;
document.getElementsByTagName('head')[0].appendChild(script);
}
function processServerResponse(data)
{ alert(慡erver returned: ?+ data);
setTimeout(憆equestProcessed()?50);
return;
}
function requestProcessed()
{ document.getElementsByTagName('head')[0].removeChild(script);
script = null;
return;
}
</script>
</head>
<body>
<a href=http://www.webdeveloper.com/forum/archive/index.php/??onclick=攑ollServer(慻et=info1?; return false;?gt;Get info 1</a>
<a href=??onclick=攑ollServer(慻et=info2?; return false;?gt;Get info 2</a>
</body>
</html>
Server side code:
<% 慉dd all the prerequisite code here
?We are returning js !!!
Response.Content = æ•ext/javascript?br />
?Add all the happy http stuff to disable caching here
?like Response.Expires = Yesterday
Action = Request.QueryString(æ¼et?
If Action = æƒnfo1擳hen
ReturnedData = æÂÂœeturned info1 data?br />
Else If Action = æƒnfo2?Then
ReturnedData = æÂÂœeturned info2 data?br />
æ…Âxpand as needed
End If
%>
processServerResponse(?lt;%=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抯 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 æ³greed 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.