Ajax介绍：
Asynchronous JavaScript and xml
在页面不刷新的情况下向服务器发送请求，实现数据的交换，用户体验更好
懒加载，按需加载——>资源利用率提高，整体页面加载速度变快（首屏加载）
XML Vs. JSON
XML
设计被用来传输和存储数据。
HTML用来在网页当中呈现数据。
HTML都是预定义标签，XML中没有预定义标签，都是自定义标签。
最开始Ajax在进行数据交换的时候使用的格式就是XML（服务器端返回给客户端的就是XML格式的字符串）
JSON
JSON更简洁，传输的体积更小，数据转换也更加容易，可以直接借助JSON API的一些方法，快速将字符串转成JS对象
Ajax的优缺点：
优点
- 无需刷新页面就可以服务器发送请求
- 允许根据用户事件向服务端发送请求，对页面局部刷新
缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO（Search Engine Optimization）不友好：爬虫爬不到
HTTP
Hypertext Transport protocol（超文本传输协议），协议详细规定了浏览器和服务器之间互相通信的规则
请求报文
重点是格式与参数
行 POST /?ie=utf-8 HTTP/1.1 请求类型、路径、协议版本
头 Host: aiguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-ulrencoded 请求体内容的类型
User-Agent: chrome 83
空行
体 username=admin&password=admin GET请求的请求体为空GET - Query String parammeters请求参数的解析显示
Form Data/request payload
响应报文
行 HTTP/1.1 200 OK 协议版本、响应状态码、状态字符串
头 Content-Type:text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
对响应体内容做相关描述：类型、长度、压缩方式
空行
体 主要返回的结果
尚硅谷>
404-找不到Not Found
403-没有权限
401-未授权
303-See Other
500-内部错误
200-请求成功
Node.js
一个应用程序，可以解析JS代码，通过JS代码可以对计算机资源进行操作
Express的基本使用
## 安装
npm i express// 使用
// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send('Hello Express');
})
// 4.监听端口并启动服务
app.listen(8000, () => {
console.log('服务已启动，8000端口监听中...');
})基本的Ajax操作
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 发送请求
xhr.send();
// 事件绑定 处理服务端返回的结果
// stateready 0-初始化 1-open 2-send 3-服务端返回部分结果 4-服务端返回所有结果
xhr.onstatereadychange = function () {
// 判断 服务端返回全部的结果
if (xhr.stateReady === 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); // 响应体
}
}
}发送post请求
// 初始化 设置请求类型和url
xhr.post('POST', 'http://127.0.0.1:8000/server');
// 设置请求体并发送请求
xhr.send('a=100&b=200&c=300');设置请求头
xhr.setHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setHeader('name', 'atguigu'); // 不是预定义的请求头，是自定义的，会有安全机制限制，服务端需要做头部处理，允许携带的头部字段 response.setHeader('Access-Control-Allow-Headers', '*');处理服务端返回的json数据
// 服务端返回
response.send({ name: 'atguigu' });
// 客户端接收
// 1. 手动转换
const data = JSON.parse(xhr.response); // 得到json数据
// 2. 自动转换：设置responseType
xhr.responseType = 'json';
// ...
const data = xhr.response;处理超时和网络异常
// 设置超时 2s超时
xhr.timeout = 2000;
// 网络超时后的回调
xhr.ontimeout = function () {
alert('网络异常，请重新刷新！！')；
}
// 网络异常的回调
xhr.onerror = function () {
alert('您的网络似乎有一些问题！')；
}请求取消
xhr.abort();重复请求：场景——连续多次点击按钮发送请求
let isSending = false; // 标识变量 是否正在发送Ajax请求
if(isSending) xhr.abort(); // 如果正在发送请求，则取消正在发送的请求，重新创建一个新的请求
xhr = new XMLHttpRequest();
isSending = true; // 修改 标识变量的值
xhr.open('method', 'url');
xhr.send();
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
isSending = false; // 重置 标识变量
}
}jQuery发送请求
// get请求, 第四个参数是响应体结果类型
$.get('url', {a: 100, b: 200}, function(data) {
console.log(data);
}, 'json');
// post请求
$.post('url', {a: 100, b: 200}, function(data) {
console.log(data);
});
// 通用型方法ajax,满足个性化需求
$.ajax({
// url
url: '',
method: '',
// get请求的url参数，post请求的请求体参数
data: {
a: 100,
b: 200
},
// 响应体结果的类型
dataType: 'json',
// 成功的回调
success: function(data) {
console.log(data);
},
// 超时时间
timeout: 2000,
// 失败的回调（包括超时）
error: function() {
console.log('出错啦！');
},
// 头信息
headers: {
name: 'xxx',
token: '123'
}
});Axios发送ajax请求
// 设置baseURL
axios.defauts.baseURL = 'http://127.0.0.1:8000';
axios.get('/axios-server', {
// url参数
params: {
name: 'tom',
age: 18
},
// 头信息参数
headers: {
username: 'hh',
token: '123'
}
}).then(value => {
console.log(value);
})
axios.post('/axios-server', {
// 请求体参数
password: 'admin',
username: 'admin'
}, {
params: {
name: 'jack',
age: 19
},
headers: {
username: 'hh',
token: '123'
}
});
// 通用型方法
axios({
url: '/axios-server',
method: 'POST',
// url参数
params: {
name: 'green',
age: 20
},
headers: {
username: 'hh',
token: '123'
},
// 请求体参数
data: {
password: 'admin1',
username: 'admin1'
}
}).then(response => {
console.log(response.status); // 响应状态码
console.log(response.statusText); // 响应状态码字符串
console.log(response.headers); // 响应头信息
console.log(response.data); // 响应体
})fetch发送请求
fetch('http://127.0.0.1:8000/fetch-server', {
method: 'POST',
headers: {
token: '123'
},
body: 'a=100&b=200'
}).then(response => {
// return response.text(); // 响应体解析为普通文本
return response.json(); // 响应体解析为json
}).then(data => {
console.log(data); // 响应体
});请求体
原生ajax请求：默认request payload
jQuery：默认form data
axios：默认request payload
fetch：默认request payload
同源策略
协议、域名、端口号完全一致
解决跨域的方案：
1. JSONP （JSON with Padding）
只支持get请求。利用script标签可获取跨域资源的特点，可跨域的标签还有img、link、iframe、script等。
服务端响应的是js代码，返回函数调用，并把参数传递进去。浏览器对代码进行解析并执行，函数声明由前端自己定义。
// node部分
app.get('/jsonp-server', (request, response) => {
const data = {
name: 'atguigu'
}
const str = JSON.stringfy(data);
response.end(`handle(${str})`);
});
实践
// 前端部分
const input = document.querySelector('input');
const p = document.querySelector('p');
function handle(data) {
p.innerHTML = data.msg;
input.style.border = 'solid 1px #f00';
}
input.onblur = function () {
const script = document.createElement('script');
script.src = 'http://127.0.0.1:8000/check-username';
document.body.appendChild(script);
}
// node部分
app.all('/check-username', (request, response) => {
const data = {
error: 1,
msg: '用户名已存在'
};
const str = JSON.stringify(data);
response.end(`handle(${str})`);
});jQuery中使用JSONP
// node部分
app.get('/jquey-jsonp-server', (request, response) => {
const data = {
name: 'atguigu',
city: ['北京', '上海', '深圳']
}
const str = JSON.stringfy(data);
const cb = request.query.callback;
response.end(`${cb}(${str})`);
});
// ?callback=?是固定写法，jQuery会随机生成一个回调函数名称，服务端可以调用这个函数，相当于调用getJSON的第二个参数（函数）
$.getJSON('http://127.0.0.1:8000/jquey-jsonp-server?callback=?', function (data) {
$('#result').html(`
名字：${data.name},
校区：${data.city}
`);
})2. CORS(Cross-Origin Resource Sharing)
跨域资源共享
新增了一组HTTP首部字段（header）来解决跨域问题，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
response.setHeader('Access-Control-Allow-Origin', '*'); // 允许的请求来源
response.setHeader('Access-Control-Allow-Headers', '*'); // 允许携带的头信息，用于预检请求的响应
response.setHeader('Access-Control-Allow-Methods', '*'); // 允许的请求类型，用于预检请求的响应
response.setHeader('Access-Control-Expose-Headers', 'token'); // 允许浏览器可以拿到的自定义响应头