jQuery AJAX adds '%20' as space, normal javascript xmlhttp request doesn't

Question

I have this jQuery AJAX function which retrive data from a CKEDITOR text_area and send it through AJAX to the .php file:

function saveEmailData(){
    var text_body = encodeURIComponent(CKEDITOR.instances.text_body.getData());

    $.ajax({
        url: 'al_ajax.php',
        cache: false,
        data: {area: text_body, use: 'savemaildata'},
        type: 'POST',
        success: function(result){
                    alert(result);
                 },
        error: function(result){
                    alert('Error');
                },
    });
}

PHP:

$area = $link->real_escape_string($_POST['area']);

$insert_query = $link->query("INSERT INTO ALLARME_EMAIL_TEXT (area)
                                VALUES ('$area')
                              ON DUPLICATE KEY UPDATE
                                area = '$area'
                              ")
                              or die('Error.');

if($insert_query){          
    echo 'OK!';
}

The problem is that using jQuery AJAX, I'll have on the database %20, with the normal javascript function, this doesn't happen: I always use. Why?

function saveEmailData(){
    var text_body = encodeURIComponent(CKEDITOR.instances.text_body.getData());

    if(window.XMLHttpRequest) {
      xmlhttp=new XMLHttpRequest();     
    } else {
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {
      if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        alert(xmlhttp.responseText);
      }
    }

xmlhttp.open("POST","al_ajax.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("area="+text_body);
}

Answer 1

That's not jQuery's fault. You escaped the text body twice:

var text_body = encodeURIComponent(CKEDITOR.instances.text_body.getData());

Note jQuery already does encodeURIComponent to anything you pass in as data. The solution is just to get rid of it.

function saveEmailData(){
    var text_body = CKEDITOR.instances.text_body.getData();

    $.ajax({
        url: 'al_ajax.php',
        cache: false,
        data: {area: text_body, use: 'savemaildata'},
        type: 'POST',
        success: function(result){
                    alert(result);
                },
        error: function(result){
                    alert('Error');
                },
    });
}