jquery - jQuery AJAX はスペースとして '%20' を追加しますが、通常の JavaScript xmlhttp リクエストは追加しません

Question

からデータを取得してファイルに送信するこのjQuery AJAX関数があります。CKEDITOR text_areaAJAX.php

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!';
}

問題は、 を使用しjQuery AJAXて、データベース%20にある を通常のjavascript functionで使用すると、これが起こらないことです。私は常に使用します。なんで？

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);
}