前端工作过程遇到的问题总结(一)

目录

本地储存localStorage与cookie的区别

输入一个url到返回页面，中间发生了什么？(面试)

原生AJAX写法（面试）

同源策略、跨域解决方案

Flexb布局

---

本地储存localStorage与cookie的区别

• cookie在浏览器与服务器之间来回传递

     sessionStorage和localStorage不会把数据发送给服务器，仅在本地保存

• 数据有效期不同

     cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

     sessionStorage：仅在当前浏览器窗口关闭前有效。

     localStorage：始终有效，长期保存。

• cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
• 存储大小也不同

       cookie数据不能超过4K，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

• 作用域不同

    sessionStorage不在不同的浏览器窗口中共享；

    localStorage在所有同源窗口中都是共享的

    cookie也是在所有同源窗口中都是共享的

    Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage的api接口使用更方便

输入一个url到返回页面，中间发生了什么？(面试)

在浏览器中输入url，客户端先检查本地是否有对应的ip地址，

• 如果找到了则返回响应的ip地址
• 如果没有找到则会请求DNS服务器，返回解析后的ip地址。

应用层客户端发送HTTP请求，包括请求头和请求体。其中请求头包含了重要的信息，包括请求的方法，目标url，遵循的协议，返回的信息是否需要缓存，客户端是否发送cookie等

然后传输层TCP协议传输报文，三次握手四次握手，三次握手，发送端发送带有SYN标示的数据给接收端，接收端接受到数据包后返回一个SYN/ACK标志的数据包表示确认信息，接收端接受后再发送一个带有ACK表示接到请求，连接成功。

再然后网络层ip协议查询mac地址，ip协议把TCP分割好的各种数据包发送给接收方，而要保证确实能传到接收方需要mac地址，物理地址是唯一的。ip地址和mac地址是一一对应的关系，一个网络设备可以换，但是mac地址是不能变的。

数据到达链路层，客户端发送请求的一端就完成了

服务端接受请求，在层层向上直到应用层。接受到HTTP请求后，查找资源并返回响应报文，响应报文有一个重要的信息就是状态码，返回数据渲染页面最后呈现给客户。

建议参考这个文档：输入URL到页面加载

原生AJAX写法（面试）

这是一篇转载的文章：原生Ajax写法

• 原生Ajax的使用：

function ajax(url){
    var XHR=  window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
    XHR.open(method,url,true); // 第一参数是方法类型，第二个参数是url地址，第三个参数是设置是否同步
    XHR.send();
    XHR.onreadysattechange = () =>{
        // readyState值说明
        // 0,初始化,XHR对象已经创建,还未执行open
        // 1,载入,已经调用open方法,但是还没发送请求
        // 2,载入完成,请求已经发送完成
        // 3,交互,可以接收到部分数据
 
        // status值说明
        // 200:成功
        // 404:没有发现文件、查询或URl
        // 500:服务器产生内部错误
       if(XHR.readyState == 4 && XHR.status == 200){
           // 这里可以对返回的内容做处理
           // 一般会返回JSON或XML数据格式
           var data = XHR.responseTEXT;
           return data;
           // 主动释放,JS本身也会回收的
           XHR = null;
       }
    }  
}

• get方法

function GET (url) {
    // 创建核心对象
    var XHR = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
    // 编写回调函数
    XHR.onreadystatechange = function () {
        if (XHR.readyState == 4 && XHR.status == 200) {
            let data = XHR.responseTEXT;
            return data;
        }
    }
    // open设置请求方式和请求路径
    XHR.open("get",url); // 后面还可以写是否同步
    // send 发送
    XHR.send();
}

• post方法

function POST(url,data) {
    // 创建核心对象
    var XHR = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
    // 编写回调函数
    XHR.onreadystatechange = function () {
        if (XHR.readyState == 4 && XHR.status == 200) {
            let data = XHR.responseTEXT;
            return data;
        }
    }
    // open设置请求方式和请求路径
    XHR.open("post",url); // 后面还可以写是否同步
    // 设置请求头
    XHR.setRequestHeader("content-type","application/x-www-form-urlencode");
    // send 发送
    XHR.send（data);
}

同源策略、跨域解决方案

同源策略

• 什么是源

 源(origin)就是协议、域名和端口号。

若地址里面的协议、域名和端口号均相同则属于同源。

以下是相对 http://www.a.com/test/index.html的同源检测

1. http://www.a.com/content/list.html --成功
2. http://www.child.a.com/test/index.html --失败，域名不同
3. https://www.a.com/test/index.html --失败，协议不同
4. http://www.a.com:8080/test/index.html --失败，端口号不同

• 同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读取对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

• 不受同源策略限制的

1. 页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>

跨域

• 什么是跨域

前面所讲的浏览器同源策略的影响，不是同源的脚本不能操作其他源下面的对象。想要操作另一个源下的对象是需要跨域。

• 跨域的实现形式

1. 降域 document.domain

同源策略认为域和子域属于不同的域，如：

child.a.com与a.com
child.a.com与child2.a.com
xxx.child1.a.com与child1.a.com

两两不同源，可以通过设置document.domain='a.com',浏览器就会认为它们都是同一个源。想要实现以上任意两个页面之间的通信，两个页面必须都设置document.domain='a.com'.

此方式的特点：

1. 只能在父域名与子域名之间使用，且将xxx.child1.a.com域名设置为a.com后，不能再设置child1.a.com
2. 存在安全性问题，当一个站点被攻击后，另一个站点会引起安全漏洞。
3. 这种方法只适用于Cookie和iframe

2. JSONP跨域

JSONP和JSON并没有什么关系！

JSON的原理：在a.com的jsonp.html里创建一个回调函数xxx,动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字。请求地址为http://b.com/main.js?callback=xxx。在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调。如下面的代码：

function addScriptTag(src) { 
    var script = document.createElement('script'); 
    script.setAttribute("type","text/javascript"); 
    script.src = src; 
    document.body.appendChild(script);
}
// window.onload是为了让页面加载完成后再执行
window.onload = function () { 
    addScriptTag('http://b.com/main.js?callback=foo');
}
function foo(data) { 
    console.log(data.name+"测试");
};

这样便实现了跨域的参数传递。

采用jsonp跨域也存在问题：

1. 使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议进行基本的token的身份验证
2. 只能是GET，不能POST
3. 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题

3. CORS

CORS是一个W3C标准，全程是“跨域资源共享”（Cross-origin resource sharing）

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

刚才的例子中，在b.com里面添加响应头声明允许a.com的访问，代码： Access-Control-Allow-Origin: http://a.com 然后a.com就可以用ajax获取b.com里的数据了。

注意：此方法IE8以下完全不支持，IE8-10部分支持。详见caniuse-CORS 详细内容请参考：跨域资源共享 CORS 详解

4. 其他方法

1. HTML5的postMessage方法
2. window.name
3. location.hash

Flexb布局

这里可以看我的另外一篇文章：快速入门Flex布局