前端JavaScript面试技巧笔记（10）

知识点：

    #XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.open("GET","/api",false);//GET方式，路径，是否异步（true是使用异步）
xhr.onreadystatechange = function(){//函数异步
    if(xhr.readyState == 4){//已经完成
        if(xhr.status == 200){//返回成功
            alert(xhr.responseText);
        }
    }
}
xhr.send(null);

IE低版本使用ActiveXObject

    #状态?

readyState:
0-（未初始化）还没有调用send()方法
1-（载入）已调用send()方法，正在发送请求
2-（载入完成）send()方法执行完成，已经接收到全部响应内容
3-（交互）正在解析响应内容
4-（完成）响应内容解析完成，可以在客户端调用了

status（http标准）：
1xx-服务器收到，继续发送请求
2xx-表示成功处理请求，如200
3xx-需要重定向，浏览器直接跳转；如果发送ajax数据时session已过期，服务器要求重定向到登陆页面，
此时前台并不能获取到302的状态码,XMLHttpRequest对象会直接向后台发起重定向请求，然后返回状态200。
4xx-客户端请求错误，如404
5xx-服务器端错误

     #跨域

什么是跨域：
浏览器有同源策略，不允许ajax访问其他域接口
跨域条件：协议、域名、端口，有一个不同就算跨域

可以跨域的三个标签：
<img src=xxx>
<link href=xxx>
<script src=xxx>

三个标签场景：
<img>用于打点统计，统计网站可能是其它域
<link><script>可以使用CDN
    CDN的全称是Content Delivery Network，即内容分发网络。
    CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。
    CND加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资            
    源，这是核心。
    CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。
<script>可以用于JSONP

    #跨域注意事项

所有跨域请求都要经过信息提供方允许

    #JSONP实现原理

从服务器加载一个文件，不一定服务器一定有这个文件，服务器可以根据请求动态生成这个文件
网站A要跨域访问网站B的一个接口，B给A一个接口，约定返回内容格式如callback({x:100,y:200})(可动态生成)
然后在前台定义好这个callback函数
<script>
window.callback = function(data){
    console.log(data);
}
</script>
<script src="http://xxxxxxxx(B)"></script>//返回的是callback({x:100,y:200})，然后就输出了

    #另一种解决跨域的方法——服务器http header

需要服务器做，前端要了解

    #cookie

本身用于客户端和服务端通信
有本地存储功能
使用document.cookie = ..获取和修改

    # cookie用于存储的缺点

存储量小，只有4kb
所有http请求都带着，会影响获取资源的效率
API简单但是需要封装才好用

    #html5的locationStorage和sessionStorage

最大容量5m
API简单：
    localStorage.setItem(key,value);
    localStorage.getItem(key);

loacationStorage和sessionStorage的区别：
浏览器关了，sessionstorage会清理存储，locationStorage不会清理，一般用locationStorage；

注意点：
在IOS safari隐藏模式下，localStorage.getItem会报错，最好用try-catch封装

 

    #参考

【1】华南虎 Ajax关于重定向 https://www.cnblogs.com/chunchengwuchu/p/4103781.html
【2】software engnieer 什么是CDN加速？ https://blog.csdn.net/qq_21891743/article/details/79642605