同源策略以及回调地狱和方法

狂风中的少年 提交于 2020-03-04 07:18:51

#同源策略

1 同源策略就是浏览器发送请求给的限制。
触发同源策略的条件:传输协议、域名、端口号,任意一个不一样搜会触发,对于触发同源策略的请求就叫做跨域请求。

2 跨域请求的三种方式
Jsonp跨域请求–src的引入
Cors跨域资源共享,由服务端进行配置,表示允许某一客户端的请求,客户端依旧使用ajax方式进行发送请求。
代理跨域:-浏览器不允许、非同源的请求。
(1)Jsonp中
① script标签会把请求回来的所有内容当做js代码执行
② Script标签默认有type属性,值是text/javascript,不管src请求什么文件,都会把文件里的内容当做字符串读取。
③ Script标签放入src属性不受同源策略的影响。
④ Jsonp.php中,只要有php标签对,就会按照php代码解析,没有php标签,就会按照字符串交给script标签。
(2)Cors跨越
Cors跨越是浏览器不让我们请求其他服务器,如果其他服务器告知浏览器可以请求,那么才不会阻止。

<?php // 以下三个可以实现cors的跨域请求,资源共享 header("Access-Control-Allow-Origin:*");//允许哪些域名请求 header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");//允许哪些请求方式 header('Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid');//允许携带哪些请求头信息 ?>

(3)代理跨越proxy(服务器正向代理跨越)
浏览器不允许请求非同源的地址
解决问题的方法
在浏览器同源设置一个代理服务器
把要发送的目标服务器的请求,发给代理服务器
由代理服务器转发给目标服务器
目标服务器把响应返回给代理服务器
代理服务器在把响应给浏览器。
**

#回调函数

**
1 回调函数 是一种函数的应用方式。
他是出现在两个函数之间的关系,以形参的方式调用。
使用回调函数,就是为了在 异步 的末尾做某些事情。
Function fn(callback){
setTimeout(function(){
Console.log(‘测试’)
Callback(‘res’)
},1000)
}

Fn(function(res){
Console.log(res)
})

2 回调地狱:

函数多层嵌套,没有可为维护性和可读性,代码没有错误只是不好进行后期维护。
3 promise 承诺 es6 语法
Promise就是解决回调地狱的方法之一,能让回调地狱写的优雅一点,让代码拥有可读性和后期可维护性。

Promise有三个状态;一旦状态确定就不可更改

继续-成功 继续-失败
1 承诺继续pending,异步事情正在执行 -状态 0
2 承诺成功fulfilled,异步执行成果-结果data
Resolve回调函数.then(function(){})
3 承诺失败 rejected,异步事情执行失败-结果error
Reject
回调函数.catch(function(){})


Var p=new Promise(function(resolve,reject){
Let xhr=new XMLHttpRequest()
Xhr.open(‘get’,url)
Xhr.onreadystatechange=function(){
If (xhr.readyState=4&&xhr.status=200){
Resolve(xhr,rsponseText)
}
If(xhr.status===404){
Reject(‘失败’)
}
}
Xhr.send();
})
p.then (function(res){
Console.log(res)
})
p.catch(function(res){
Console.log(res)
})

4 async异步 await等待
await就是当后面跟的是promise对象,就让他停止,先让他执行里面的异步操作,在把结果返回给前面的新变量,在继续向后执行,他只生效当前作用域内部,也就是async函数内部。
pGetSend 是一个异步的ajax请求
Await会等待这个异步函数请求结束,并把结果给前面的res变量以后,在向后执行代码。

Async/await语法:他们是es7 的新增语法,是为promise设计的语法,是回调地狱的终极解决方案,就是用async/await语法把–异步代码写的看起来像同步代码。

语法规范:
1 async关键字写在–函数的前面,就把该函数变成了一个异步函数
2 await是一个写在 异步函数里面的关键字,await后边必须跟着promise对象。
满足这些条件,就可以把本该在promise的then回调里面接受的结果,放在await关键字前面定义一个变量来接受了。
Async function fn(){
Let res=await new Promise(function(resolve,reject){
})
}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!