实现效果:
步骤一:
1 test.js
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
//path.join()拼接路径
console.log(path.join(__dirname, 'static'));
// 实现静态资源访问功能
app.use(express.static(path.join(__dirname, 'static')))
app.get('/verifyEmailAdress', (req, res) => {
// 接收客户端传递过来的邮箱地址
const email = req.query.email;
// 判断邮箱地址注册过的情况
if (email == 'itheima@itcast.cn') {
// 设置http状态码并对客户端做出响应
res.status(400).send({ message: '邮箱地址已经注册过了, 请更换其他邮箱地址' });
} else {
// 邮箱地址可用的情况
// 对客户端做出响应
res.send({ message: '恭喜, 邮箱地址可用' });
}
});
// 端口监听
app.listen(3000);
console.log('服务器启动成功');
执行test.js
2 ajax.js
function ajax(options) {
// 默认值
var defaults = {
type: 'get',
url: '',
async: true,
data: {},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: function() {},
error: function() {}
}
// 使用用户传递的参数替换默认值参数
Object.assign(defaults, options);
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 参数拼接变量
var params = '';
// 循环参数
for (var attr in defaults.data) {
// 参数拼接
params += attr + '=' + defaults.data[attr] + '&';
// 去掉参数中最后一个&
params = params.substr(0, params.length - 1)
}
// 如果请求方式为get
if (defaults.type == 'get') {
// 将参数拼接在url地址的后面
defaults.url += '?' + params;
}
// 配置ajax请求
xhr.open(defaults.type, defaults.url, defaults.async);
// 如果请求方式为post
if (defaults.type == 'post') {
// 设置请求头
xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
// 如果想服务器端传递的参数类型为json
if (defaults.header['Content-Type'] == 'application/json') {
// 将json对象转换为json字符串
xhr.send(JSON.stringify(defaults.data))
} else {
// 发送请求
xhr.send(params);
}
} else {
xhr.send();
}
// 请求加载完成
xhr.onload = function() {
// 获取服务器端返回数据的类型
var contentType = xhr.getResponseHeader('content-type');
// 获取服务器端返回的响应数据
var responseText = xhr.responseText;
// 如果服务器端返回的数据是json数据类型
if (contentType.includes('application/json')) {
// 将json字符串转换为json对象
responseText = JSON.parse(responseText);
}
// 如果请求成功
if (xhr.status == 200) {
// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
defaults.success(responseText, xhr);
} else {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(responseText, xhr);
}
}
// 当网络中断时
xhr.onerror = function() {
// 调用失败回调函数并且将xhr对象传递给回调函数
defaults.error(xhr);
}
}
3.email.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.danger {
background-color: pink;
}
.success {
background-color: green;
}
</style>
</head>
<body>
<div>
<label for="email">邮箱:</label>
<input type="text" id="email" placeholder="请输入邮箱地址" id="email">
<span id="tip"></span>
</div>
<script src="js/ajax.js"></script>
<script>
// 获取页面中的元素
var emailInp = document.querySelector('#email');
var tipInfo = document.querySelector('#tip');
emailInp.onblur = function() {
// 用户输入的邮箱地址
var email = this.value;
// 邮箱验证正则表达式
var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
// 邮箱格式验证
if (!reg.test(email)) {
// 用户提示
tipInfo.innerHTML = '邮箱地址格式不符合要求';
tipInfo.className = 'danger';
// 阻止程序向下执行
return;
}
// 向服务器端发送请求
// 验证邮箱地址是否已经被注册
ajax({
type: 'get',
url: 'http://localhost:3000/verifyEmailAdress',
data: {
//第一个email:必须的固定字段,第二个email:用户输入的内容
email: email
},
success: function(result) {
tipInfo.innerHTML = result.message;
tipInfo.className = 'success';
},
error: function(result) {
tipInfo.innerHTML = result.message;
tipInfo.className = 'danger';
}
})
}
</script>
</body>
</html>
4 各个文件目录结构
5 浏览器运行:输入localhost:3000/email.html即可