运行ajax的问题​​

Question

我一直在尝试发送一个php请求，而不使用ajax重新加载。但是我不认为我很了解阿贾克斯。我试图寻找w3school示例代码，并试图想出了一个解决方案：

<script> 
function loadDoc() { 
var xhttp = new XMLHttpRequest(); 
xhttp.open("GET", "led.php?state=1", true); 
xhttp.send(); 
</script> 

<button class="button" onclick = "loadDoc()">LED ON</button> 

</br> 
</br> 
<script> 
function loaddoc() { 
var xhttp = new XMLHttpRequest(); 
xhttp.open("GET", "led.php?state=0", true); 
xhttp.send(); 
</script> 

<button class="button" onclick "loaddoc()">LED OFF</button> 

老实说，我不知道我要去的地方错了。当我点击一个按钮时，发送一个PHP请求。但现在这显然不起作用。

任何人都可以帮忙吗？

问候

PHP代码：

<?php 

$onoffdata = $_GET["state"]; 

$textfile = "LED_data.txt"; 
$fileLocation = "$textfile"; 
$fh = fopen($fileLocation, 'w') or die("Error opening file!"); 

$stringToWrite = "$onoffdata"; 
fwrite($fh,$stringToWrite); 

fclose($fh); 

header("Location:index.html"); 
?> 

Answer 1

“我真的不知道我出错的地方......”=>你实际上只是在那里工作的一部分。因此，让我回溯了一下： 打破XMLHttpRequest的生命周期进入步骤，您需要：

1. 实例化XMLHttpRequest对象;这就是你在var xhttp = ...作业中所做的。
2. 添加事件监听器。这是你基本上告诉它在每个阶段应该做什么（我可能会在这里说state）向你提出要求。作为总结，这里有五个你可以听的readyStates。查看更多here
3. 启动请求，这是您对xttp.open(...)的处理
4. 然后发送请求。这就是你对xttp.send()所做的一切，你可能已经猜到了。

所以回到你缺少的步骤。

xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     document.getElementById("demo").innerHTML = 
     this.responseText; 
    } 
    }; 

你想你的var http = ...和你xhttp.open之间做到这一点。

这一块基本上是说：“嘿xttp只要您readyState变化（0〜4），执行该功能。现在的功能本身就是在这种情况下很简单，但是要注意的条件。 this.readyState == 4被检查是否请求是done - 当你得到你的全response

和

this.status == 200被检查，如果一切都很好这是。你可以搜索http status codes各种值status即可。

简而言之，该检查旨在确保请求已完成，并且在尝试执行responseText之前一切顺利。在W3Schools example中，他们将DOM中元素的innerHTML设置为从服务器返回的内容。基本上用xmlhttp请求的结果做一些事情。在你的代码片段中，你只发送请求而不是监听响应，更不用说做任何事情了。

希望有所帮助。

Answer 2

在您led.php把代码<?php $_GET['state'];?>然后打开你的浏览器中检查并转到网络选项卡，在右边你会看到一个预览选项卡这会在你的情况下返回什么led.php输出，1次或0

Answer 3

首先测试的是led.php工作如预期的那样，转到led.php？state = 1。这是为了测试页面不会死亡。如果页面不会死然后打开该文件，并检查，看它是否说1.使用下面的代码试图关闭LED，然后检查文件的内容，希望它应该是0

<script> 
function setState(state) { 
     var xhttp = new XMLHttpRequest(); 
     xhttp.open("GET", "led.php?state="+state, true); 
     xhttp.send(); 
    } 
</script> 

<button type="button" class="button" onclick="setState(1)">LED ON</button> 

</br> 
</br> 

<button type="button" class="button" onclick="setState(0)">LED OFF</button>