DAY28JS学习--同源策略、跨域问题、回调函数

一、同源策略

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)
            })