一.ajax基础知识 1.1 客户端与服务器 1.2 URL地址完整写法 www.xxx.com:80/yyy/zzz.htm…
协议:http https
主机名: www.xxx.com
端口: 默认80
路径名: yyy/zzz.html
1.3. http协议常见的请求方式 get: 获取 post: 提交 delete:删除 put: 完整更新 patch: 部分更新
二. axios库的介绍
axios的用法: *
axios({
method:请求方式
url:请求地址
params: get请求传参
data: post请求传参
}).then(function({data:res}){
log(res) //res才是服务器返回的数据
})
result是被axios套了一层壳:服务器返回的真实数据在result.data成员上
三. http协议的请求报文与响应报文 请求报文: 请求行 请求头 空白行 请求体 响应报文: 响应行 响应头 空白行 响应体
响应行的状态码:
2xx:成功
3xx:重定向
4xx:客户端发生错误
5xx:服务器发生错误
四. 接口与接口文档 接口: 函数 与 请求地址URL postman软件测试接口是否可用
五. 表单 表单的组成部分: 表单域(form), 文本域(input,selected,textarea) 提交按钮(button) 表单的常见的属性: action提交地址 method提交方式 enctype(post方式提交数据的类型) enctype: application/x-www-form-urlencoded (name=jack&age=18) multipart/form-data 用来实现文件上传
表单提交数据的缺点: 收集数据但是提交数据后会发生页面的跳转
表单结合ajax提交数据: 1.表单收集数据 (e.preventDefault()) 2.ajax提交数据
六. axios提交数据的其它方法
get,delete 参数是追加到url地址后
post,put参数是放在请求体中的
1.get请求及传参
axios.get(地址,[{params:值}]).then(function(){})
2.post请求及传参
axios.post(地址,[值]).then(function(){})
3.delete请求及传参
axios.delete(地址,[{params:值}]).then(function(){})
4.put请求及传参
axios.put(地址,[值]).then(function(){})
----------------------------------------------
axios设置请求的根路径: *
axios.defaults.baseURL = 根路径
七. axios的拦截器 * 请求拦截器: 在ajax发送请求时拦截,做一些业务逻辑( 判断是否存在token ) 响应拦截器: 在ajax接收服务器返回的数据时拦截
语法:
axios.interceptors.request.use(function(config){
return config
},function(error){
return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
return response
},function(error){
return Promise.reject(error)
})
八. FormData的使用** FormData:可以帮助我们收集表单的数据 应用场景: 可以实现文件上传
语法:
let fd = new FormData(form对象)
文件上传:
1.得到文件 e.target.files[0]
2.将文件装在fd对象中 fd.append(接口文档的属性名,e.target.files[0])
3.axios 将fd发送到服务器
九. 原生XMLHttpRequest发送ajax
1. 初始化对象
let xhr = new XMLHttpRequest()
2. 准备数据
xhr.open(方式,地址)
3. 发送数据
xhr.send()
4. 监听onload 服务器端的返回数据
xhr.onload = function(){
console.log(xhr.response)
}
或
xhr.onreadystatechange = function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.response)
}
}
十. ajax跨域
同源: 两个URL地址有相同的协议,主机名,端口号
同源策略: 浏览器的一个安全策略
ajax请求数据要遵循同源策略.
html静态文件 与 接口地址 遵循同源策略,反之就是跨域
跨域请求数据需求是存在的,怎么办?
1.cors
本质: 服务器在响应添加一个响应头: Access-Control-Allow-Origin: *
2.反向代理
本质: ajax去自己的服务器要数据,让 自己的服务器 去 第三方的服务器取数据,自己的服务器再返回数据给浏览器
3.jsonp
本质: 动态的创建script标签，给script标签添加src属性，因为动态的创建script标签发送请求是异步
在当前的页面上声明了一个函数，从服务器端返回的是该函数的调用，即使是异步，函数声明中的代码没有执行，
只有当函数调用回来时，函数体中的代码才执行
数据是作为函数调用的实参返回的
ajax总结: ajax去服务器要数据,要数据的是"异步",实现了页面的局部刷新
现在最流行的ajax第三方的库axios
1.语法 axios({ method:请求方式 url:请求地址
params: get请求传参
data: post请求传参
}).then(function({data:res}){
log(res) //res才是服务器返回的数据
})
2.axios的返回值问题 axios把服务器返回的数据套了一层壳
3.axios设置根路径 axios.defaults.baseURL = "根路径"
4.axios的拦截器 axios.interceptors.request.use(function(){},function(){})
axios.interceptors.response.use(function(){},function(){})
5.axios的其它方法 5.1.get请求及传参 axios.get(地址,[{params:值}]).then(function(){})
5.2.post请求及传参
axios.post(地址,[值]).then(function(){})
5.3.delete请求及传参
axios.delete(地址,[{params:值}]).then(function(){})
5.4.put请求及传参
axios.put(地址,[值]).then(function(){})
