带有XMLHttpRequest的JavaScript无法正常工作

Question

I have tried everything suggested in questions of similar nature but this very basic code is just not working. 我已经尝试了类似性质的问题中提出的所有建议，但是这个非常基本的代码无法正常工作。 I just want to receive the message from the php code in the same file using XMLHttpRequest . 我只想使用XMLHttpRequest从同一文件中的php代码接收消息。

<!DOCTYPE html>
<head></head>
<body>
<div id="qwer" style="height:50px;width:40px"></div>
<script type="text/javascript">
function check() {
    var ualias=document.getElementById('ualias').value;
    var resu=document.getElementById("qwer");
    var params="username="+ualias;
    var hm = new XMLHttpRequest();
    var url = "http://'my-domain-name'/try.php";
    hm.open("GET", url+"?"+params, true);
    hm.onreadystatechange = function(){
        if(hm.readyState == 4 && hm.status == 200) {
            var return_data = hm.responseText;
            resu.innerHTML=return_data;
        } else {
            resu.innerHTML="error";
        }
        hm.send(null); 
        resu.innerHTML="CHECKING...";
    }
}
</script>
<?php if(isset($_GET['username'])) {
    $u=$_GET['username'];
    echo $u;
    exit();
} ?>
<input id='ualias' type='text' onblur=''>
<button type='button' onclick="check()">Go!</button>
</body>  
</html>

The browser (Google Chrome) isn't showing anything for the onclick event. 浏览器（Google Chrome）没有显示onclick事件的任何内容。

It finally worked. 终于成功了。 I made the following edits. 我进行了以下修改。

   <!DOCTYPE html>
   <head>
   <title></title>
    </head>
    <body>

    <script type="text/javascript">
    function check()
    {
      var ualias=document.getElementById('ualias').value;
  var resu=document.getElementById("qwer");
  var params="username="+ualias;
  var hm = new XMLHttpRequest();
      var url = "http://www.websamaj.in/try.php";
      hm.open("GET", url+"?"+params, true);
      hm.onreadystatechange = function(){
  if(hm.readyState == 4 && hm.status == 200) 
     {
         var return_data = hm.responseText;
         resu.innerHTML=return_data;

     }
     }
  hm.send(null);
      resu.innerHTML="wait...";   
     }
     </script>
 <?php
 if(isset($_GET['username']))
 {
    $u=$_GET['username'];
    echo $u.",you are finally here!:)";
    exit();
}
?>
    <input id='ualias' type='text' onblur=''>
 <button type='button' onclick="check()">Go!</button>
<div id="qwer" style="height:50px;width:100px;background-color:#CCC;"></div> 

     </body>     
     </html>

Apparently, the else condition there in onreadystatechange function was causing a problem. 显然，onreadystatechange函数中的else条件导致了问题。 I would love it if anybody could tell me why exactly was that creating a problem. 如果有人能告诉我为什么会造成问题，我将非常乐意。 As far as i know, onreadystatechange event is called each time the state changes. 据我所知，每次状态更改时都会调用onreadystatechange事件。 So in my previous code, "error" should be overwritten thrice on the div and then, when the state changes to 4 and 200, the responseText should be overwritten, since i didnt use append. 因此，在我之前的代码中，“错误”应该在div上覆盖三次，然后，当状态更改为4和200时，由于我没有使用append，因此应该覆盖responseText。 So, an explanation would be highly acknowledged. 因此，一个解释将是高度认可的。 Thank you! 谢谢！

Answer 1

In your original code, hm.send(null) and resu.innerHTML="CHECKING" lines are actually INSIDE the onreadystatechange callback: 在您的原始代码中， hm.send(null)和resu.innerHTML="CHECKING"行实际上位于onreadystatechange回调内部：

hm.open("GET", url+"?"+params, true);
hm.onreadystatechange = function(){
    if(hm.readyState == 4 && hm.status == 200) {
        var return_data = hm.responseText;
        resu.innerHTML=return_data;
    } else {
        resu.innerHTML="error";
    }
    hm.send(null); // <-- wrong place!
    resu.innerHTML="CHECKING...";
}

In your edited version, you moved them out of there (fixed indention): 在您编辑的版本中，您将它们移到了那里（固定缩进）：

 hm.open("GET", url+"?"+params, true);
 hm.onreadystatechange = function(){
     if(hm.readyState == 4 && hm.status == 200) {
         var return_data = hm.responseText;
         resu.innerHTML=return_data;
     } else {
         resu.innerHTML="error";
     }
 }
 hm.send(null);
 resu.innerHTML="wait...";

The reason you didn't notice this is because in your edited version, you didn't indent your blocks correctly. 您没有注意到这一点的原因是，在编辑版本中，您没有正确缩进块。 Recommend always keeping your code formatted consistently, even when hacking around, so you can see the code blocks. 建议始终保持一致的代码格式，即使在黑客入侵时也是如此，这样您就可以看到代码块。

带有XMLHttpRequest的JavaScript无法正常工作

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-12-22 07:37:05

带有XMLHttpRequest的JavaScript无法正常工作

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-12-22 07:37:05

解决方案1
0 已采纳 2013-12-22 07:37:05