I did some searching and found that the easiest way for me to redirect an Ajax request from one of my pages to a different server would be to make the request to a PHP script on my own server and have that script make the request to the other server. This is necessary because Ajax requests in JavaScript in client browsers cannot be made to a server other than the one providing the current page.

Although I found a few examples, I still needed to write some of my own code to see if I could make this generic. I am testing it now.

The client side AJAX code itself is fairly simple. I request data from a site and then search for expected information in the results. I am looking for data in a table that tells me the temperature of Lake Tahoe at a depth of 1.0m from one of the four buoys in the lake provided by NASA and monitored by U.C. Davis. The JavaScript:

<script type="text/javascript">
	function ajaxRequest() 
	{
		/*
		 * Return the apropriate AJAX object based on the browser using this 
		 * common detection method.
		 */

		var activexmodes = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP'];
		if( window.ActiveXObject )
		{
			for( var Index = 0; Index < activexmodes.length; ++Index ) 
			{
				try { return new ActiveXObject( activexmodes[Index] ); }
				catch (e) {}
			}
		}
		else if( window.XMLHttpRequest )
			return new XMLHttpRequest();
		else
			return false;
	}
	
	function GetTableData( Data, ColumHeading, ColumnNumber )
	{
		var position = Data.indexOf( '<td>' + ColumHeading );
		if( position < 0 )
			return;
			
		position += 4;
		
		while( ColumnNumber > 0 )
		{
			position = Data.indexOf( '<td>', position );
			if( position < 0 )
				return;
			
			position += 4;
			--ColumnNumber;
		}
		
		var endposition = Data.indexOf( '</td>', position );
		if( endposition < 0 )
			return;
		
		return Data.substring( position, endposition );
	}

	function DisplayData( Data )
	{
		var output = document.getElementById( '_dave_sidebar_ajax_widget_' );
		if( output == null )
			return;
			
		var thedate = GetTableData( Data, 'Last Update Date (UTC)', 2 );
		var thetime = GetTableData( Data, 'Last Update Time (UTC)', 2 );
		var thetemp1 = GetTableData( Data, 'Water temp.: 0.5m', 2 );
		thetemp1 = thetemp1.substring( 0, 4 );
		var thetemp2 = GetTableData( Data, 'Water temp.: 1.0m', 2 );
		thetemp2 = thetemp2.substring( 0, 4 );
		
		var result = thedate + ' ' + thetime + ' UTC<br/>0.5m ' + thetemp1 + 'F<br/>1.0m ' + thetemp2 + 'F<br/>';
			
		output.innerHTML = "Lake Tahoe Temperature<br/>" + result;
	}

	var mygetrequest;

	function GetTheData() 
	{
		mygetrequest = new ajaxRequest();
		mygetrequest.onreadystatechange = function() 
		{
			if( mygetrequest.readyState == 4 )
			{
				/*
				 * Check for a valid status for the request and also check that
				 * the current page still exists. The data is only processed if
				 * the state of the request and the page are acceptable.
				 */

				if( mygetrequest.status == 200 )
				{
					DisplayData( mygetrequest.responseText );
				}
				else
				{
					DisplayData( "" );
				}
			}
		}

		/*
		 * Make the AJAX request.
		 */
		mygetrequest.open( "GET", "proxyget.php?proxy_to_url=http://laketahoe.jpl.nasa.gov/get_imp_weather", true );
		mygetrequest.send( null );
	}

	// This is essentially the main function of this script:
	GetTheData();

</script>
<div id="_dave_sidebar_ajax_widget_"></div>

The majority of the work done by the script is the parsing of the data. Even then, it is a very small bit of scripting. I actually add it as-is to a widget in my WordPress sidebar of this blog.

The PHP code is a bit less work. This uses nearly all URL parameters sent via the AJAX call as parameters for the GET request to the other server. I have not tested this to see if the parameters all work correctly. For instance, encoding special characters might need to be handled in some special way such as re-encoding them before using them again for the GET request. Here is the code as it now stands. Note that I use cURL because it seems to be available on my ISP web server and because the example I downloaded uses it. It makes the code quite small:

<?php
	function DoAjaxRedirect()
	{
		if( !isset( $_GET['proxy_to_url'] ) )
		{
			echo "Error on line " . __LINE__ . ": proxy_to_url not set.";
			return;
		}
			
		$UseURL = $_GET['proxy_to_url'] . "?";
		
		foreach( $_GET as $key => $value )
		{
			if( $key != "proxy_to_url" )
			{
				$key = htmlspecialchars( $key );
				$value = htmlspecialchars( $value );
				$UseURL .= "$key&=$value&";
			}
		}

		$handle = curl_init();
		curl_setopt($handle, CURLOPT_URL, $UseURL);
		curl_setopt($handle, CURLOPT_CONNECTTIMEOUT, 10);
		curl_setopt($handle, CURLOPT_RETURNTRANSFER, 1);
		$Data = curl_exec($handle);
		curl_close($handle);
		echo $Data;
    }
	
	DoAjaxRedirect();
?>

The code clearly shows that I want to extract the final server name for the URL parameters and then append the rest of the incoming parameters to URL for the request. This should allow me to redirect any Ajax request to any other server as long as the parameters work properly (see my earlier comment about encoding).

I am interested in the Lake Tahoe water temperature because it helps me in the Spring and Fall decide how to dress for kayaking when I expect to be practicing rolls or doing other things where I’ll be in the water. Lake Tahoe has cold water and I don’t want to be without a wet suit if I intend to spend a lot of time in the water.