Refresh Portion Of Your Web Page Using XMLHTTP

• Download source files - 2 Kb

Introduction

Did you ever have to refresh only selective part of a web page without having to refresh the whole page?. If yes, you are not alone. Fortunately, there are number of solutions which can address this issue, including remote scripting and XMLHTTP. This articles explains how a part of web page can be refreshed by using XMLHTTP, without having to refresh the whole page .

XMLHTTP

XMLHTTP object can be used to make HTTP request from the web browser to the server. XMLHTTP is part of Microsoft's XML parser and it is already installed in your machine if you have Internet Explorer.

Please refer MSDN help on how to use XMLHTTP object. Also, I recommend you reading my article Making HTTP Communication from MFC/Windows Application first, because I use the same techniques here too.

Example

In the above example web page, we can select a country from the country list box. For a country selected, we'll display list of states/province for that country. When you click on a country, a HTTP request to the web server will be send to get all the states for the specific country. States list box will be refreshed with the result from the server. Note that we are not using the submit to send a HTTP request to the web server. Instead, we use XMLHTTP since we do not want the whole page refreshed. Also, note that both request and response are in XML string and we will have to use the XML DOM to read the node values.

If you selected Canada in the country list box, the XML request string which is send from the web browser to the web server will look like below:

<RequestStates Country='Canada'></RequestStates>

The server (i.e. states.asp in this case) will process this request and sends back XML response, which looks like as shown below:

<Response>
	<State>Alberta</State>
	<State>British Columbia</State>
	<State>Ontario</State>
	<State>Quebec</State>
</Response>

The client has to process this XML response and update the states list box. The DisplayStates() function in demo.html takes care of this functionality.

Related Articles

The article Refreshing only part of your Web Page is on the same topic. However, it uses remote scripting (not XMLHTTP) to refresh part of web page.

Installation Notes

Download the sources (states.asp and demo.html) to the root directory of your web server. Note that the sample application assumes that your web server runs on the same machine as the client. If your web server runs on different machine, you have to change the URL name in XMLHTTP's open() method (in demo.html) appropriately. This sample application will not work if the URL specified is wrong.