Javascript 无法在AJAX中使用服务器响应_Javascript_Ajax_Innerhtml

Javascript 无法在AJAX中使用服务器响应

javascript ajax

Javascript 无法在AJAX中使用服务器响应,javascript,ajax,innerhtml,Javascript,Ajax,Innerhtml,我在服务器上有一个.php文件。我希望它根据它获取的锁发送值1或2。但是，我无法在Javascripts中使用服务器响应。我尝试过使用innerHTML，但不知道如何使用它的值。我对AJAX完全陌生，所以请原谅我可能犯的任何愚蠢的错误 .php文件 <?php $fp1=fopen("a1.jpg","r"); $fp2=fopen("a2.jpg","r"); if(flock($fp1,LOCK_EX)) { echo "a1 locked"; $ch=1;

我在服务器上有一个.php文件。我希望它根据它获取的锁发送值1或2。但是，我无法在Javascripts中使用服务器响应。我尝试过使用innerHTML，但不知道如何使用它的值。我对AJAX完全陌生，所以请原谅我可能犯的任何愚蠢的错误

.php文件

 <?php
 $fp1=fopen("a1.jpg","r");
 $fp2=fopen("a2.jpg","r");
 if(flock($fp1,LOCK_EX))
 {
    echo "a1 locked";
    $ch=1;
 }
 else
 {
    flock($fp2,LOCK_EX);
    echo "a2 locked";
    $ch=2;
 }
 $response=$ch;
 echo $ch;
 echo $response;
 ?>

.html文件

<html>
<head>
 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Smart Surveillance Camera</title>
<script language="Javascript">

function loadXMLDoc()
{
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    //document.write ("request created");
    xmlhttp.onreadystatechange=reload()
    {
            if(xmlhttp.readyState==4 && xmlhttp.status==200)
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    xmlhttp.open("GET","lock.php",true);
    xmlhttp.send();
    //document.write (serverResponse);
    loadXMLDoc();
}

function reload()
{
    document.write ();
    if(myDiv==1)
            document.campicture.src="a1.jpg";
    else
            document.campicture.src="a2.jpg";

}
</script>
</head>

<body bgcolor="white" onLoad="loadXMLDoc()">
<div id="myDiv">
<center>
<font size==-1>
<h1>SMART SURVEILLANCE CAMERA PAGE</h1>
<img name="campicture" src="founders.jpg" border=1 width=320 height=240 alt="AYS         founder's IMAGE"><br />
</font>
</center>
</body>
</html>


智能监控摄像机
函数loadXMLDoc（）
{
var-xmlhttp；
xmlhttp=新的XMLHttpRequest（）；
//document.write（“创建的请求”）；
xmlhttp.onreadystatechange=reload（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
document.getElementById（“myDiv”）.innerHTML=xmlhttp.responseText；
}
open（“GET”，“lock.php”，true）；
xmlhttp.send（）；
//document.write（serverResponse）；
loadXMLDoc（）；
}
函数重载（）
{
document.write（）；
如果（myDiv==1）
document.campicture.src=“a1.jpg”；
其他的
document.campicture.src=“a2.jpg”；
}
智能监控摄像头页面

使用jQuery，它将简化Ajax请求和属性修改

<script>
function loadXMLDoc()
{
    var xmlhttp;
    $.ajax({
        url: 'lock.php',
        type: 'GET',
        success: function(responseText) {
            if(responseText === 1)
                $("#campicture").attr('src', 'a1.jpg');
            else
                $("#campicture").attr('src', 'a2.jpg');

        }
    })

    loadXMLDoc();
}
</script>

<img id="campicture" src="founders.jpg" border=1 width=320 height=240 alt="AYS         founder's IMAGE"><br />


函数loadXMLDoc（）
{
var-xmlhttp；
$.ajax({
url:'lock.php'，
键入：“GET”，
成功：函数（responseText）{
如果（responseText==1）
$（“#campicture”）.attr（'src'，'a1.jpg'）；
其他的
$（“#campicture”）.attr（'src'，'a2.jpg'）；
}
})
loadXMLDoc（）；
}

代码

xmlhttp.onreadystatechange=reload（）

不会执行您希望它执行的操作。这既不是定义函数，也不是将函数分配给

onreadystatechange

回调。要定义回调，代码应如下所示：

xmlhttp.onreadystatechange = reload;

//later
function reload() {
    //the actions to do on response
}

或

你现在使用它不会有太大的不同。无论您选择使用哪一种，内部都应该有

if（xmlhttp.readyState==4&&xmlhttp.status==200）

code

然后是使用你收到的价值。看起来您正在将该值设置为

myDiv

，然后稍后尝试使用该值（尽管

myDiv==1

无论如何都不起作用）。但是，您不需要这样做。在readystatechange函数中，您可以直接使用该值：

if (xmlhttp.responseText == "1")
    document.campicture.src="a1.jpg";
else
    document.campicture.src="a2.jpg";

请记住，该部分位于绑定到

onreadystatechange

的函数内部（匿名或其他），您的javascript在放置onreadystatechange处理程序的位置肯定是错误的。您应该使用重载函数或匿名函数。确定。但是如何将服务器响应与“1”进行比较呢？

if (xmlhttp.responseText == "1")
    document.campicture.src="a1.jpg";
else
    document.campicture.src="a2.jpg";