|
CS479/579 - Web Programming II
|
Displaying ./code/AJAX/todo.html
<!DOCTYPE html>
<html>
<head>
<title> Todo AJAX example </title>
<meta charset='utf-8'>
<style>
</style>
<script>
function posturl(url, data, callback) {
var req = new XMLHttpRequest();
req.open('POST', url, true);
req.overrideMimeType('text/plain; charset=x-user-defined');
req.onreadystatechange=function() {
if (req.readyState==4 && req.status==200) callback(req.responseText);
};
req.send(data);
}
function updatelist(list) {
var ul = document.getElementById("list");
ul.innerHTML = ""; // Reset unordered list:
if (list == null) return;
for(var item of list) {
var li = document.createElement("li");
li.innerHTML = item;
ul.appendChild(li);
}
}
function newtodo(e) {
var form = new FormData();
form.append("todo", e.value);
posturl("todo.php", form, function(data) { updatelist(JSON.parse(data)); });
e.value = "";
}
function getlist() {
posturl("todo.php", null, function(data) { updatelist(JSON.parse(data)); });
}
</script>
</head>
<body onload='getlist();'>
<h1> Todo list </h1>
<ul id='list'></ul>
<br><br>
<input type='text' onchange='newtodo(this);'>
</body>
</html>
|