Automatic reading of arduino values WEBSERVER

Projects Discussion and Showcase Home Automation
22

Hello! I've been trying to proceed with this project but i'm stucked in 2 parts:

1st- I' ve made an div for water.jpg with the height sended by arduino with this changed every time the sensor reads (with sensor value), and it worked fine, but i could make it refresh only this div. I even put meta refresh tag inside the div, but the whole page keeps refreshing.

2nd- I was learning about AJAX and try to make a test connection with arduino, but maybe i've been missing something. At this time another thing that i can't understand is that if this connection code keeps "playing" forever or just one time. The code is above:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">

function ajaxInit() {
    if (window.XMLHttpRequest) { // Mozilla, Safari,...
        ajax = new XMLHttpRequest();
        if (ajax.overrideMimeType) {
            ajax.overrideMimeType('text/xml');
        }
    }
    else if (window.ActiveXObject) { // IE
        try {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");	
        }
        catch (e) {
            try {
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) {
				alert("O browser não suporta AJAX! Impossível satisfazer pedido.");
				return false;
				}
			
        }
    }
    return ajax;
}
			
function AguaTanque()
{
url = "http://196.168.0.3:80/?req=";
ajax = ajaxInit();
if(ajax) {
    ajax.open("GET", "url", true);
    ajax.send(null);
    ajax.onreadystatechange = function() {
    if(ajax.readyState == 4) {
            
                alert(ajax.responseText);
                    }
    }
}
}

</script>
</head>

<body>

</body>
</html>

I'm testing connection to try to put this together with this code:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
var myVar=setInterval(function(){myTimer()},1000);
var dynamic_height = 5;
function myTimer()
{
	var theImg = document.getElementById("img2");
	var d = new Date();
	dynamic_height = 5 + (d.getSeconds()*3);
	theImg.height = dynamic_height;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

<body>
<center>
<b>THIS IS THE TITLE</b>
<div style="position:relative; width:360; height:336">
<div style="position:absolute; top:0; left:0"><center><img name="img1" id="img1" src="1.gif" width="360" height="336"></center></div>
<div style="position:absolute; bottom:6; left:22"><center><input type="image" name="img2" id="img2" src="2.gif" width="236" height="5">
</center></div>
</div>
</body></html>

Changing the way this code change the height of img2.jpg/water.jpg (every 1 second) with the ajax code given to change img2.jpg/water.jpg with sensor readings.

Thanks for your help