AJAX function that uses the POST method creates the following error. Error: returned status code 414 Request-URI Too Large

Question

I'm using an AJAX function to transfer data to a PHP file. The data that I'm passing to the AJAX function is 17000 characters long. This is generally too long to transfer using the GET method, however one would think that the POST method would allow for such large variables to be be passed on.

Here's the AJAX function I'm using:

function ajaxFunction(id, datatypeString, pathToFileString, variable){

    var myRequestObject = null; 

    document.getElementById(id).innerHTML = "<span>Started...</span>";

    if (window.XMLHttpRequest)
    {
        myRequestObject = new XMLHttpRequest();
    } 
    else if (window.ActiveXObject) 
    {
        try 
        {
            myRequestObject = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e)
        {
            try 
            {
                myRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e) {}
        }
    }


    myRequestObject.onreadystatechange = function()
    { 
        document.getElementById(id).innerHTML = "<span>Wait server...</span>";
        if(myRequestObject.readyState == 4)
        {
            if(myRequestObject.status == 200)
            {
                // process a document here
                document.getElementById(id).innerHTML = "<span>Processing file...</span>"

                if(datatypeString == "txt"){
                    //Injects code from a text file
                    document.getElementById(id).innerHTML = myRequestObject.responseText;
                }
                else if(datatypeString == "xml"){
                    //Injects code from an XML file
                    document.getElementById(id).innerHTML = myRequestObject.responseXML.documentElement.document.getElementsByTagName('title')[0].childNodes[0].nodeValue;   // Inject the content into the div with the relevant id 
                }
                else{
                    document.getElementById(id).innerHTML = "<span>Datatype exception occured</span>";
                }

            }   
            else    
            {
                document.getElementById(id).innerHTML = "<span>Error: returned status code " + myRequestObject.status + " " + myRequestObject.statusText + "</span>";
            }   
        } 
    }; 

    myRequestObject.open("POST", pathToFileString+variable, true); 
    myRequestObject.send(null); 
}

And this is the function call to that AJAX function:

ajaxFunction("myDiv", "txt", "processdata.php", "?data="+reallyLargeJavascriptVariable);

Also this is the error that I'm getting when the AJAX function is called:

Error: returned status code 414 Request-URI Too Large

I've looked around on Stackoverflow and other websites for a solution to this problem. However most answers come down to: "Use the POST method instead of the GET method to transfer the data."

However as you can see in the AJAX function, I'm already using the POST method.

So I'm not sure what's going on here and what to change in my code to solve this issue. I simply want to be able to pass very large variables to my function, but with this function that doesn't seem possible.

Given the error, the limitations of the URI seem to be causing the problem. However, I'm using the POST method and not the GET method, so why is the variable still passed via the URI? Since I am not using the GET method, but rather the POST method like many people suggested in other threads about this problem, I'm not sure why the URI is involved here and is seemingly causing a problem.

Apparently the URI is putting a limit on the size of the variable that I can transfer, however I'm using the POST method, so why is this error occurring and how can I adjust my AJAX function to make it work with the large variables that I want to transfer using AJAX?

Answer 1

When you're doing a POST you need to pass the POST data on the .send (you're currently passing null). You need to set a few header details, as well.

myRequestObject.open("POST", pathToFileString, true);
myRequestObject.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
myRequestObject.setRequestHeader("Content-length", variable.length);
myRequestObject.send(variable);

If you're currently passing a question mark in the start of variable or end of the path go ahead and remove it.