一、同源策略
1、含义
同源策略是浏览器的一个安全功能,不同源的网页脚本在没有明确授权的情况下,不能读写对方资源。所谓同源是指"协议+域名+端口"三者相同
2、同源
(1)当访问从一个地方访问另一个地方资源时,如果 协议+域名+端口 相同就是同源访问
(2)协议+域名+端口
http://www.qianfeng.com:8080/login.html
|
http://www.qianfeng.com:8080/index.html
二、跨域
1、含义
使用AJAX技术(XMLHttpRequest 对象),从一个网页去请求另一个网页资源时,违反浏览器同源策略限制,引起的安全问题,称为跨域。
2、解决方法
(1)不使用AJAX技术请求
用jsonp技术实现(script或img标签访问不同源资源时不会引起跨域问题)
*原理:jsonp技术利用script标签天生可以跨域特点解决跨域问题
*步骤:
jsonp技术利用script标签天生可以跨域特点解决跨域问题
代码动态创建script标签,将请求url地址作为script标签src属性值
jsonp需要服务端支持
把真正的数据封装到一个函数中一起返回
{code:1,info:'helloworld'}
callback({code:1,info:'helloworld'})
缺点: 只支持get请求
sendProductList('http://10.7.162.67:3000')
function sendProductList(url){
let scriptEle = document.createElement('script') // <script>
scriptEle.setAttribute('src',url)
document.body.appendChild(scriptEle)
}
function callback(res){
let resObj = JSON.parse(res)
console.log(res)
console.log(resObj)
}
(2)授权跨域资源共享
(3)使用代理服务器
*正向代理:代理服务器构建在客户端
特点:数据服务器不知哪个客户端请求,只知道代理服务器在请求
*反向代理:代理服务器技术构建在服务端
特点:客户端不知真正的服务器地址,也不知道哪个数据服务器在返回数据
三、回调函数
1、含义
一个函数作为另一个函数参数,在另一个函数中调用执行,这个函数称为回调函数
function fun(cb) {
console.log('fun')
cb()
}
fun(function () {
console.log('这是回调函数')
})
2、作用
(1)将函数中的数据作为参数传给回调函数处理
function fun(cb) {
let num = 100 //函数中数据
cb(num)
}
fun(function (data) { // data =100
console.log('执行回调函数',data)
})
(2)处理异步任务的结果
3、异步与同步任务
(1)同步任务:一个任务完成后再处理下一个任务
(2)异步任务:一个任务开始后,不等主程序执行完,继续向下执行
(3)异步任务包含:定时器、ajax网络任务......
4、示例:封装jsonp
class MyJsonp {
constructor(url) {
this.scriptEle = document.createElement('script') // <script>
this.scriptEle.setAttribute('src', url)
document.body.appendChild(this.scriptEle)
}
getResult(cb){
// callback函数名与后端约定
window.callback = function(result){
// console.log('data >> ',data)
cb(result)
}
}
}
const myJsonp = new MyJsonp('http://10.7.162.150:8089/api/jsonp/list')
myJsonp.getResult(function(data){
console.log('data>>11',data)
})