AJAX学习笔记：什么是AJAX、http协议、AJAX请求发送方法（jQuery，Axios，fetch）、跨域、CORS
{"name":"孙悟空","age":18,"gender":"男"}
1.3 AJAX的优点/缺点
AJAX 的优点
1) 可以无需刷新页面而与服务器端进行通信。
2) 允许你根据用户事件（鼠标，键盘，表单）来更新部分页面内容。
AJAX 的缺点
1) 没有浏览历史，不能回退
2) 存在跨域问题(同源)
3) SEO 不友好（JS动态创建在页面上，爬虫爬不到结果）
1.4 AJAX的HTTP请求协议
HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
HTTP请求分为 请求 和 响应
请求报文
行 请求类型 url路径 HTTP协议版本
头 请求头
空体
体 GET请求体为空，POST请求体可以不为空
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
响应报文
行 HTTP协议版本 响应状态码 响应状态字符串
头 响应头
空体
体 主要的返回结果（html语法内容）
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体
尚硅谷
响应状态码：404 找不到；403 禁止；401 未授权；500 内部错误 等等
Request:亲求 Response：响应
控制台看不见的话，按快捷键Ctrl+R。
1.5 Node.js安装
AJAX Node.js搭建的服务器环境，安装详情在视频P7。视频P6是控制台查看报文的方式。
1.6 Express安装
express是服务端框架，是基于Node.js平台的，需提前安装Node.js。
安装
在vscode终端（快捷键ctrl+~）输入 npm i express
使用
创建一个js文件（例如aaa.js），在里面创建好express的代码，在终端输入node aaa.js 回车即可。在浏览器打开自己创建的端口（以我的代码为例，输入127.0.0.1:5000）。
注意：在终端输入 node 文件名 时，一定要注意文件路径与终端显示路径是否匹配。
// 1. 引入express
const exprss = require('express');
// 2. 创建应用对象
const app = exprss();
// 3.创建路由规则
// (request,response) 形参名，可自行定义，一般为request和response
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request,response)=>{
// 设置响应
response.send('坚持坚持再坚持');
});
app.listen(5000,()=>{
console.log('服务器已启动,5000端口监听中');
})
2 发送AJAX请求
准备一个前端页面和一个服务端代码。
服务端get设定路由规则的路径 (/server)，路径正确就会执行回调函数的代码，并且由response做出相应。（以下是GET请求服务端代码创建路由模块如下，只是加了路径，设置了响应，其他片段同上）
// 3.创建路由规则
app.get('/server',(request,response)=>{
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('HELLO AJAX');
});
如果端口被占用，记得先关闭其他的。
2.1 GET请求
操作DOM先获取元素，给元素绑定事件，在进行AJAX操作。创建对象，设置请求方式（GET/POST)和服务端地址，在send（）发送到服务端，后绑定事件处理服务端返回的结果。点击被绑定事件的按钮即可发送AJAX请求。
//获取button元素（获取的是button按钮索引值为0的那一个）
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:5000/server');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变（0-1是一次改变，以此类推，共4次）
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果，第四次改变就是返回结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功（2开头的都表示成功）
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{
}
}
}
}
GET请求传递参数
GET请求参数传递是直接在服务端地址后面加上？进行传递，用&隔开。
xhr.open('GET', 'http://127.0.0.1:5000/server?a=100&b=200&c=300');
2.2 POST请求
鼠标经过时，自动发送AJAX请求返回服务器数据。
获取元素绑定事件
const result = document.getElementById("result");
//绑定经过事件 'mouseover'
result.addEventListener('mouseover',function(){
......
}
绑定事件
//绑定事件
result.addEventListener('mouseover',function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('POST', 'http://127.0.0.1:5000/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;
}
}
}
})
发送POST请求先初始化：
xhr.open('POST', 'http://127.0.0.1:5000/server);
当然服务端也要改为POST（app.post('/server', (request, response) => {...}
const express = require('express');
const app = express();
//创建路由规则
app.post('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
POST请求参数传递在send（）中，和GET完全不同(样式可以自定义，但一般有要求)
xhr.send('a=100&b=200&c=300');
// xhr.send('a:100&b:200&c:300');
// xhr.send('1233211234567');
2.3 AJAX设置请求头信息
设置请求头信息，在初始化.open（）之后，发送.send（）之前精选设置，设置方式如下。
xhr.setRequestHeader('名字','值')
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// 以下这种是自定义的
xhr.setRequestHeader('name','atguigu');
对于自定义设置的请求头，要在服务端创建路由时添加一个响应头，预定义的不用，还得将接收类型改为all。
//可以接收任意类型的请求
app.all('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//自定义添加的响应头
response.setHeader('Access-Control-Allow-Headers', '*');
//设置响应体
response.send('HELLO AJAX POST');
});
2.4 JSON数据响应
工作中服务端返回的大都为JSON格式数据。
服务端response.send('XXXX');在发送数据时，只能发送字符串类型，所以要发送服务端的数据，就要通过JSON对服务端数据进行转化后通过send（）发送到网页，JSON.stringify(数据);，在通过JSON转化后读取。
const express = require('express');
const app = express();
app.all('/json-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//响应头
response.setHeader('Access-Control-Allow-Headers', '*');
//响应一个数据
const data = {
name: 'atguigu'
};
//对对象进行字符串转换
let str = JSON.stringify(data);
//设置响应体
response.send(str);
});
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
读取时有两种方法读取，可以手动转化和自动转化。
手动转化：JSON.parse(xhr.response);
// 事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 1. 手动对数据转化
let data = JSON.parse(xhr.response);
console.log(data);
result.innerHTML = data.name;
}
}
}
自动转化：需要提前设置响应体数据类型。xhr.responseType = 'json';
// onkeydown键盘按下事件
window.onkeydown = function(){
//发送请求
const xhr = new XMLHttpRequest();
//设置响应体数据的类型
xhr.responseType = 'json';
//初始化
xhr.open('GET','http://127.0.0.1:5000/json-server');
//发送
xhr.send();
//事件绑定
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
// 2. 自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;
}
}
}
}
2.5 nodemon自动重启工具
nodemon自动重启工具可以帮助我们解决在修改服务端数据时来回重启的问题。（检测变化后自动重启）
终端输入：npm install -g nodemon
安装后启动服务端终端指令变为 nodemon 文件名.js (例如：nodemon server.js)
2.6 IE缓存问题
问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址
即可避免缓存问题（前端HTML创建对象初始化时在路径后面加上当前的时间戳，这样每次就算一次新的回调）。
xhr.open("get","/testAJAX?t="+Date.now());
//2. 初始化 设置请求方法和 url
xhr.open("GET",'http://127.0.0.1:5000/ie?t='+Date.now());
服务端代码没什么变化
/针对 IE 缓存
app.get('/ie', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO IE - 5');
});
2.7 AJAX请求超时与网络异常处理
当运行过程中请求超时时，服务端可能不会及时快速响应，在请求超时或者网络异常是给用户提醒。
（如果服务端返回数据要2秒，前端请求设置时间为1秒就可以算作请求超时）
服务端返回时间设置
//延时响应
app.all('/delay', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
setTimeout(() => {
//设置响应体
response.send('延时响应');
}, 1000)
});
前端请求时间及网络异常设置
const btn = document.getElementsByTagName('button')[0];
const result = document.querySelector('#result');
btn.addEventListener('click', function(){
const xhr = new XMLHttpRequest();
//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
alert("网络异常, 请稍后重试!!");
}
//网络异常回调
xhr.onerror = function(){
alert("你的网络似乎出了一些问题!");
}
xhr.open("GET",'http://127.0.0.1:5000/delay');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status< 300){
result.innerHTML = xhr.response;
}
}
}
})
在事件初始化前（xhr.open之前）对请求截止时间等经行设置
xhr.timeout = 1000; 请求时间1S
添加超时回调xhr.ontimeout = function(){ 指令 }
添加网络异常回调xhr.onerror = function(){ 指令 }
2.7 AJAX取消请求
在请求的结果还没有返回之前，是可以取消请求的。
利用xhr.abort()的方法即可。（为了让返回结果不是那么快，给响应体加一个定时器设置一下返回时间就可以）。
//获取元素对象
const btns = document.querySelectorAll('button');
// 两按钮共用一个，因为要重复赋值，用let提前声明一下
let x = null;
btns[0].onclick = function(){
x = new XMLHttpRequest();
x.open("GET",'http://127.0.0.1:5000/delay');
x.send();
}
// abort
btns[1].onclick = function(){
x.abort();
}
2.8 AJAX重复请求问题
如果服务端响应速度比较慢，在响应还没返回时，前端多次进行重复的请求，就会造成请求拥堵。
解决办法就是如果上一个请求还没返回响应数据，还处在响应中，这时又创建了一个新的和上一个一样的请求，就直接取消上一个请求。
先声明一个标识变量，在事件初始化前对标识变量进行判断，如果上一次请求再进行就利用abort（）先取消，在事件初始化前对标识变量重新赋值，响应后同时修改标识变量为下一次做准备（响应也有成功和失败，防止失败后，修改标识变量直接先加在进入响应后，再做判断，代码如下）。
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求
btns[0].onclick = function(){
//判断标识变量
if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
x = new XMLHttpRequest();
//修改 标识变量的值
isSending = true;
x.open("GET",'http://127.0.0.1:5000/delay');
x.send();
x.onreadystatechange = function(){
if(x.readyState === 4){
//修改标识变量
isSending = false;
}
}
}
2.9 请求状态
xhr.readyState 可以用来查看请求当前的状态
https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
0: 表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
1: 表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
2: 表示 send()方法已经执行，并且头信息和状态码已经收到。
3: 表示正在接收服务器传来的 body 部分的数据。
4: 表示服务器数据已经完全接收，或者本次接收已经失败了
3 jQuery发送AJAX的方法
发送jQuery请求时要先引入jQuery
3.1 GET
$.get(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。
get数据在url后面。
$('button').eq(0).click(function(){
$.get('http://127.0.0.1:5000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
},'json');
});
app.get('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
3.2 POST
$.post(url, [data], [callback], [type])
url:请求的 URL 地址。
data:请求携带的参数。
callback:载入成功时回调函数。
type:设置返回内容格式，xml, html, script, json, text, _default。
$('button').eq(1).click(function(){
$.post('http://127.0.0.1:5000/jquery-server', {a:100, b:200}, function(data){
console.log(data);
});
});
服务端可以是post,也可以是all,post请求也可以是all。post数据没在url后面。
app.post('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
// or
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.send('HELLO JQUERY AJAX');
});
3.3 通用方法AJAX
功能性更加的强大，但是简易程度不太行。属于自定义的请求头，需要设置请求头信息。（其他需求可以去文档查看）
$('button').eq(2).click(function(){
$.ajax({
//url
url: 'http://127.0.0.1:5000/jquery-server',
//参数
data: {a:100, b:200},
//请求类型
type: 'GET',
//响应体结果，这里是自动，也可以调为手动
dataType: 'json',
//成功的回调
success: function(data){
console.log(data);
},
//超时时间
timeout: 2000,
//失败的回调
error: function(){
console.log('出错啦!!');
},
//头信息
headers: {
c:300,
d:400
}
});
});
app.all('/jquery-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
4 Axios发送AJAX请求
4.1 安装
npm安装：npm install axios (简写npm i axios)
或者直接引入
......
const btn = document.querySelectorAll('button');
4.2 GET
服务端类型为all，设置可以自定义请求头信息。
app.all('/axios-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name:'张三'};
response.send(JSON.stringify(data));
});
btn[0].onclick = function () {
//GET 请求
axios.get(''http://127.0.0.1:5000/axios-server', {
//url 参数
params: {
aa: 200,
bb: 6
},
//请求头信息
headers: {
name: 'lqqq',
age: 20
}
}).then(value => {
console.log(value);
});
}
数据返回和jQuery不一样，jQuery是基于回调函数，Axios是基于promise。返回结果是对象，在数
据获取这块非常完整。
4.3 POST
可以利用 axios.defaults.baseURL = ' ';下面路径就可以不用加这个。服务端代码都一样。
axios.defaults.baseURL = 'http://127.0.0.1:5000';
axios.defaults.baseURL = 'http://127.0.0.1:5000';
btn[1].onclick = function () {
axios.post('/axios-server', {
//请求体
username: 'lqqq',
password: '926'
}, {
//url
params: {
aa: 200,
bb: 9
},
//请求头参数
headers: {
height: 180,
weight: 180,
}
});
}
请求体是JSON格式。
4.4 通用方法发送
优点:语法来说相对简单
axios.defaults.baseURL = 'http://127.0.0.1:5000';
btn[2].onclick = function(){
axios({
//请求方法
method : 'POST',
//url
url: '/axios-server',
//url参数
params: {today:6,tommory:7},
//头信息
headers: {aa:100,b:'abcd'
},
//请求体参数
data: {username: 'hello', password: 'happy' }
}).then(response=>{
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data);
})
}
5 fetch发送AJAX请求
fetch（）函数是全局对象，可以直接调用，返回的结果为promise对象。
url参数可以直接添加？并缀在url后面
fetch('http://127.0.0.1:8000/fetch-server?abc=20', {...}
获取参数时先调它本身的text（）方法并return，然后再用promis的then方法获取。因为包了两层promise。如果响应体返回的是json字符串，先用json（）把数据解析成js对象在处理。
btn[0].onclick = function(){
fetch('http://127.0.0.1:5000/fetch-server?abc=20', {
//请求方法
method: 'POST',
//请求头
headers: {
name:'lqqq'
},
//请求体
body: 'username=admin&password=admin'
}).then(response => {
// return response.text();
return response.json();
}).then(response=>{
console.log(response);
});
}
//fetch 服务
app.all('/fetch-server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// response.send('Hello jQuery AJAX');
const data = {name:'长源'};
response.send(JSON.stringify(data));
});
6 跨域
6.1 同源策略
同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
同源： 协议、域名、端口号 必须完全相同。（请求地址与服务端）
【页面和服务端数据来自同一服务器】
跨域：违背同源策略就是跨域。
【页面和服务端数据来自不同服务器】
满足同源策略，url可简写。
AJAX默认遵循同源策略
6.2 JSONP解决跨域问题
JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明
才智开发出来，只支持 get 请求。
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
标签本身就可以跨域，所以可以引入外部文件
原理
JSONP 就是利用 script 标签的跨域能力来发送请求的。
验证：先搭建一个服务，把回调函数放在服务端，前端页面请求服务端时直接用script进行请求。
服务端
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
app.all('/jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name: 'LuoQQQQ'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
//4. 监听端口启动服务
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
本地地址5500可以获取5000地址的函数，并显示执行结果。
6.3 JSONP使用方法
动态的创建一个 script 标签
var script = document.createElement("script");
设置 script 的 src，设置回调函数
script.src = "http://localhost:5000/testAJAX?callback=abc";
function abc(data) {
alert(data.name);
};
将 script 添加到 body 中
document.body.appendChild(script);
服务器中路由的处理
6.4 原生jsonp实践
验证服务端是否存在用户名，若存在，输入框标统并提示。（这个案例只是展示可以在服务器读取数据，并不是真正的检测是否存在用户名，若要实现这一功能，服务器得配置相应数据，调取函数值还得做判断，最后输出结果）
const express = require('express');
const app = express();
//用户名检测是否存在
app.all('/check-username',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
exist: 1,
msg: '用户名已经存在'
};
response.send(JSON.stringify(data));
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`);
});
app.listen(5000, () => {
console.log("服务已经启动, 5000 端口监听中....");
});
6.5 jQuery发送jsonp请求
引入jQuery
这里的路径后面要加 ?callback=? ，是固定值。
$.getJSON('http://127.0.0.1:5000/jquery-jsonp-server?callback=?', function(data){......}
$('button').eq(0).click(function(){
$.getJSON('http://127.0.0.1:5000/jquery-jsonp-server?callback=?', function(data){
$('#result').html(`
游戏: ${data.name}
名称: ${data.city}
`)
});
});
服务端响应体也要接收
//接收 callback 参数
let cb = request.query.callback;
app.all('/jquery-jsonp-server',(request, response) => {
// response.send('console.log("hello jsonp")');
const data = {
name:'游戏',
city: ['和平暖暖','QQ飞车','王者荣耀']
};
//将数据转化为字符串
let str = JSON.stringify(data);
//接收 callback 参数
let cb = request.query.callback;
//返回结果
response.end(`${cb}(${str})`);
});
返回的数据如下
7 设置CORS
CORS是官方跨域方案（在服务端进行设置）
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方
案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持
get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段（响应头），允许服务器声明哪些源站通过浏览器有权限访问哪些资源。
CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应
以后就会对响应放行。
app.all('/cors-server', (request, response)=>{
//设置响应头
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Headers", '*');
response.setHeader("Access-Control-Allow-Method", '*') ;
// 下面的表示只为5500端口设置
// response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
response.send('hello CORS');
});
*号表示通配符，都可以放行。
("Access-Control-Allow-Origin", " * ")；
如果服务端数据在浏览器缓存了，Ctrl + F5 强制刷新就可以了。