Почему XMLHttpRequest readistate не равен 4?

Я изучаю AJAX в первый раз, и я пытаюсь создать простое приложение, которое вычисляет оценку, которую человек должен получить на своем окончательном экзамене, основываясь на своих предыдущих результатах оценки.

Пользователь вводит свои оценки в форму, а затем использует ajax. Я вычисляю ответ в response.php, который затем должен выводиться в функции обратного вызова в div с ajax как его id.

По какой-то причине свойство xhr.readystate никогда не достигает 4, поэтому ответ никогда не генерируется. Кто-нибудь может понять, что я делаю неправильно?

Пожалуйста, имейте в виду, я только изучаю …

index.php

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Grade Calculator</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script> function sendAjax() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { document.getElementById('ajax').innerHTML = xhr.responseText; } else { document.getElementById('ajax').innerHTML = document.write('There was a problem'); } }; xhr.open("GET","response.php"); xhr.send(); document.getElementById('gradeForm').style.display = "none"; document.write(xhr.readyState); } </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1><br> <form action="index.php" method="get" id="gradeForm"> <div class="form-group"> <label for="currentGrade">What is your current Grade</label> <input type="text" name="currentGrade"><br> </div> <div class="form-group"> <label for="targetGrade">What is your target Grade</label> <input type="text" name="targetGrade"><br> </div> <div class="form-group"> <label for="finalWorth">What is your final worth?</label> <input type="text" name="finalWorth"><br> </div> <button type="submit" class="btn btn-default" onclick="sendAjax()">Submit</button> </form> <div id="ajax"> </div> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

Вот ответ. Php

 <?php $currentGrade = $_GET['currentGrade']; $targetGrade = $_GET['targetGrade']; $finalWorth = $_GET['finalWorth']; $neededMark = $currentGrade - $targetGrade; $neededMark = $neededMark / $finalWorth; $neededMark = $neededMark * 100; $neededMark = round($neededMark); if(isset($currentGrade, $targetGrade,$finalWorth)) { echo $neededMark; } ?>

Правильный порядок операций:

сооружать
открытый
установить обработчик
Отправить

Вы делаете их в порядке 1324, что является неправильным и, следовательно, не ведет себя так, как ожидалось.

Положите вещи в правильном порядке, посмотрите, работает ли это 🙂

EDIT: Кроме того, удалите все вызовы document.write . Они не будут работать с какой-либо асинхронной операцией и будут ~~почти~~ конечно, сломать вещи.

EDIT EDIT: Кроме того, <button type="submit" class="btn btn-default" onclick="sendAjax()"> – это должно быть type="button" , иначе ваша форма будет отправлена, и она будет выглядеть так Ничего не сделал.

не похоже, что вы отправляете какие-либо параметры в свой запрос ajax, поэтому response.php не получает какие-либо данные …

если это xhr.open («GET», «response.php? param1 = value1 & param2 = value2»); и т. д. вы должны что-то

скопируйте и вставьте эту строку кодов и измените ее с помощью своих кодов:

index.php

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Grade Calculator</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script> function sendAjax(){ var http = new XMLHttpRequest(); var url = "response.php"; var input1=document.getElementById("input1").value; var input2=document.getElementById("input2").value; var input3=document.getElementById("input3").value; var params = "currentGrade="+input1+"&targetGrade="+input2+"&finalWorth="+input3; http.open("POST", url, true); //Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close"); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { //alert(http.responseText); document.getElementById('ajax').innerHTML =http.responseText; } if(http.readyState != 4 && http.status != 200){ alert("Error"); } } http.send(params); } </script> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> <div class="container"> <div class="starter-template"> <h1>Bootstrap starter template</h1><br> <form action="index.php" method="get" id="gradeForm"> <div class="form-group"> <label for="currentGrade">What is your current Grade</label> <input type="text" name="currentGrade" id="input1"><br> </div> <div class="form-group"> <label for="targetGrade">What is your target Grade</label> <input type="text" name="targetGrade" id="input2"><br> </div> <div class="form-group"> <label for="finalWorth">What is your final worth?</label> <input type="text" name="finalWorth" id="input3"><br> </div> <input type="button" class="btn btn-default" onclick="sendAjax()" value="submit"/> </form> <div id="ajax"> </div> </div> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

response.php

 <?php $currentGrade = $_POST['currentGrade']; $targetGrade = $_POST['targetGrade']; $finalWorth = $_POST['finalWorth']; $neededMark = $currentGrade - $targetGrade; @$neededMark = @$neededMark / @$finalWorth; $neededMark = $neededMark * 100; $neededMark = round($neededMark); if(isset($currentGrade, $targetGrade,$finalWorth)) { echo $neededMark; }else{ echo 'Please fill out form'; } ?>

и пусть расскажет о том, что я изменил:

1- Я изменил метод на POST, потому что он более безопасен, и мне он больше нравится.

2- Поместите @ в строке 8 в response.php, это означает, что если пользователь вводит строку, не отображается ошибка. и говорят, что делится на 0:

 @$neededMark = @$neededMark / @$finalWorth;

3- Кнопка «Изменить» на <input type = «button» /> becuse, мы не хотим отправлять форму и отправлять данные Ajax.

4- изменил вашу функцию, что именовал sendAjax (), и сделал ее стандартной.

5- Добавляем идентификатор для ввода, чтобы получить значение ввода и отправить его на сервер (response.php), и есть другие способы, но этот способ здесь лучше.

6- Если есть ответ, он будет отображаться под кнопкой и если на странице появятся какие-либо ошибки.

это новая функция sendAjax (), которая лучше, чем раньше:

  function sendAjax(){ var http = new XMLHttpRequest(); var url = "response.php"; var input1=document.getElementById("input1").value; var input2=document.getElementById("input2").value; var input3=document.getElementById("input3").value; var params = "currentGrade="+input1+"&targetGrade="+input2+"&finalWorth="+input3; http.open("POST", url, true); //Send the proper header information along with the request http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close"); http.onreadystatechange = function() {//Call a function when the state changes. if(http.readyState == 4 && http.status == 200) { //alert(http.responseText); document.getElementById('ajax').innerHTML =http.responseText; } if(http.readyState != 4 && http.status !=200){ ocument.getElementById('ajax').innerHTML = document.write('There was a problem'); } } http.send(params); }