任务1：Ajax表单验证
任务要求：
日常生活中，我们登录一些网站时，网页中的表单会验证我们输入的用户名和密码是否正确。本案例将会利用Ajax实现表单验证效果。用户在表单中输入用户名和密码后，单击“登录”按钮，就会发送Ajax请求到服务器，在服务器端验证用户名和密码是否正确。
服务器接口具体信息如下。
接口地址：http://localhost:3000/login。
请求方式：POST。
请求参数：{ "username": "用户名", "password": "密码"}。
请求成功返回：{ "code": 1, "msg": "登录成功"}。
请求失败返回：{ "code": 0, "msg": "登录失败"}。
案例的初始页面效果
登录成功与失败的页面效果：
任务分析：
编写HTML代码：定义1个<div>标签，作为表单的容器；定义2个<span>标签，用于提示需要输入的内容；定义2个<input>标签，用于输入用户名和密码；定义1个<button>标签作为“登录”按钮。
添加JavaScript代码：为“登录”按钮绑定单击事件，用于单击该按钮时进行Ajax交互，向服务器发送POST方式的请求。
服务器处理请求：创建用于表单验证的服务器，并使用app.post()处理接收到的POST请求，响应JSON数据。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div>
<span>用户名：</span><input type="text" id="username"><br>
<span>密码：</span><input type="password" id="pwd"><br>
<button>登录</button>
</div>
<script>
// 获取button元素
var obtn = document.getElementsByTagName('button');
// 为button元素绑定单击事件
obtn[0].onclick = function () {
// 获取用户输入的用户名和密码
var username = document.getElementById('username').value;
var password = document.getElementById('pwd').value;
// 定义data对象，用于存储用户名和密码
var data = {
username: username,
password: password
};
var data = JSON.stringify(data);
// 创建Ajax对象
var xhr = new XMLHttpRequest();
// 调用Ajax的open()方法，初始化HTTP请求
xhr.open('POST', 'http://localhost:3000/login');
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
// onreadystatechange事件处理函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
// 接收服务器的响应数据
var data = JSON.parse(xhr.responseText);
alert(data.msg);
}
};
// 发送请求
xhr.send(data);
};
</script>
</body>
</html>
