一、基础准备
1. 了解ajax：此处解释的言简意赅
2. 了解chrome查看通信报文（检查Network中查看）
- Headers
- Response Headers ：响应头
- Request Header：请求头
- Response：响应体
- Request：请求体
3. 下载安装node.js
https://nodejs.org/en/
查看安装版本号：node -v
4. 服务端准备操作
- 创建一个服务端js文件
- 此处的express框架是基于node.js，所以提前安装好node.js
- 安装express包（继承端中操作）
- 直接输入$ npm init
- 然后输入：npm i express
- 安装完成之后直接使用
- 引入express
- 创建应用=express（）
- 创建路由规则
- 设置监听窗口
- 最后启动服务：node 文件明_扩展名
//1.引入express
const express = require('express');
// 2.创建应用
const app = express();
// 3.创建路由规则
// request:对请求报文的封装
//response：对响应报文的封装
// 形参名字可以自己定义：但是建议使用请求和响应
app.get('/', (request, response) => {
//设置响应
response.send('Hello ajax');
});
//4.监听窗口启动服务
app.listen(8000, () => {
// 设置监听端口号
console.log('服务已经启动，8000端口监听中');
})二、原生ajax操作
发送前准备：服务端判断是否设置跨域
跨域设置响应头
response.setHeader('Access-Controll-Allow-Origin','*')
1. GET 操作
- 首先在服务端设置好路由规则
//首先创建路由规则
//响应方式、路径、响应头、响应体
app.get('/server',(request,response) =>{
//设置响应头
//名字和值
response.setHeader('Access-Control-Allow-Origin','*')
//响应体
cconsole.log('hello')
})- 启动服务端
- 最后在客户端设置请求响应四步走
<script>
// 1.获取元素:补充一个0
const btn = document.getElementsByTagName("button")[0];
const result = document.querSelector('#result');
// 2. 绑定事件（利用传统事件绑定）
btn.onclick = function () {
// 四大步骤
//1. 创建对象：初始http请求
const xhr = new XMLHttpRequest();
// 2.初始化：设置请求方法('发送什么类型请求'，'给谁发')
xhr.open("GET", "http://127.0.0.1:8000/server");
// 3.发送
xhr.send();
//4.事件绑定：处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断响应状态码
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//给div设置响应体内容
result.innerHTML = xhr.response;
}
}
};
};
</script>- 可以在初始化请求方法哪里设置参数
- ？分割
- suibian 参数名
- number 参数值
- & 连接符
xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200");
2. POST操作
- 首先单独设置路由规则（post或则all）、否则打开客户端报错
//首先创建路由规则
//响应方式、路径、响应头、响应体
//响应方式也可以设置为all
app.post('/server',(request,response) =>{
//设置响应头
//名字和值
response.setHeader('Access-Control-Allow-Origin','*')
//响应体
cconsole.log('hello')
})- 设置完成之后再次打开监听
- 然后设置客户端请求代码
<script>
// 1.获取元素:补充一个0
const btn = document.getElementsByTagName("button")[0];
const result = document.querSelector('#result');
// 2. 绑定事件（利用传统事件绑定）
btn.onclick = function () {
// 四大步骤
//1. 创建对象：初始http请求
const xhr = new XMLHttpRequest();
// 2.初始化：设置请求方法('发送什么类型请求'，'给谁发')
xhr.open("POST", "http://127.0.0.1:8000/server");
// 3.发送
xhr.send();
//4.事件绑定：处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断响应状态码
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
//给div设置响应体内容
result.innerHTML = xhr.response;
}
}
};
};
</script>-
此处也是可以设置参数
xhr.send("a=100&b=200");3. 设置自定义响应头信息
- 服务端中在回调函数中设置
// 自定义响应头
response.setHeader("Access-Control-Allow-Headers", "*");-
请求端设置自定义响应头（初始化请求之后）
//自定义头信息
xhr.setRequestHeader("name", "hahah");4. JSON使用在ajax
- 实现将服务端中数据对象传输到客户端
- 首先服务端设置相应方式啥的同上，但是单独声名一个将要传输的数据对象
- 将数据转换为JSON.stringify进行响应
app.all("/json-server", (request, response) => {
// 设置响应头:设置允许跨域
//名字叫Access - Controll - Allow - Origin
//后面是个值*
response.setHeader("Access-Control-Allow-Origin", "*");
// 设置响应数据对象返回给前端页面
const date = {
name: "duidui2",
};
// 设置对象进行字符串转化
let str = JSON.stringify(date);
// 设置响应体
response.send(str);
});- 客户端设置请求默认四步走
- 不过在最后的数据处理上有两种处理方式
- 手动：直接将响应数据转换为JSON.response
- 自动：在初始化请求方式之前设置响应的属性：json
- 不过在最后的数据处理上有两种处理方式
// 1.发送请求
const xhr = new XMLHttpRequest();
//设置自动响应体数据类型
xhr.responseType = "json";
// 2.初始化事件发送方式
xhr.open("GET", "http://127.0.0.1:8000/json-server");
//3.发送
xhr.send();
//4.事件绑定:处理服务器端返回结果
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response.name;
console.log(xhr.response);
// 手动 数据转换
/* let date = JSON.parse(xhr.response);
console.log(date);
result.innerHTML = date.name; */
//自动 数据转换:利用响应数据转换成json数据
}
}
};5. 为了提升业务效率
减少手动启动服务的麻烦
引入nodemon自动启动服务的插件
使用方式：
https://www.npmjs.com/package/nodemon直接在终端中进行安装：基于npm
npm install -g nodemon
此处启动服务端代码之后就不需要（修改保存再次启动） ，nodemon会自动启动
npx nodemon 服务端名字
6. 请求超时ajax中的操作方式
- 首先在服务端设置响应体是包含在一个定时器中，病机那个其设置延时
app.get('/delay', (request, response) => {
// 设置响应头:设置允许跨域
//名字叫Access - Controll - Allow - Origin
//后面是个值*
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
setTimeout(() => {
response.send('延时响应');
},3000)
});- 设置客户端：首先设置4步走
- 其次是设置响应初始化之前设置
- 响应延迟
- 响应异常
<script>
const btn = document.getElementsByTagName("button")[0];
const result = document.getElementById("result");
btn.onclick = function () {
const xhr = new XMLHttpRequest();
// 设置延时
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function () {
alert("网络异常，请重试");
};
xhr.onerror = function () {
alert("没有网络");
};
xhr.open("GET", "http://127.0.0.1:8000/delay");
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response;
}
}
};
};
</script>7.设置取消请求操作
abort（）
- 首先服务端的 路由规则就是设置一个定时器，在请求响应的等待时间内发送取消请求
- 客户端设置请求（正常四步走）
- 如果设置取消就直接使用创建的请求变量.abort（）
<script>
const btns = document.querySelectorAll("button");
let x = null;
btns[0].onclick = function () {
x = new XMLHttpRequest();
x.open("GET", "http://127.0.0.1:8000/delay");
x.send();
};
//abort()方法
btns[1].onclick = function () {
x.abort();
};
</script>8. 重复请求发送问题
实现效果：
- 点击第二次会把第一次直接停止掉
- 始终只有一次请求
- 在发送延迟响应的基础上
- 服务端就是延迟的路由规则
- 客户端使用 一个初始变量为false
- 判断初始变量：在请求响应初始化之前设置响应变量的值时候设置为true
- 当执行完成响应之后的初始值又再次回复false
<script>
const btn = document.querySelector("button");
let xhr = null;
let isSending = false; //是否发送ajax请求
btn.onclick = function () {
if (isSending) xhr.abort(); //如果正在发送，则取消该请求，创建一个新的请求
xhr = new XMLHttpRequest();
// 修改表示变量的值
isSending = true;
xhr.open("GET", "http://127.0.0.1:8000/delay");
xhr.send(); //请求完成
// 修改表示变量
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
isSending = false;
}
};
};
</script>
146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
