文章目录
一、jQuery发送ajax请求
<script crossorign="anonymous" src="....."></script>
//发送请求 四个参数
$.get('http://127.0.0.1:8000/jquery-server',{a:100, b:200},function()=>{data
console.log(data);
},'json')
二、jQuery通用方法发送ajax请求
常用设置
$.ajax({
url:'http://127.0.0.1:8000/server',
//参数
data:{a:100, b:200},
//请求类型
type:'GET',
//响应体结果
dataType:'json',
//成功的回调
success:function(data){
},
//超时时间
timeout:2000,
error:fucntion(){
console.log('出错')
}
//头信息
headers:{
c:300,
d:400
}
})
三、Axios发送ajax请求
常用设置
btns[0].onclick = function(){
//GET请求
axios.get('/axios-server',{
//url参数
params:{
id:100,
vip:7
},
//请求头信息
headers:{
name:'atguigu',
age:20
}
})
- axios函数发送ajax请求
axios({
//请求方法
method:'POST',
//url
url:'axios-server',
//url参数
params:{
vip:10,
level:30
},
//头信息
headers:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:'admin'
}
}).then(response=>{
console.log(response);
//响应状态码
console.log(response.status);
//响应状态字符串
console.log(response.statusText);;
//响应头信息
console.log(response.headers);
//响应体
console.log(response.data)
})
- fetch函数发送ajax请求
fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
//请求方法
method:'POST',
//请求头
headers:{
name:'atguigu'
},
//请求体
body:'username=admin&password=admin'
}).then(response=>{
// return response.text();
return response.json()
}).then(response=>{
console.log(response)
})
四、跨域
1.同源策略
- 同源: 协议、域名、端口号 必须完全相同。
- 违背同源策略就是跨域。
2.如何解决跨域
- jsonp解决
返回结果为一个函数调用,函数参数为返回结果数据
//jsonp服务
app.all('/jsonp-server',(request,response)=>{
const data = {
name:'xiaoming'
};
//将数据转化为字符串
let str = JSON.stringify(data);
//返回结果
response.end(`handle(${str})`)
})
//需要在前端定义函数
<script>
function handle(data){
// .....处理数据
}
</script>
<script src="http://127.0.0.1/jsonp-server"></script>
3.jsonp实践
4.jQuery发送jsonp请求
$.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callbacck=?',function(data){
})
接收callback参数
let cb = request.query.callback
五、CORS(跨域资源共享)
1.CORS是什么?
CORS(Cross-OriginResourceSharing),跨域资源共享。CORS是官方的跨域解决方案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段,允许服务器声明哪些源站通过浏览器有权限访问哪些资源
2.CORS怎么工作的?
CORS是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应
以后就会对响应放行。
- 设置响应头
response.setHeader("ACCESS-Control-Allow-Origin","*");
response.setHeader("ACCESS-Control-Allow-Header","*");
response.setHeader("ACCESS-Control-Allow-Method","*");