3-13 通信类

tip:代码要多敲,不然很容易忘记

• 什么是同源策略以及限制
• 前后端如何通信
• 如何创建Ajax
• 跨域通信的几种方式

1. 什么是同源策略以及限制

3-13 通信类.mp4_20171124_134205.254_看图王.jpg

• 什么是源:协议 域名 端口

2. 前后端如何通信
   • Ajax 同源策略下的通信方式
   • WebSocket 不限制同源策略下的通信方式
   • CORS 支持跨域通信,也支持同源通信
3. 如何创建Ajax
   • 面试官会留意的问题
   • XMLHtttpRequest 对象的工作流程 第一步干嘛,第二步干嘛,第三步干嘛
   • 兼容性处理 判断你考虑问题是否周全
   • 事件触发的条件
   • 事件触发的顺序

var xhr = XMLHttpRequest:new XMLHttpRequest() || new ActiveObject(); //第一步:创建xhr对象
xhr.open('GET','/api',false); //第二步:确定XMLHttpRequest发送方式
xhr.send(null); //第三步:发送请求,把这个请求发送出去
xhr.onreadystatechange = function() { //第四步:响应
    //这里的函数异步执行,可以参考之前js基础中的 异步模块
    if (xhr.readyState == 4) { //状态的变化
        if (xhr.status === 200 || xhr.status === 304) { //服务端返回的状态码
            console.log(responseText) //服务端返回的内容
        }
    }
}

4. 跨域通信的几种方式
   • JSONP
   • Hash 地址URL#号后面的东西,hash变动页面不会刷新,这是hash实现跨域通信的基本原理;?号后面的search是会改变页面地址的,所以它不能做跨域通信
   • postMessage HTML5中新增的解决跨域通信的
   • WebSocket
   • CORS 可以理解为支持跨域通信的Ajax,浏览器在识别出你发送Ajax请求用到了跨域时,会在你的HTTP请求头中加一个origin来允许跨域通信.如果是普通Ajax跨域请求时,浏览器就会给你拦截了

• JSONP
  • 运行的原理:就是运用script标签的异步加载实现的