Hello,
ich habe Dir mal etwas gebastelt.
<?php ### get_data.php ### utf-8 ### ÄÖÜäöü
header('Content-Type: text/plain; Charset=utf-8');
if (isset($_POST['level'])) echo $_POST['level'];
?>
<!DOCTYPE HTML>
<html>
<head>
<meta Charset="utf-8">
<title>Slider mit XHR</title>
</head>
<body>
<div><input id="slider" type="range" min="0" max="100"> <span id="slidernum"></span></div>
<script>
var url = "get_data.php";
(function(e, url)
{
var tm = null;
var sendXHR = function()
{
var http = new XMLHttpRequest();
var params = "level="+e.value;
http.open("POST", url, true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//Call a function when the state changes.
http.onreadystatechange = function()
{
if(http.readyState == 4 && http.status == 200)
{
document.getElementById('slidernum').innerHTML = http.responseText;
// alert(http.responseText);
}
}
http.send(params);
};
e.addEventListener('change',
function()
{
if(tm)
{
window.clearTimeout(tm);
}
tm = window.setTimeout(sendXHR, 200);
});
})(document.getElementById('slider'), url);
</script>
</body>
</html>
Da wird noch drüber zu diskutieren sein.
Ich habe hier jetzt aber bewusst auf jQuery verzichtet.
Ich habe auch selber noch etliche Fragen dazu.
Scheinbar ist beim Slider (mit Maus bedient) keine Timeoutfunktion notwendig?
- Wie würde man das sinnvollerweise machen, wenn man mehrere Timeouts benötigen würde?
- Wie übergibt man mehrere Parameter, die per POST gesendet werden sollen, wenn man NICHT die Schreibweise
params = "level=10&color=red&blah=blubb"
benutzen will?
Liebe Grüße
Tom S.
--
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
Es gibt nichts Gutes, außer man tut es
Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.