前端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访问其他域接口
跨域条件：协议、域名、端口，有一个不同就算跨域

可以跨域的三个标签：



//返回的是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