XML:可扩展标记语言,被设计来传输和存储数据
JSON:现在用的都是json
HTTP:
约定,规则:请求;响应
请求报文:
-------------------行-------------------
包含了一个方法和一个请求URL,还有HTTP版本。这些字段都有空格分开
-------------------头-------------------
首部字段
Date:Tue,3Oct 1997 02:16:03 GMT 服务器产生响应的日期
Content-length:15040 实体的主体部分包含了15 040字节的数据
Content-type:image/gif 实体的主体部分是一个GIF图片
Accept: image/gif, image/jpeg, text/html 客户端可以接收GIF图片和JPEG图片以及HTML
-------------------空行-------------------
-------------------体-------------------
将一个页面表单中的组件值通过 param1=value1¶m2=value2 的键值对形式编码成一个格式化串,它承载多个请求参数的数据。不但报文体可以传递请求参数,请求 URL 也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。
响应报文:
-------------------行 -------------------
包含了响应报文使用的HTTP版本,数字状态,以及描述状态码的原因短语。
-------------------头-------------------
设置跨域:response.setHeader.('access-controa-allow-origin')
HTTP/1.0 200 OK
Content-Type: image/gif
Content-Length: 8572
Server: Test Server
Version 1.0
-------------------空行-------------------
-------------------体-------------------
XHR
// 1.创建对象
const xhr=new XMLHttpRequest();
// 2.打开连接,初始化,设置请求对象和url
xhr.open("GET",‘http://127.0.0:8000/server’);
// 3.发送
xhr.send();
// 4.设置监听,事件绑定,处理服务端返回的结果
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <= 300){
xhr.status:状态码
xhr.statusText:状态字符串
xhr.getAllResponseHeader():响应头:
xhr.response:响应体
}else{
alert("error");
}
}
}
- onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
- readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪 - status 分为两种 200: “OK” 和 404: 未找到页面
每当readyState改变时,就会触发onreadystatechange事件
缺点:
- 语法复杂,需要自己处理状态管理,错误处理的逻辑,而且错误处理必须得在回调函数中进行错误判断
- 功能少,需要手动设置请求头,处理超时,取消请求等,setRequestHeader()
- XSRF, 需要手动设置请求头来保护
- 仅限浏览器环境,无法在服务器端直接用
Ajax
Ajax 是基于浏览器提供的 XMLHttpRequest 对象来实现的。
异步”性质,这意味着它可以与服务器通信、交换数据并更新页面,而无需刷新页面。
缺点:兼容性差,可读性差(没用promise,用的是回调函数)
Axios
- 基于promise. 在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests
- 有拦截器, transformRequest, axios.interceptors
- 允许取消请求,通过创建取消令牌cancel token: source.token,source.cancel(‘取消’),用令牌进行请求配置或在拦截器中中断请求,
- 并发, axios.all 和 axios.spread
- 自动转换数据
- 错误处理机制,可返回详细错误信息,如状态码,描述等
- api简洁,直接用axios.get(url,…), post、delete、head、options、put、request、patch
- 防止xsrf: xsrfCookieName: ‘XSRF-TOKEN’, xsrfHeaderName: ‘X-XSRF-TOKEN’,
- 监控请求进度: onUploadProgress 和 onDownloadProgress
10.超时 timeout:5000
this.$axios({
method: 'get',
url: '/goods.json',
params: {
id:1
}
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
this.$axios.post('/url',{
id:1
}).then(res=>{
console.log(res.data);
},err=>{
console.log(err);
})
fetch
也是以promise为基础,内置json解析,更好的处理错误
fetch('http://127.0.0:8000/server',{
method: 'post',
//请求头
headers:{
name:'qqq'
}
//请求体
body:'username=admin&password=admin'
)
.then(...)
.catch(...)
https://huaweicloud.csdn.net/6510ff85993dd34278ee584d.html?dp_token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6NzA3NDI4LCJleHAiOjE3MTQ0OTkzNDgsImlhdCI6MTcxMzg5NDU0OCwidXNlcm5hbWUiOiJ3ZWl4aW5fNTA0ODg4OTcifQ.hJWhs0eATa0M6h31MCp5Thifr6no6pV2uG7fId-kzuk