Transferring Huge XML Documents in PHP with an Ajax-driven Web Interface

by: Octavia Andreea Anghel

August 10, 2010

A simple way to transfer XML documents onto a server is to use an Ajax-driven Web interface to upload the files. However, this approach won't work for huge XML files because Ajax doesn't support uploading of files that large. In this article you will learn an innovative solution for transferring huge XML documents on the server via a Web interface using Ajax and the GET method. The solution works like this:

Transform the XML documents into a character string.
Split the character string into equal chunks (400 characters).
Save each chunk as a value in an array.
Transfer the chunks one by one using the Ajax mechanism into the final XML document (test.xml).

The remainder of the article provides step-by-step instructions for building an application for this solution.

The Functions That Run the Application

First, a JavaScript function gets a string as an argument and deletes white spaces from the beginning and the end of that string. This function is equivalent to the trim() function from PHP:


  function trim(s)
        {
        var trimmed = s.replace(/^\s+|\s+$/g, '') ;
        return trimmed; 
        }

A second JavaScript function, collapseWhiteSpaces, collapses white spaces generated by the Enter or Tab keys:


function collapseWhiteSpaces(allstr)
 {
 var whtSpMult = new RegExp("\\s\\s+", "g");
 var strWithoutMultipleSpaces = allstr.replace(whtSpMult, " "); 
 return strWithoutMultipleSpaces;
 }

The next function, clientRequests, is the main function. It does nearly all the work behind the application as follows:

Gets the reference of the textarea HTML element (<textarea id="xml" rows="10" cols="50">) using its ID from the Web interface
Declares the chunks array, which will be storing the transformed XML document
Sets the final XML document name that will contain all the chunks which will rebuild the XML document from the interface
Prepares the document for the transfer by replacing the "<" and ">" characters with the &lt and &gt entities and deleting the white spaces generated by the Enter or Tab keys
Splits the XML documents into equal 400-character substrings (400 is an optional value; you can choose any value you want) and builds the chunks array
Stores the calls of the saveChunks() function, which contains the Ajax mechanism implementation and is described after the clientRequests function body

See Listing 1 for the complete code of the clientRequests function.

The saveChunks() function builds the URL of the server script (in this case 2.php) as well as the following parameters:

XMLchunck -- the current chunk, which is sent through the URL
chunkNr -- the total number of chunks
chuncks -- the current chunk number
XMLName -- the XML document name (in this case test.xml)

The saveChunks() function then opens a connection to the server using a GET request and calls the callback function to check the progress of requests, identify the result of the request and handle data returned from the server. See Listing 2 for the complete code of the saveChunks() function.

The final function is callback(), which is the Ajax callback function. It is responsible for checking the progress of requests, identifying the result of the request and handling data returned from the server. See Listing 3 for the complete code of the callback() function.

Listing 4 shows all the code for the complete application, which puts all the above functions together.

The second page involved in this application's Ajax mechanism opens the test.xml file, writes each chunk one by one as they comes from the 1.php application using the $_GET['XMLchunck'] parameter, and lists a progress percentage using $_GET['chunkNr'] and $_GET['chuncks'] parameters into this simple formula (int)(( $_GET['chunkNr'] *100)/ $_GET['chuncks']). See Listing 5 for the complete code for the second page of the Ajax mechanism.

Comment and Contribute

0 Comments (click to add your comment)

Your comment has been submitted and is pending approval.

Author:

Octavia Andreea Anghel

Comment:

Name/nickname:
Email:

Comment:

(Maximum characters: 1200). You have characters left.