Почему нельзя отделить функцию для xmlHttp.onreadystatechange? - PullRequest
Новая
       38

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

0 голосов
/ 24 ноября 2018

Файл 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");

1 Ответ

0 голосов
/ 24 ноября 2018

В sendData у вас есть: 

var xmlHttp = new XMLHttpRequest();

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

xmlHttp = new XMLHttpRequest();

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

...