Ajax和Axios
作用:发送的就是http请求,请求相应数据
实现懒加载:需要的时候再出现,不需要则不出现
1.同步请求和异步请求
- 同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
- 异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
2.fetch、axios、jquery的ajax用法
都是用来进行http的请求
关系图:
Xhr(代码复杂rang) -> jquery封装的$ajax ->fetch(全新的技术) axios(封装ajax Xhr)
小扩展
JSONg格式是什么?
- 是一种文件传输的格式
- 多个键值对的形式
{
"key":"value"
}
- 获取JSON对象obj里面的属性a的方式
- obj.a
- obj[‘a’] (数组方法)
jquery封装的$ajax
请求的格式默认是表单格式
$.ajax({
//扩展方法,设置请求方法
methods:"POST"
//请求的参数 (1.post默认表单格式的提交,2.get:queryString)
//3.json格式请求
header:{'Content-type':'application/json'}
//请求参数
data:JSON.stringfy({a:10})
//请求地址
url(http://localhost:99),
//拿到调用的数据
success:function(data){
conssole.log(data)
}
})
fetch
现在浏览器自带,不用下载任何的js包
//返回的是promise
fetch("http:/localhost:99?b=2",{
//加入指定参数
method:"POST"
//以表单的形式提交
//也可以JSON方式提交
header:{"content-type":"application/x-www-form-urlencoded"}
//请求参数
body:"a=12&b=33"
}).then(response=>response.json()).then(data=>console.log(data)
axios
不仅可以再前端进行http的请求,也可以在后端进行http的请求
请求的格式默认是JSON格式
axios({
url:"http://localhost:99?b=2",
method:"POST",
//支持表单的格式提交
header:{"content-type":"application/x-www-form-urlencoded"}
data:"a=123&b=156"
data:{a:12}
//then方法 拿到调用的数据
}).then(res=>console.log(res.data))
axios和fetch区别对比
axios和fetch区别对比
3.JS跨域资源共享(CORS问题)
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
什么是同源策略?
- 是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现,通俗来说请求必须三个要素相同,(协议、域名、端口) 都相同,
怎么解决跨域?
常用的解决跨域问题:
一共有七种
常用三种
1.jsonp2.cors请求set3.代理转发
- 常规ajax 请求 设置—代理
- 后端设置代理和允许跨域请求
*任意的域都可以进行跨域
reponse.header("Access-Control-Allow-Origin","*")
2.Jsonp
原理是通过href或者src请求下来的js脚本或者CSS文件视频图片都是不存在跨域问题,只要AJAX请求数据才存在跨域问题,但是Jsonp有瑕疵只能请求get
前端:
function f(data){
alter(data)
}
<script src="请求地址URL?callback=f"></script>
后端:
var funcname = request.query.callback
response.send(funcname+"('你好')"
//f('你好')
- vue-cli 配置请求代理
什么是代理?
- 常规 :A客户端向 B服务器请求
- 变成: 代理服务器C收的A的请求 C服务器请求B服务器 返回给A客户端 (服务器请求服务器不存在跨域)
小编目前就整理了这些,后续会陆续更新啦~大家可以一起学习总结