Question

我正在学习AJAX，所以我有这个HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>
    My first chat page
  </title>
  <meta charset = "utf-8">
  <style>
  #message-area {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  #send-button {
    float: right;
    margin: 20px;
    color: white;
    background-color: green;
  }
  textarea {
    float: left;
    width: 90%;
    height: 4em;
    font-family: cursive;
    fon-size: 20px;
    resize: none;
  }

  </style>
</head>
<body>


  <div id="message-area">
      <textarea id="myTextarea" >
      </textarea>
      <button type="button" id="send-button">
        Send
      </button>

  </div>
</body>
<script>
var sendButton = document.getElementById("send-button");

function trial(){
    var xhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            sendButton.innerHTML = this.responseText;
        }
        xhttp.open("GET", "insertmessage.php", true);
        xhttp.send();
    }
}

sendButton.addEventListener("click", trial);

</script>
</html>

我有这个简单的PHP代码：

<?php
echo "hello";
?>

我想要的是当我点击发送按钮时，它设置一个AJAX连接，连接到服务器，服务器发送＆＃34; Hello＆＃34;，并更改发送按钮的内部HTML。我在WAMP www目录中的同一个文件夹中尝试过它们，但它没有用。

Answer 1

当您在eventListener分配中执行trial（）时，试用版已经运行并进行ajax调用。它应该已经更新html而不点击。您可以在此处验证您的代码：http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_get

您的按钮文本应该更新，否则您的PHP服务器会出现问题。只需将完整构建的php url放入浏览器中检查响应即可。

对于这样的调试，浏览器调试工具非常方便，例如chrome有一个网络标签，可以告诉你有关你的请求的所有信息。

Answer 2

只是放置

xhttp.open("GET", "insertmessage.php", true);
xhttp.send();

外

xmlhttp.onreadystatechange = function(){
}

你的ajax没有被发送，因为你把它放在你的onreadystatechange事件中这个代码永远不会被执行（这个事件只在发送你的ajax请求时发生）

xhttp.open("GET", "insertmessage.php", true);
xhttp.send();

所以你的代码看起来像这样

var sendButton = document.getElementById("send-button");

function trial(){
    var xhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            sendButton.innerHTML = this.responseText;
        }
    }
    xhttp.open("GET", "insertmessage.php", true);
    xhttp.send();

}

sendButton.addEventListener("click", trial);

如何知道是否执行了AJAX请求？

2 个答案: