Question

我在服务器上有一个.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>

Answer 1

代码xmlhttp.onreadystatechange=reload()不会按照您的意愿执行。这既不是定义也不是为onreadystatechange回调分配函数。要定义回调，您的代码应如下所示：

xmlhttp.onreadystatechange = reload;

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

或

xmlhttp.onreadystatechange = function() {
    // the actions to do on response
}

目前使用它没有太大区别。无论您选择使用哪个，都应该在内部使用if(xmlhttp.readyState==4 && xmlhttp.status==200)代码。

然后使用您收到的值。看起来您将值设置为myDiv，然后尝试稍后使用该值（尽管myDiv == 1无论如何都不会起作用）。但是，您不需要这样做。在readystatechange函数中，您可以直接使用该值：

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

请记住，该部分属于绑定到onreadystatechange的函数（匿名或其他）。

Answer 2

使用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 />

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

2 个答案: