♥️♥️♥️ 李哈哈要奋发啦～冲冲冲！！！相信只要坚持学习会有所回报的！♥️♥️♥️
简单地过一遍Ajax的知识点，留下学习过的痕迹！
一、AJAX简介
AJAX 全称 Asynchronous JavaScript And XML,就是异步的JS 和 XML。
通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
请求报文
重点是格式与参数
行 POST /s?ie=utf HTTP/1.1
头 Host: baidu.com
Cookie: name= haha
Content-type: application/x-www-from-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP/1.1 200 OK
头 Content-type: application/x-www-from-urlencoded
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>AJAX</h1>
</body>
</html>
二、XML简介
XML 可扩展标记语言，被设计用来传输和存储数据。 XML 和 HTML类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
比如说我有一个学生数据：
name = "哈哈"; age = 18; genter = "男";
用 XML 表示：
<student>
<name>哈哈</name>
<age>18</age>
<gender>男</gender>
</student>
三、AJAX的特点
优点：
- 可以无需刷新页面而与服务器进行通信。
- 允许你根据用户事件来更新部分页面内容。
缺点：
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO不友好
四、express基本使用
模拟服务器，安装 npm i express;
- 创建 server.js文件；
- 启动服务器
node express.js； - 浏览器地址栏输入地址
127.0.0.0:8000/server - 安装nodemon自动重启工具
//server.js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request, response)=>{
//设置相应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO EXPRESS');
})
//可以接收任意类型的请求
app.all('/server',(request, response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//响应头
response.setHeader('Access-Control-Allow-Origin','*');
//响应一个数据
const data = {
name: ''哈哈
};
//对对象进行字符串转换
let str = JSON.stringify(data)
//设置响应体
response.send(str);
})
//4. 监听端口启动服务
app.listen(8000, ()=>{
console.log("服务器已经启动， 8000端口监听中....")
})
五、AJAX基本使用
1. 操作代码（GET举例）
//获取button元素
const btn = document.getElememtsByTagName('button')[0];
//标志变量
let isSending = false; //是否正在发送AJAX请求
//绑定事件
btn.onclick = function(){
//=== 1. 创建对象
const xhr = new XMLHttpRequest();
//判断标志变量
if(isSending) xhr.abort(); //如果正在发送，则取消该请求，创建一个新的请求。
isSending = true;
//设置响应体数据的类型
xhr.responseType = 'json';
//超时设置：2s没结果就取消请求
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert('网络异常，请稍后重试！！');
}
//网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题！')
}
//=== 2. 初始化 设置请求方法和 url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
//设置自定义请求头，会调用OPTIONS方法
xhr.setRequestHeader('name','哈哈')
//=== 3. 发送
xhr.send();
//=== 4. 事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function(){
//判断（服务器返回了所有的结果）
if(xhr.readyState === 4){
//修改标志变量
isSending = false;
//判断响应状态码 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); //响应体
//(返回JSON数据处理)方法一：手动对数据转换
//let data = JSON.parse(xhr.response);
//let name = data.name;
//console.log(data);
//(返回JSON数据处理)方法二：自动转换
let name = xhr.response.name;
}else {
}
}
}
}
2. POST请求设置请求体
......
//2. 初始化 设置请求方法和 url
xhr.open('GET','http://127.0.0.1:8000/server');
//3. 发送
xhr.send('a=100&b=100');
......
3. 设置请求头信息
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-from-urlencoded');
//设置自定义请求头，会调用OPTIONS方法
xhr.setRequestHeader('name','哈哈')
4. 服务器响应JSON数据
后端返回JSON数据
//(返回JSON数据处理)方法一：手动对数据转换
let data = JSON.parse(xhr.response);
//(返回JSON数据处理)方法二：自动转换==>设置响应体数据的类型
xhr.responseType = 'json'
5. IE缓存问题解决
添加时间戳
xhr.open('GET','http://127.0.0.1.8000/ie?t='+Date.now());
6. AJAX请求超时与网络异常处理
//超时设置：2s没结果就取消请求
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert('网络异常，请稍后重试！！');
};
//网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题！')
};
7. AJAX取消请求
xhr.abort();
8. AJAX请求重复发送问题
使用标志变量来判别，例：代码中的isSending
9. jquery发送AJAX请求
略
9. Axios发送AJAX请求
Axios是基于promise的网络请求库，可以用于浏览器和node.js。
理论上： axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。ajax技术实现了局部数据的刷新，axios实现了对ajax的封装；
逻辑上： ajax本身是针对MVC的编程；axios符合现在前端MVVM的浪潮。
//配置 baseURL
axips.default.baseURL = 'http://127.0.0.1:8000';
axios.get('/axios-server',{
//url参数
params:{},
headers:{},
...
}).then(response=>{
})
10. Axio函数发送AJAX请求
axios({
methods: 'POST',
url: '/axios-server',
params:{},
headers:{},
//请求体参数
data:{}
}).then(response=>{
})
11. 使用fetch函数发送AJAX请求
fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
method: 'POST',
headers: {
name: '哈哈'
},
//请求体
body: 'username=admin&password=admin'
}).then(response => {
return response.json();
})
六、跨域
1. 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源：协议、域名、端口号 必须完全相同。
违背同源策略就是跨域。
2.如何解决跨域
1. JSONP
1）JSONP是什么
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来的，只支持get请求。
2）JSONP怎么工作的？
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP就是利用script标签的跨域能力来发送请求的。
3）JSONP的使用
用户名：<input type="text" id="username">
const input = document.querySelector('input');
//声明 handle 函数
function handle() {
input.style.border = "solid 1px #f00";
p.innerHTML = data.msg;
}
input.onblur = function(){
let username = this.value;
//向服务器发送请求，检测用户名是否存在
//1. 创建 script 标签
const script = document.createElement('script');
//2. 设置标签的src属性
script.src = 'http://127.0.0.1:8000/check-username';
//3. 将 script 插入到文档中
document.body.appendChild(script);
}
app.all('/check-username',(request, response)=>{
const data = {
exist: 1,
msg: '用户名已经存在'
};
//对对象进行字符串转换
let str = JSON.stringify(data)
//返回结果
response.end(`handle(${str})`);
})
2. CORS
- CORS 是什么？
CROS（Cross-Origin Resource Sharing）,跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 等请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
2）CORS 怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会响应放行。
