javascript - AJAX エラー「setRequestHeader」が定義されていません

Question

コードで何が間違っているのか少し混乱しています

function submitArticle() { 
   var postTitle = encodeURIComponent(document.getElementById('postTitle').value);
   var postDes   = encodeURIComponent(document.getElementById('postDes').value);
   var postCont  = encodeURIComponent(document.getElementById('postCont').value);   
   var data = "postTitle=" + postTitle + "&postDes=" + postDes + "&postCont=" + postDes;                                     
   var getXML =  function () {
        try {

            xhr = new XMLHttpRequest();
          }
          catch(e) {
            try {
              xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e) {
              try {
                  xhr = new ActiveXObject("Msxml2.XMLHTTP");
              }
              catch(e) {
                alert("Your Browser is not Supported");

              }
            }                          
          }                                
      } 
       open('POST', 'http://localhost/blog/engine/engine.php', true);
       setRequestHeader("Content-type", "application/x-www-form-urlencoded");               
       send(data);                                                                                                              
       getXML.onreadystatechange = function() {
          if(this.readyState === 4) {
              if(this.status ===200) {
                 alert(this.responseText);
              }
              else {
                alert("status" + this.status);
               }
          }
          else {
            alert("readyState" + this.readyState);
          }
      }
   getXML();                                                                                           
   return true;               
}

これにはonclickイベントを使用しています。URL を確認し、変数の値の入力に誤りがないことを確認しました。リンク「localhost/blog/app/POST」を示す新しいウィンドウとともに「setRequestHeader is not defined」エラーが表示されます

できる限り調べましたが、次に何をすべきかわかりません。
また。私が getXML() 関数に対して行った方法よりも、コードを書くためのより良い方法があるに違いありません。