Почему нельзя отделить функцию для xmlHttp.onreadystatechange?

Question

Ниже файл JS test.js` отлично работает в моем HTML.

function sendData()
{
    var formData = new FormData( document.querySelector("form") );
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  function(){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);
    }
}
}

ob = document.getElementById("submit"); 
ob.addEventListener("click",sendData);

Теперь я хочу разделить их

        if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);

в одной функции.

Я переписываю test1.js как test2.js.

var xmlHttp;
function ready(){        
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ 
        alert(xmlHttp.responseText);
        }
}

function sendData()
{
    var formData = new FormData( document.querySelector("form") );
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  ready;
}

ob = document.getElementById("submit"); 
ob.addEventListener("click",sendData);

test2.js информация об ошибке:

test2.js:4 Uncaught TypeError: Cannot read property 'readyState' of undefined
    at XMLHttpRequest.ready (test2.js:4)

Другой вопрос: каков правильный порядок для следующих утверждений?
Я видел некоторый материал, напишите их как ниже:

    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 
    xmlHttp.onreadystatechange =  function(){  }

Другой материал также видел:

    xmlHttp.onreadystatechange =  function(){  }
    xmlHttp.open("post", "test.php",true); 
    xmlHttp.send(formData); 

И другой порядок в заявлении на странице xmlHttp

xmlhttp.open("POST", "Demo", true);
xmlhttp.onreadystatechange=myCallBack;
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlhttp.send("FirstName=Nat&LastName=Dunn");

Answer 1

В sendData у тебя есть:

var xmlHttp = new XMLHttpRequest();

Ваша единственная ошибка в том числе var здесь - просто сделайте это вместо этого:

xmlHttp = new XMLHttpRequest();

Это важно потому, что var объявляет новую локальную переменную с тем же именем, которая затем присваивается - так ready не получает к нему доступ. Доступ к глобальному xmlHttp переменная, которая никогда не присваивается. Удалив var как показано выше, вы гарантируете, что глобальная переменная назначена - и это должно работать. (Хотя, конечно, не рекомендуется использовать глобальные переменные.)