同源策略

定义：同源策略是浏览器一个安全策略

1. 浏览器的一个安全功能
2. 不同源的网页脚本在没有明确授权情况下，不能读写对方资源
   注：同源：协议+域名+端口三者一致

跨域问题

定义：使用ajax技术，从一个网页到另一个网页请求资源时违反同源策略引起的安全问题称为跨域
解决：

1. 不适用ajax技术
   替换方案：使用jsonp技术=>利用http的<script>标签天生可以跨域这一特点，其加载另一个域json数据，加载完成后通过回调函数通知调用者，需要另一域配合
   条件:

• 服务端支持，响应数据包裹在函数中返回

//后端程序
callBack({
	reSultcode=1
	resultinfo:{
		username:jack
	}
})
//前端程序
function callBack(data){}

• 只支持get请求
  应用：点击时加载js代码

<button>点击</button>
<script>
    var btn=document.querySelector('button')
    btn.onclick=function(){
        let scriptNode=document.createElement('script')
scriptNode.setAttribute('src','http://10.7.178.115:8088/api/jsonp/list')
    document.body.appendChild(scriptNode)
    
    }
    function callback(data){
        console.log(data);
    }
    
</script>

2. 授权跨域资源共享
   reponse.setHeader('Access-Control-Allow-Origin','*')
3. 使用代理服务器

回调函数

定义：一个函数作为另一个函数参数，在另一个函数中调用

function say(value){
	console.log(value)
}
console.log(say)
//返回say方法本身，以字符串形式 
//f指向函数
say('hi js')
//返回value值，就是say方法调用后的结果
//hi js

 function a(callback){
        console.log('a');
        callback.call(this);
    }
    function b(){
        console.log('b');
    }
    a(b)
//结果a
//结果b

或者可以这么理解，我买东西先不知道买什么，我先去商店，然后买具体东西函数传给我，我再买东西。完成买东西事件

 function shop(my,goods,callback){
        console.log(my+' '+'buy'+' '+goods);
        callback()
   }
   shop('my','goods',function(){
       console.log('shopping apple');
   })
//结果my buy goods
//   shooping apple

作用：处理异步函数结果

同步与异步

同步：一件事情做完做下一个事情
异步：多个事情并发执行
异步操作：setTimeout || ajax异步网络通讯
注：当一个操作开始执行后，主程序无需等待它的完成，可以继续向下执行

let num=1
setTimeout(function(){
	num++
	console.log(num)
},0)
	console.log(num)
//控制台输出
//1
//2

封装ajax函数

/*
*调用
ajax({
  method:'post',
  url:'http://10.7.178.115:8088/api/login',
  data:{
      username:nameEle.value,
      password:passwordEle.value
  },
  success:function(data){
      if(data.resultCode==1){
              localStorage.setItem('usernews',JSON.stringify(data.resultInfo))
              location.href='index.html'
      }else{
              alert('用户名密码出错')
      }
  },
  error:function(error){
  console.log(error);
  }
})
*/

function ajax(options){
    const xhr=new window.XMLHttpRequest()
    let params=getIformation(options.data)
    let method=options.method.toUpperCase()
    if(method=='GET'){
        xhr.open(method,options.url+'?'+params)
        xhr.send()
    }else if(method=='POST'){
        xhr.open(method,options.url)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(params)
        console.log(params);
    }
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                
                let data=xhr.responseText
                data=JSON.parse(data)
               
                    options.success(data)
            }else{
                    options.error('出错')
                }
            }
        }
    }

function getIformation(data){
    let information=[]
    for(let key in data){
        information.push(`${key}=${data[key]}`)
    }
    let str=information.join('&')
    return str
}