AJAX
AJAX的特点
AJAX的优点
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容。
AJAX的缺点
-
没有浏览历史,不能回退
-
存在跨域问题(同源)
-
SEO不友好(爬虫) 不能在网页中找到信息
请求/响应报文:
行
头
空行
体
AJAX的简单使用(get请求)
在express框架的使用
1. 安装express框架
a.初始化:
npm init --yes
来获得package.json文件
b.安装express框架:
npm i express
可以通过express -v
检查版本
2.在项目里添加一个js文件,在其中引入express框架并使用(本人设置为express.js)
3.启动服务器
a.在终端输入:
node express.js
b.在浏览器里打开
http://127.0.0.1:8000/
便获得以下数据
4.向服务器请求数据
在新建的html文件中添加Ajax请求,绑定在button标签上,点击即可获得请求
如何在Ajax中传递参数:
在open方法后添加 ? 参数=参数值 & 参数=参数值,便可传参
例如:
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
AJAX的请求
post请求
只需将open方法的请求改为POST,并在服务器中添加post方法
post请求参数:
在xhr.send()方法中进行传递
xhr.send('a=100 & b=200');
设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
若要设置自定义请求头,则
1.xhr.setRequestHeader('hhh','hhhhhhhhhh');
2.将服务器的post方法换为all
app.all('/server',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*'); //设置响应头
response.setHeader('Access-Control-Allow-Headers','*');
response.send('hello,world'); //对响应报文的封装
})
3.在服务器的all方法中添加
response.setHeader('Access-Control-Allow-Headers','*');
将请求的数据变为json格式
1.手动
let data=JSON.parse(xhr.response);
2.自动
网络异常的处理
假设在服务器设置了3s后发送响应报文
取消发送
abort();
JQuery发送ajax请求
jQuery通用方法
axios发送ajax请求
cdn引入:
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
设置baseURL
defaults为全局设置
axios.defaults.baseURL='http://127.0.0.1:8000';
url的写法便可写为
可以插入promise语法
其他拓展:
axios函数方法发送ajax请求
有时候,我们可能需求同时发送多个请求,使用axios.all,可以放入多个请求的数组
axios.all()返回的结果是一个数组,使用axios.spread可将数组[res1,res2]展开为res1, res2
axios.all(
[
axios({
url:'http://123.207.32.32:8000/home/multidata',
params:{
page:1
}})
,axios({
url:'http://123.207.32.32:8000/home/multidata'
})
]
)
.then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
创建axios实例
我们一般不使用全局axios而是创建实例
const instance1=axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
instance1({ //便可以用instance来使用上面的实例,而不是使用全局的配置
url:'/category'
}).then((res)=>{
console.log(res);
})
但这样同样会使项目的main.js更加沉重,所以我们可以把实例分离出去
在新建的js文件中:
import axios from 'axios'
export function request(config,success,failure){
//创建实例
const instance =axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
//发送真正的网络请求
instance(config)
}
或者封装在一个函数中:
export function getnavbarlist(){
return request(
{
url:'/home/multidata'
})
}
在main.js中对js的request函数进行引用
import { request } from '../src/network/request'
request(
{url:'/home/multidata'},
res=>console.log(res),
err=>console.log(err)
)
或者
getnavbarlist().then(res=>
{
console.log(res);
}
)
我们可以直接return instance(config)即可,因为其自带promise
import axios from 'axios'
export function request(config){
const instance =axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
//发送真正的网络请求
return instance(config) //会返回一个promise
}
axios拦截器
instance.interceptors.request.use(config=>{
console.log(config)
return config
},
bbb=>{console.log(bbb)});
instance.interceptors.response.use(res=>{
console.log(res);
return res.data
},
err=>{
console.log(err)
})
fetch函数方法发送ajax请求
解决跨域问题
展现本地文件
const express =require('express');
//2.创建对象
const app =express();
app.get('/home',(request,response)=>{
response.sendFile( __dirname + '/index.html');
//__dirname获取绝对路径
});
app.listen(9000,()=>{
console.log('55555~,服务器已经启动');
})
jsonp(还没懂)
:为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。