ajax:在网页不刷新的情况下向服务器发起http请求，得到http响应
AJAX简介
AJAX就是异步的 JS 和 XML
通过 AJAX可以在浏览器向服务器发送异步请求，最大优势就是：无刷新获取数据
使用场景：
1、二级菜单，鼠标滑过去，就会出现新的东西
2、页面下滑，滑动条改变位置，发起请求，获取到新的页面
3、用户名框，输入任意用户名，下面弹出用户名格式不对
XML 简介
XML 可扩展标记语言
XML 被设计用来传输和存储数据
XML 和 HTML 类似，不同的是HTML是预定义标签，XML是自定义标签,用来表示一些数据
XML： <name>孙悟空</name> <age>18</age>
AJAX 特点
AJAX 优点
1、可以无需刷新页面与服务器端进行通信
2、允许你根据用户事件来更新部分页面内容
鼠标事件、键盘事件、表单事件
AJAX 缺点
1、没有浏览历史，不能回退
2、存在跨域问题
3、SEO不友好（因为数据是发Ajax请求获取到的，爬虫爬不到，源代码里没有）
SEO:搜索引擎优化
HTTP
HTTP : 超文本传输协议，协议详细规定了浏览器和万维网服务器之间互相通信的规则
请求报文
重点是格式与参数
行 GET、POST（请求方法） /url部分（携带参数） HTTP/1.1（http版本）
头 Host:baidu.com
Cookie:name=baidu
Content-type:...
空行
体 （get可以为空）
响应报文
行 HTTP/1.1(http版本) 200（状态码） OK（响应状态字符串）
头 Content-Type:text/html;charset=utf-8
Content-length:2048 这三条都是对响应体内容做相关描述
Content-encoding:gzip
空行 必须有
体 <html> 主要返回结果
<head>
</head>
<body>
<h1></h1>
</body>
</html>
404 找不到
403 没有权限
401 未授权
500 内部错误
Node.js
一个应用程序，可以解析Js代码，通过代码对计算机资源做操作
Nodemon
当文件内容修改时，自动监听，重启应用
安装： npm install -g nodemon 启动： nodemon server.js
Express
基于 Node.js 平台，快速、开放、极简的 Web 开发框架
在vs code 终端中，npm init --yes 初始化
然后 npm i express
express基本使用
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
// request 对请求报文的封装
// reponse 对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send('Hello AJAX')
});
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000端口监听中");
})
服务端启动命令
在终端：node server.js (node ＋ 文件名)
终端输出：服务已启动,8000端口监听中
AJAX 案例1 GET请求
前端
#app {
width: 200px;
height: 100px;
border: 1px solid blue;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="app"></div>
</body>
<script>
const btn = document.getElementsByTagName('button')
[0];
const app = document.getElementById('app');
btn.onclick = function () {
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化 设置请求方法和 url 0
xhr.open('GET', 'http://127.0.0.1:8000/server'); 1
// 3. 发送
xhr.send(); 2
// 4. 事件绑定 处理服务端返回的结果
// on 当....时候
// readystate 是xhr 对象中的属性，表示0 1 2 3 4
xhr.onreadystatechange = function () {
// 判断（服务端返回了所有的结果）
if (xhr.readyState === 4) {
// 判断响应码状态 2xx成功
if (xhr.status >= 200 && xhr.status < 300) {
// 设置app的文本
app.innerHTML = xhr.response //点击发起请求后在div里显示响应头的结果
} else {
}
}
}
}
</script>
服务端
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
// request 对请求报文的封装
// reponse 对响应报文的封装
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//
response.send('Hello AJAX')
});
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000端口监听中");
})
设置GET请求参数：
xhr.open('GET', 'http://127.0.0.1:8000/server')
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
AJAX 案例2 POST请求
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 100px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
// 获取元素对象
const box = document.getElementById("box");
// 绑定事件，用bom2新方法
box.addEventListener('mouseover', function () {
// 1. 创建对象
const xhr = new XMLHttpRequest();
// 2. 初始化 设置请求方法和 url 0
xhr.open('POST', 'http://127.0.0.1:8000/server?a=100&b=200'); 1
// 3. 发送
xhr.send(); 2
// 4. 事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function () {
// 判断（服务端返回了所有的结果）
if (xhr.readyState === 4) {
// 判断响应码状态 2xx成功
if (xhr.status >= 200 && xhr.status < 300) {
// 设置app的文本
box.innerHTML = xhr.response
} else {
}
}
}
})
</script>
</body>
</html>
服务端
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
// request 对请求报文的封装
// reponse 对响应报文的封装
app.post('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//
response.send('Hello AJAX POST')
});
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000端口监听中");
})
设置POST请求参数：
xhr.send();
xhr.send('a=100&b=200')
设置请求头
// 设置请求头。第一个参数是头的名字，第二个头的值
xhr.setRequestHeader('name','TYC')
一般会把身份校验信息放在请求头里，传到服务器，校验
AJAX 案例3 JSON数据的响应
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 100px;
border: 1px solid rebeccapurple;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
const box = document.getElementById('box');
// 绑定价盘按下事件
window.onkeydown = function () {
// 发送请求
const xhr = new XMLHttpRequest();
// 设置响应体数据的类型
xhr.responseType = 'json'
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
// 发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
// 手动转换
// let data = JSON.parse(xhr.response);
// box.innerHTML = data.name
// 自动转换
box.innerHTML = xhr.response.name
}
}
}
}
</script>
</body>
</html>
服务端
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express();
//3.创建路由规则
// request 对请求报文的封装
// reponse 对响应报文的封装
app.all('/json-server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Headers', '*');
// 响应一个数据
const data = {
name: '张三'
};
// 对对象进行字符串转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str)
});
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已启动,8000端口监听中");
})
AJAX 案例4 JSON数据的响应
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
加一个时间戳
xhr.open('GET', 'http://127.0.0.1:8000/json-server'？t= Date.now());
请求取消
调用abort方法 xhr.abort()
Axios发送请求
axios.get(url,config)
axios.post(url,data,config)
通用方法
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.js"></script>
<script>
const btns = document.querySelectorAll('button');
// 配置baseURL
axios.defaults.baseURL = 'http://127.0.0.1:8000'
btns[0].onclick = function () {
axios.get('/axios-server', {
// url参数
params: {
id: 100,
vip: 8
},
// 请求头信息
headers: {
name: "babbala",
age: 20
}
}).then(value => {
console.log(value);
})
}
btns[1].onclick = function () {
axios.post('/axios-server', {
username: 'adim',
password: 123
}, {
params: {
id: 200,
vip: 10
},
headers: {
big: 22,
sma: 11
},
})
}
//通用方法
btns[2].onclick = function(){
axios({
// 请求方法
method:'POST',
// url参数
url:'axios-server',
// url传参
params:{
vip:10,
level:30
},
// 请求头
headers: {
big: 22,
sma: 11
},
// 请求体
data:{
username: 'adim',
password: 123
}
}).then(value => {
console.log(value.data.name);
})
}
</script>
</body>
Fetch发送请求
Fetch('url',{
methods:{
}
}).then(respose => {
return response.json();
}).then(response => {
console.log(response);
})
跨域：遵循同源策略
同源：协议、域名、端口号必须完全相同，违背同源策略就是跨域，AJAX默认遵循
解决跨域
1.JSONP 只支持 get 请求
原理：借助 script 标签天生的跨域能力
2.CORS 跨域资源共享
官方的跨域解决方案，不需要在客户端做任何特殊操作，完全在服务器中进行处理，支持get、post
请求
原理：CORS通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
response.setHeader('Access-Control-Allow-Origin', '*');
3.配置代理
devServer: {
proxy: {
'/api': {
tartget: 'http://10.20.151.205:4000',
changeOrign: true
}
}
}
