XMLHttpRequest with <script> and PHP

IFrames are commonly cited as the tag of choice for "dynamic scripting" without XMLHttpRequest. The basic idea is that you create a new iframe, set its onload property, and then set its src property to the URL that you want to fetch. The problem is that we want to fetch a plain text resource (such as a JavaScript file, which can be treated as plain text) but the <iframe> tag wants to display an HTML document. Plain text loaded into an iframe (in Firefox at least) ends up stuffed into a <pre> tag, and has its angle brackets and ampersands replaced with their corresponding HTML entities.

It should be possible to extract the contents of the <pre> tag and replace the entities with the characters they replaced. I decided to go a different route, however, and encode the plain text to be transferred in a CDATA section of an XML file. Here is a PHP script that does this:

<?php 
header("Content-Type: text/xml");
echo '<?xml version="1.0"?>';
echo '<data>';
echo '<![CDATA[';
readfile($_GET["url"]);
echo ']]>';
echo '</data>';
?>

With this script, it was pretty easy to write a getText() function that obtained the contents of a specified URL as plain text. In Firefox, anyway. Things got very complicated in IE, and I simply could not make it work on this platform. (Remember that the motivation is to find an alternative to XMLHttpRequest to use when ActiveX is disabled in IE).

Kae Verens has made this work but I'm not sure what he's doing differently. I don't think he's using an XML CDATA section, and I didn't study his server-side code well enough to figure out how he encodes the data for transfer to the client.

Anyway, after failing with the <iframe> approach, I decided to try using a <script> tag instead. Again, we use a server-side script to encode the contents of the URL we want to transfer. This time, we encode the contents as a (possibly very long) JavaScript string, and pass that string to a JavaScript function. One pleasant side effect of this approach is that there is no need for an onload or onreadystatechange event handler. When the script loads, it executes, and we've encoded the callback call into the script, so the callback just gets called.

Enough talk. Here is the server-side PHP script. It should be in a file name jsquoter.php.

<?php 
header("Content-Type: text/javascript");
// Get arguments from the URL
$func = $_GET["func"];       // The function to invoke in our js code
$filename = $_GET["url"];    // The file or URL to pass to the func
$lines = file($filename);    // Get the lines of the file
$text = implode("", $lines); // Concatenate into a string
// Escape quotes and newlines
$escaped = str_replace(array("'", "\"", "\n", "\r"), 
		       array("\\'", "\\\"", "\\n", "\\r"),
		       $text);
// Output everything as a single JavaScript function call
echo "$func('$escaped');"
?>

And here is the client-side function that uses the PHP script above. We've succeeded in duplicating the API of the HTTP.getText() function that we began with:

HTTP.getTextWithScript = function(url, callback) {
    // Create a new script element and add it to the document
    var script = document.createElement("script");
    document.body.appendChild(script);

    // Get a unique function name
    var funcname = "func" + HTTP.getTextWithScript.counter++;

    // Define a function with that name, using this function as a
    // convenient namespace.  The script generated on the server will
    // invoke this function
    HTTP.getTextWithScript[funcname] = function(text) {
	// Delete the script tag we created
	document.body.removeChild(script);
	// Delete this function
	delete HTTP.getTextWithScript[funcname];
	// And invoke the callback 
	callback(text);
    }

    // Encode the url we want to fetch, and the name of the function
    // as arguments to the jsquoter.php server-side script.  Set the src
    // property of the script tag to fetch the URL
    script.src = "jsquoter.php" + "?url=" + encodeURIComponent(url) +
                  "&func=" +
                  encodeURIComponent("HTTP.getTextWithScript." + funcname);
}

// We use this to generate unique function callback names in case there
// is more than one request pending at a time.
HTTP.getTextWithScript.counter = 0;

This code has been lightly tested in Firefox and IE6, (with PHP 4.1 on the server). It works for me! Feel free to use it yourself, and please post any suggestions or bug reports in the comments.

One final note: in some PHP configurations, the url argument we pass to jsquoter.php has to be a local file. In many configurations, however, it can be an arbitrary URL. In this case, the PHP script acts as a proxy server and defeats the "same-origin" restriction that prevents XMLHttpRequest from making requests to any server other than the one from which the script was loaded. This should be safe as long as your web application is in control of the URLs that are submitted to jsquoter.php. But don't let the user specify the URL to be loaded in this way, or you'll probably be opening up a security hole.