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("ss+", "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
<
and>
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 theclientRequests
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 URLchunkNr
— the total number of chunkschuncks
— the current chunk numberXMLName
— the XML document name (in this casetest.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.