众所周知,Ajax是用来链接前后端的数据,进行前后端数据交互的的一种方式。
其特点就是局部刷新技术,顾名思义,就是当网页的部分内容需要进行数据验证,在验证后需要局部刷新时,就不需要在重新加载整个页面。这种方法的一个好处就是可以节省资源,提高效率。
那么Ajax的请求方式有两种,一种是GET,另一种则是POST
两种方式的主要区别是:
- GET方式提交的数据,数据附加在地址栏中,比如你在页面里输入了用户名和密码,那么这两个数据就 会追加在地址栏中发送给后端进行验证。
假设我的端口号是8080的情况下,运行本地服务器。前端代码如下:
<body>
<div class="box">
<div>
用户名:<input type="text" id="username">
</div>
<div>
密码:<input type="password" id="userpwd">
</div>
<button id="login">登录</button>
</div>
<script src="../js/login.js"></script>
</body>
在我输入用户名为:qweqwe、密码为:123123后
提交给后端的网址中就会是一下形式
http://localhost:8080:/login.html?username=qweqwe&userpwd=123123
后端使用Ajax发送数据就会是以下形式:
document.getElementById('login').onclick = function () {
let username = document.getElementById('username').value
let userpwd = document.getElementById('userpwd').value
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
// 此处编写当Ajax成功发送请求后需要执行的代码
}
}
xhr.open("GET",`http://localhost:8045/login?username=${username}&userpwd=${userpwd}`,true)
xhr.send()
}
后端简易验证数据的形式就会是:
const urlObj = URL.parse(req.url) //获取上面代码片段中xhr.open()方法发过来的地址 如:http://localhost:8080:/login?username=qweqwe&userpwd=123123
const pathname = urlObj.pathname; //获取除去域名和协议以及参数之后的内容 如:/login
const query = queryString.parse(urlObj.query); // 获取传的参数,如:{“username”:“qweqwe" ,"userpwd" = "123123"}
if (pathname == '/login' && req.method == "GET") {
fs.readFile("./data/user.json", "utf-8", (err, file) => { // “./data/user.json”为模拟的数据库,以json的格式存储在data文件夹中
if (err) {
res.end('1') // 如果出错错,返回错误代码
}
const arr = JSON.parse(file); // 将./data/user.json文件读取成JSON的格式,存储在arr中
for (let i = 0; i < arr.length; i++) {
if (arr[i].username == query.username) {
res.end("123456") // 用户名已存在如果出错错,返回用户名已存在的错误代码
return;
}
}
arr.push(query) // 如果用户名不存在,将获取的query对象添加到arr数组中
const arrString = JSON.stringify(arr) // 再将arr数组转换成字符串的形式
fs.writeFile('./data/user.json', arrString, (err) => { // 将字符串形式的数组写入模拟数据库中
if (err) {
res.end("1") // 未知错误
}
res.end("2") // 返回注册成功代码
})
})
- POST提交方式则不会将数据添加到地址栏中,而是附加在响应头中。
一般来说用户登录的数据不会显示在地址栏中,所以用POST方法
后端使用Ajax发送数据就会是以下形式:
<body>
<div class="box">
<div>
用户名:<input type="text" id="username">
</div>
<div>
密码:<input type="password" id="userpwd">
</div>
<button id="login">登录</button>
</div>
<script src="../js/login.js"></script>
</body>
后端简易验证数据的形式就会是:
document.getElementById('login').onclick = function () {
let username = document.getElementById('username').value
let userpwd = document.getElementById('userpwd').value
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.status == 200 && xhr.readyState == 4) {
// 此处编写当Ajax成功发送请求后需要执行的代码
}
}
xhr.open("POST",`http://localhost:8080/login`,true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") // 设置请求头
xhr.send(`username=${username}&userpwd=${userpwd}`)
}
后端简易验证数据的形式就会是:
if (pathname == '/login' && req.method == "POST") {
let body = '';
req.on('data', chunk => {
body += chunk.toString('utf-8')
})
req.on('end', () => {
body = queryString.parse(body)
fs.readFile('./data/user.json', "utf-8", (err, file) => {
if (err) {
res.end('0') // 未知错误
}
const arr = JSON.parse(file)
for (let i = 0; i < arr.length; i++) {
if (arr[i].username == body.username) {
if (arr[i].userpwd == body.userpwd) {
res.end("2") //登录成功
return;
} else {
res.end("3") //密码错误
return
}
}
}
res.end('4') // 用户名不存在
})
})
}