|
CS479/579 - Web Programming II
|
Displaying ./code/Async-example/async.html
<!DOCTYPE html>
<html>
<head>
<title> Async example </title>
<meta charset='ascii'>
<style>
#output {
border: 1px solid black;
min-height: 50px;
width: 300px;
}
</style>
<script>
function loadurl(url, callback)
{
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.overrideMimeType('text/plain; charset=x-user-defined');
req.onreadystatechange = function() {
if (req.readyState == 4 && req.status == 200) callback(JSON.parse(req.responseText));
}
req.send(null);
}
function key(ev, e)
{
setTimeout(function() {
console.log("key event fired.", e.value);
if (e.value.length == 0) {
var list = document.getElementById("list");
list.innerHTML = "";
return;
}
loadurl("words.php?match="+e.value, function(data) {
console.log("loadfile callback called.", data);
var list = document.getElementById("list");
var s = "";
for(i=0; i < data.length; i++) {
s += "<option>" + data[i] + "</option>";
}
list.innerHTML = s;
});
},1);
}
function getword()
{
loadurl("words.php", function(data) {
var output = document.getElementById("output");
output.innerHTML = data;
});
}
</script>
</head>
<body>
<input list='list' oninput='key(event, this);' type='text' id='input'>
<datalist id='list'>
</datalist>
<div id='output'></div>
<input type='button' onclick='getword();' value='Get'>
</body>
</html>
|