学习笔记（八）

同源策略及限制

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
源：协议、域名、端口。（源不同也就是跨域。）
限制：不是一个源的文档没有权力去操作

• Cookie、LocalStorage、IndexDB无法获取
• 无法获取操作另一个资源的DOM
• AJAX请求不能发送

前后端通信

• AJAX（同源下的通信方式）
• WebSocket（不限制同源策略限制）
• CORS（支持跨域通信也支持同源通信）

如何创建一个AJAX

• XMLHttpRequest对象的工作流程
• 兼容性处理
• 事件的触发条件
• 事件的触发顺序

var util={}
// AJAX
util.json= function (options) {
    var opt={
        url:'',
        type:'get',
        data:{},
        success:function(){},
        error:function(){}
    }
    util.extend(opt,options)
    if(opt.url){
        var xhr=XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XML')
        var data=opt.data,
            url=opt.url,
            type=opt.type.toUpperCase(),
            dataArr=[]
        for(var k in data){
            dataArr.push(k+'='+data[k])
        }
        if(type==='GET'){
            url=url+'?'+dataArr.join('&')
            xhr.open(type,url.replace(/\?&g/,' '),true)
            xhr.send()
        }
        if(type==='POST'){
            xhr.open(type,url,true)
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            xhr.send(dataArr.join('&'))
        }
        xhr.onload=function(){
            if(xhr.status===200||xhr.status===304){
                var res
                if(opt.success&&opt.success instanceof Function){
                    res=xhr.requestText
                    if(typeof res==='string'){
                        res=JSON.parse(res)
                        opt.success.call(xhr,res)
                    }
                }
            }
            else{
                if(opt.error&&opt.error instanceof Function){
                    opt.error.call(xhr,res)
                }
            }
        }
    }
}

跨域通信的几种方式

• JSONP
• Hash
• postMessage
• WebSocket
• CORS

JSONP

1. 发送请求告诉服务端callback的name，本地必须有一个name的函数
2. 在window以回调名称注册一个全局函数
3. 动态创建一个script标签
4. 监听加载事件onload是否成功
5. 删除函数或变量