新建一个JavaWeb项目,配置好相关设置。
在web创建一个data包,里面添加一个userlist文档,储存用户信息
编辑默认页面
新建一个getUserList.html,用JavaScript脚本语言获取用户列表
<script>
function loadUserList() {
//声明请求对象
var xmlhttp;
//实例化请求对象
if (window.XMLHttpRequest){
//IE7+, FireFox, Chrome, Opera, Safari浏览器里执行代码
xmlhttp = new XMLHttpRequest();
}else {
//IE5, IE6 浏览器里执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>
getUserList.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取用户列表</title>
<script>
function loadUserList() {
//声明请求对象
var xmlhttp;
//实例化请求对象
if (window.XMLHttpRequest) {
//IE7+, FireFox, Chrome, Opera, Safari浏览器里执行代码
xmlhttp = new XMLHttpRequest();
} else {
//IE5, IE6 浏览器里执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//监听请求状态的变化,一旦有变化,执行相应的回调函数
xmlhttp.onreadystatechange = function () {
//判断请求是否成功,响应是否完成
if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
//利用响应文本修改页面元素内容
document.getElementById("users").innerHTML = xmlhttp.responseText;
}
}
//新建HTTP请求,采用GET方式,请求采用异步方式
xmlhttp.open("GET", "/AjaxDemo/data/userlist.txt", true);
//发送HTTP请求,不传递参数
xmlhttp.send(null);
}
</script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" onclick="loadUserList()">获取用户列表</button>
</body>
</html>
三:利用AJAX 实现登陆功能
1、在web里创建login