CODEWITHSUNDEEP
phpjavascriptjqueryajax
user1920706
user1920706

Reputation: 23

Weird AJAX behavior - Didn't save correct data once

I'm looking to implement AJAX in this forum-style site that I run, but recently, while testing it out to get the gist of it, I experienced a weird (and potentially devastating) loss of data, and was wondering if it's something I should be worried about.

Here's what happened: I'm new at AJAX and was testing it out in a simple text-editor app that I created a bit ago. I basically changed the old "Save" form to run with AJAX instead (it posts data to a php script). Everything was going great and as expected, but out of the blue I went to load up a text file, and found it had only saved the first 3 lines of text.

That specific day I was working on and saving two files, and the same thing happened to both. Since then, I've been frantically trying to recreate the behavior, but I haven't been able to.

Is this just a fluke, or (more likely) am I just unaware of something that I ought to be aware of with AJAX? Thank you all in advance - this is the first question I've asked personally, but I've benefited infinitely from the questions and answers generated by this community over the years.

Here is the JS code I used at the time:

function saveDraft()
    {
        if ($('#title').html() == "Title")
        {
            alert("Please change the title of your draft from \"Title\"");
            return;
        }
        $('#statusBox').html("...saving");

        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                $('#statusBox').html(xmlhttp.responseText);
                //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("POST","createTextFile.php",true);
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var fileName = $('#fileName').val();
        var fileContent = $('#fileContent').val();
        xmlhttp.send("fileName="+fileName+"&fileContent="+fileContent);
    }

I have since discovered jQuery makes this 10x cleaner and am using:

function saveDraft()
    {
        $.post("createTextFile.php",
        {
            fileName:$('#fileName').val(),
            fileContent:$('#fileContent').val()
        },
        function(data){
            $('#statusBox').html(data);
        });
    }

And finally the php code:

$fileName = $_POST['fileName'];
$fileContent = $_POST['fileContent'];

$illegalChars = array(" ", "#", "%", "&", "{", "}", "\\", "<", ">", "*", "?", "/", "$", "!", "'", "\"", ":", "@", "+", "`", "|", "=");

$fileName = str_replace($illegalChars, "_", $fileName);
$fileHandle = fopen("files/".$fileName.".txt", 'w') or die("can't open file");
fwrite($fileHandle, $fileContent);
fclose($fileHandle);

echo "Saved on ".date("n\.j\.y \a\\t h:i:s a");

Upvotes: 2

Views: 116

Answers (1)

Barmar
Barmar

Reputation: 781935

You're not URL-encoding the parameters in your xmlhttp.send() call. If fileContent contains an & character, that will be treated as the end of the parameter by PHP (or any other server-side scripting language).

This shouldn't happen with the jQuery version. When you provide the data as an object, jQuery automatically performs proper encoding of the parameters.

Upvotes: 1

Related Questions