Cross-site Ajax: Exchanging data

Second part: exchange data with another site

In the first part of this tutorial we saw how to read data on another site and display it asynchronously in the current page with Ajax.

The second part shows in a really functional demonstration how to provide data to another site for its processing, before retrieving the results and display it on the current page, with Ajax again.

Principle

The principle is a development of the first part: it still uses the PHP function file_get_contents() to retrieve the data on another site, but this time there is a need for additional script placed on the second site, which handles data and returns a result.

  1. On the site A, the page cross-ajax-site.html uses Ajax and a JavaScript file, cross-ajax-site.js.
    It contains a form for the user to enter data to be processed by the site B.
  2. In Ajax is called a PHP script cross-ajax-call.php by providing in parameter the data entered into the form.
  3. This script creates a cross-ajax-get.txt file containing such data.
  4. It runs on the site B the cross-ajax-reply.php script.
    To do this it uses the include function with the URL of the script as a parameter.
  5. This script on the site B uses a file_get_contents() function to read the data in the cross-ajax-get.txt file generated on the site A.
  6. It performs the processing and displays the desired result (it could also put it in a file).
  7. The original script on the site A recovers this result in a buffer (it could also retrieve it in a file on the site B).
  8. The original script creates a new file cross-ajax-final.txt which contains the result.
  9. It retrieves the contents of this file with the GET function of the XMLHttpRequest object.
  10. It is displayed in the page that contains the form.

The JavaScript code is very similar to that described in the first part. For PHP scripts, they include several crucial part for the exchange of data between sites, which we will analyse.

Using PHP

The two essential elements are passing parameters to another site, and executing a script on a remote site.

Create a parameter file

JavaScript code to retrieve the contents from the form: 

var script = "ajax-cross-call.php";   
var data = document.ajax.data.value;  
 	
xhr.onreadystatechange=function()
{ 
	if(xhr.readyState == 4)
	{
			retrieve();
	}
}; 
xhr.open("POST", script, true);		
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("data=" + data);

The content of the variable data is now a parameter of the PHP script called by the XHR object.

Providing data to a remote site

The system chosen is the use of the file_get_contents function on the remote site with for parameter a URL already defined.

The cross-ajax-call.php PHP script on the site A generates a file containing the parameters of the form: 

$callerdata = "ajax-cross-get.txt"; 
$content = $posted["data"];  
$nfile = fopen($callerdata, "w");
if($nfile != false)
{
	 fwrite($nfile, $content);   
	 fclose($nfile);
}

These data in the form are assigned to the variable $content and saved in the file cross-ajax-get.txt.

On the site B, it will be in the script cross-ajax-reply.php this code: 

$caller = "http://www.a.com/ajax-cross-get.txt";
$content = file_get_contents($caller);

$caller is the URL of the site on which the data are collected.
$content contains these data.

In our example, the script also recover data on the B site to perform a purely demonstrative processing. The result of this processing is displayed with the echo command.
The processing is to uppercase the text provided by the site A, and concatenate it a text read on the site B before showing everything.

Executing a PHP script on a remote site

This is done with the function include. In this case the script is executed by the server of the site B, and it displays the results.
He does not have access to the variables of the script that calls it, contrary to what would happen on a same site. 

$script = 'http://www.b.com/ajax-cross-reply.php';

include($script);

The include function does not allow parameters (this may depend on the configuration).

Retrieving results of a script on the remote site

The PHP function ob_start puts in a buffer all that is displayed by this script: 


ob_start();
include($script);
$result = ob_get_contents();
ob_end_clean();

The $result variable is assigned the content of the buffer with the ob_get_contents() function.

Showing results in Ajax

The contents of the buffer is stored in a file on the site A by the script cross-ajax-call.php after the call of the script on the site B:

  $f = fopen("ajax-cross-final.txt", "w");
  fwrite($f, $result);   
  fclose($f);

The results retrieved from the buffer are assigned to $result are stored in the file cross-ajax-final.txt whose contents are retrieved by GET as in the example of the first part of this tutorial.

Problems

This system is designed to provide perfect security against malicious code injections, but nonetheless if you see a security vulnerability in its functioning, you can talk on the forum.

The functions employed are normally available as standard in PHP 4.3. However, it is possible that the server configuration does not allow remote include or the file_get_contents() function. You may have to circumvent these limitations.

Demo and sources

© 2008-2012 Xul.fr