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

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

javascript php ajax

Javascript 如何知道是否执行了AJAX请求？,javascript,php,ajax,Javascript,Php,Ajax,我在学习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%;

我在学习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>


我的第一个聊天页面
#消息区{
位置：固定；
底部：0；
宽度：100%；
}
#发送按钮{
浮动：对；
利润率：20px；
颜色：白色；
背景颜色：绿色；
}
文本区{
浮动：左；
宽度：90%；
高度：4em；
字体系列：草书；
fon尺寸：20px；
调整大小：无；
}
发送
var sendButton=document.getElementById（“发送按钮”）；
功能试验（）{
var xhttp=newXMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
sendButton.innerHTML=this.responseText；
}
open（“GET”，“insertmessage.php”，true）；
xhttp.send（）；
}
}
sendButton.addEventListener（“单击”，试用版）；

我有一个简单的PHP代码：

<?php
echo "hello";
?>

我想要的是，当我单击send按钮时，它会建立一个AJAX连接，连接到服务器，服务器发送“Hello”，并更改send按钮的内部HTML。我在WAMP www目录的同一文件夹中尝试了它们，但没有成功。

当您在eventListener分配中执行试用（）时，试用已经运行并发出ajax调用。它应该已经在不单击的情况下更新了html。您可以在此处验证代码：

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

对于这种调试，浏览器调试工具非常方便，例如，chrome有一个网络选项卡，可以告诉您有关请求的所有信息。

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

外面

xmlhttp.onreadystatechange = function(){
}

您的ajax未发送，因为此代码在您将其放入onreadystatechange事件中后从未执行过（此事件仅在发送ajax请求时发生）

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

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);

您的

xmlhttp

来自何处？您可以打开浏览器检查器，并检查网络选项卡以查看请求结果。对于初学者，您需要说sendButton.addEventListener（“单击”，试用），但试用后没有（）号。您还缺少onreadystatechange函数的右括号，应该在insertmessage.php周围加引号。你肯定会在浏览器控制台中出错。当我请求php页面时，它会说hello！当我点击按钮时，网络没有显示任何内容。你能解释一下第一部分吗。你的意思是因为我没有将它存储在变量中而不单击就调用它吗？像var x=function（）？sendButton.addEventListener（“单击”，试用（））；-审判被执行。

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);