一、Ajax的工作原理
传统网站从浏览器端向服务器端发送请求的工作原理:
Ajax网站从浏览器端向服务器端发送请求的工作原理:
二、Ajax基本实现步骤
1、创建服务器
如下所示:
onst express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
// 定义/first路由
app.get('/first', (req, res) => {
res.send('Hello, Ajax');
});
app.listen(3000);
console.log('服务器启动成功');
启动服务器,则:
启动成功。
2、配置Ajax对象
首先创建Ajax对象,然后使用open()
方法来配置Ajax对象,最后使用send()
方法发送请求:
语法格式为:
var xhr = new XMLHttpRequest();
xhr.open('请求方式', '请求地址');
xhr.send();
3、获取服务器的响应
(1)通过onload
事件的方式获取服务器端响应到客户端的数据。
xhr.onload = function () {};
(2)通过onreadystatechange
事件的方式获取服务器端响应到客户端的数据。
xhr.onreadystatechange = function () {};
(3)Ajax状态码
Ajax状态码 | 说明 |
---|---|
0 | 请求未初始化(还没有调用open方法) |
1 | 请求已经建立,但是还没有发送(还没有调用send方法) |
2 | 请求已经发送 |
3 | 请求正在处理中, 通常响应中已经有部分数据可以用了 |
4 | 响应已经完成,可以获取并使用服务器的响应了 |
三、GET请求参数
设置open()
方法中的第1个参数为“get
”,表示设置get
请求方式。
语法格式为:
xhr.open('get','http://localhost:3000/demo.html?username=王欢&age=18');
xhr.send();
其中问号后面的username=wanghuan&age=18
表示GET
请求参数,多个参数间需要&
符号连接。
如下所示:
(1)创建一个新项目,在home.js文件中创建服务器,并去app.js文件中导入,如下:
代码为:
const express = require('express')
const router = express.Router()
router.get('/first',(req,res)=>{
res.send('Hello Ajax')
})
module.exports = router;
打开postman工具进行测试,如下:
测试成功。
(2)创建客户端,获取客户端的响应。
a.新建一个html文件,创建xhr
对象,并使用open()
方法配置xhr
对象.如下:
<script>
const xhr = new XMLHttpRequest()
console.log('请求前的状态码是:',xhr.readyState)
xhr.open('get','http://localhost:3000/home/first')
console.log('请求后的状态码是:',xhr.readyState)
</script>
输出的结果为:
说明请求已经建立,但是还没有发送(还没有调用send方法)
b.在html文件中,监听onload
事件,并使用send()
方法发送请求,如下:
xhr.onload = function(){
console.log('发送请求后的状态码是:',xhr.readyState)
console.log('服务器响应的数据为:',xhr.responseText)
}
xhr.send()//向服务器端发送请求
打印结果为:
响应已经完成,可以获取并使用服务器的响应了。
c.在html文件,添加一个按钮,将onload
事件修改为onreadystatechange
事件,从而实现服务器响应的数据传送到页面,如下:
<h2 id = 'pt'></h2>
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
document.getElementById('pt').innerHTML = xhr.responseText;
}
}
输出结果为:
四、实现登录页面的验证案例
要实现的功能为:
(1)当用户输入的用户名错误时,提示用户名输入错误。
(2)当用户输入的密码错误时,提示密码输入错误。
(3)当用户名和密码均输入正确,在文本框输入:合法用户。
话不多说,直接上代码!!!
前端页面代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body style="text-align: center">
<div>
<label>用户名:
<input type="text" id="username">
<span id="name_info"></span>
</label>
<br><br>
<label>密码:
<input type="password" id="userPwd">
<span id="pwd_info"></span>
</label>
<br><br>
<button id="btn_login">登录</button>
<br><br>
<h2 id="info"></h2>
</div>
<script>
let btn = document.getElementById('btn_login')
btn.onclick = function(){
// 获取用户输入的信息
let name = document.getElementById('username').value
let pwd = document.getElementById('userPwd').value
//创建Ajax的核心对象
let xhr = new XMLHttpRequest()
//拼接参数
let params = 'username='+name+'&userPwd='+pwd
//建立和服务器的连接
xhr.open('get','http://localhost:3000/login/check?'+params)
//定义状态改变时的回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState===4 && xhr.status===200){
if(xhr.responseText==='101'){
document.getElementById('name_info').innerHTML='用户名错误'
}else if(xhr.responseText === '102'){
document.getElementById('pwd_info').innerHTML='密码错误'
}else if(xhr.responseText === '103'){
document.getElementById('info').innerHTML='合法用户'
}
}
}
// 向服务器发送请求
xhr.send()
}
</script>
</body>
</html>
后台代码为:
const express = require('express')
const router = express.Router()
//http://localhost:3000:login/check
router.get('/check',(req,res)=>{
//获取客户端的get请求参数
let uname = req.query.username;
let uPwd = req.query.userPwd
//对用户名和密码进行判断
if(uname !=='bear6'){
res.send('101')
}else if(uPwd !== '123456'){
res.send('102')
}else{
res.send('103')
}
})
module.exports = router;
实现效果为: