CODEWITHSUNDEEP
javascriptajaxinnerhtml
user927774
user927774

Reputation: 43

Unable to use server response in AJAX

I have a .php file on the server. I want it to send values 1 or 2 depending on the locks that it acquired. However i am unable to use the server response in Javascripts. I have tried using innerHTML but i don't know how to use its value. I am totally new to AJAX so pls forgive any stupid mistakes that i might've made.

.php file

 <?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 file

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

Upvotes: 0

Views: 196

Answers (2)

Rick
Rick

Reputation: 1258

The code xmlhttp.onreadystatechange=reload() isn't going to do what you want it to. That's neither defining nor assigning a function to the onreadystatechange callback. To define the callback, your code should look like either of the following:

xmlhttp.onreadystatechange = reload;

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

or

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

There won't be much difference for your current use of it. Whichever you choose to use, inside is where you should have your if(xmlhttp.readyState==4 && xmlhttp.status==200) code.

Then it comes to using the value you've received. It looks like you're setting the value into myDiv and then attempting to use the value later (although myDiv == 1 won't work anyway). However, you don't need to do that. In your readystatechange function, you can just use the value directly:

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

Remember, that part goes inside the function (anonymous or otherwise) that gets bound to onreadystatechange.

Upvotes: 1

skyronic
skyronic

Reputation: 1635

Use jQuery, it will make Ajax requests and attribute modification easier.

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

Upvotes: 0

Related Questions