Express框架与Ajax应用
Express框架
Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。
Express 框架特性：
- 提供了简洁的路由定义方式
- 对获取 http 请求参数进行了简化处理
- 对模板引擎支持程度高，方便渲染动态HTML页面
- 拥有中间件机制有效控制 HTTP 请求
- 拥有大量第三方中间件对功能进行扩展
下载：
npm i express
- 1
基本使用：
//1. 引入express
const express = require('express');
//2. 创建应用对象(网站服务器)
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// send()
// 1. send 方法内部会检测响应内容的类型
// 2. send 方法会自动设置 http 状态码
// 3. send 方法还会帮我们自动设置响应的内容类型以及编码
app.get('/', (request, response)=>{
//设置响应
response.send('HELLO EXPRESS');
});
app.get('/list', (req, res)=> {
// 向客户端直接响应一个对象
res.send({name: 'zhangsan', age: 20});
})
//4. 监听端口启动服务
app.listen(3000, ()=>{
console.log("服务已经启动, 3000 端口监听中....");
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
启用上面的服务要用node命令对上面的脚本进行执行。
在终端命令行中用 node+空格+文件路径 即可运行
如果服务启动失败，极有可能是因为端口被占用。
解决办法：可以改用其他的端口。
之所以此处涉及一点基础的express框架，是因为Ajax要跟服务端发请求，而这个服务端我们就可以用express框架来实现。
Ajax发送请求前的准备
前端页面的准备
定义一个需求：再点击按钮之后，向服务器发送请求，把响应体的内容呈现在div盒子之内。
<style>
#result{
width:200px;
height:100px;
border:solid 1px #90b;
}
</style>
<button>点击发送请求</button>
<div id="result"></div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
服务端的代码准备
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request, response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(3000, ()=>{
console.log("服务已经启动, 3000 端口监听中....");
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
记得使用之前确保这个端口已经释放关闭，不会产生服务的冲突。
关闭服务：在终端的node中Ctrl+C。
检测：在浏览器中输入http://127.0.0.1:3000/server
用Ajax发送GET请求
服务器端js
沿用上面的代码
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
// 如果url的路径是'/server'的话，那么就会执行后面的回调函数，并且由response
// 来做出响应。
app.get('/server', (request, response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应
response.send('HELLO EXPRESS');
});
//4. 监听端口启动服务
app.listen(3000, ()=>{
console.log("服务已经启动, 3000 端口监听中....");
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
请求端
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result{
width:200px;
height:100px;
border:solid 1px #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:3000/server');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
代码的注意点
①XMLHttpRequest()是什么？
XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
②readystate 是 xhr 对象中的属性, 表示状态，这个状态由0，1，2，3，4来表示(共五种值)，他们分别是什么意思？
- 0：表示未初始化
- 1：表示open方法已经调用完毕
- 2：表示send方法已经调用完毕
- 3：表示服务端已经返回了部分的结果
- 4：表示服务端已经返回了所有的结果
xhr.onreadystatechange = function(){)这个事件在readystate属性发生变化时进行触发，由此我们可以知道，这个事件会被触发4次。
因为我们要对服务端返回的结果进行处理，所以显然在readystate属性为0，1，2时是不行的，因为服务端还没返回结果。而属性为3时不合适，因为他只返回了部分结果。所以4是处理服务器返回结果的最好时机，故接下来我们要用条件语句对这个时段进行筛选！
③xhr.status属性
我们在判断完服务器是否返回了所有的结果之后，还要判断响应状态码。而xhr.status属性就记录着这个状态码。
事实上响应状态码中2开头的都可以表示成功。所以我们在判断的时候不一定要规定死xhr.status属性一定等于200，在200~299都可以。
④如何拿到服务器返回的相关参数？
- xhr.status 返回状态码
- xhr.statusText 返回状态字符串
- xhr.getAllResponseHeaders() 返回所有请求头
- xhr.response 返回响应体
Ajax设置请求参数
依照这种格式即可：
xhr.open('GET', 'http://127.0.0.1:3000/server?a=100&b=200&c=300');
- 1
？开头
&衔接
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/123955940
- 点赞
- 收藏
- 关注作者
评论（0）