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

目录

本地储存localStorage与COOKIE的区别

输入一个url到返回页面&＃xff0c;中间发生了什么&＃xff1f;(面试)

原生AJAX写法&＃xff08;面试&＃xff09;

同源策略、跨域解决方案

Flexb布局

本地储存localStorage与COOKIE的区别

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

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

• 数据有效期不同

     COOKIE只在设置的COOKIE过期时间之前一直有效&＃xff0c;即使窗口或浏览器关闭。

     sessionStorage&＃xff1a;仅在当前浏览器窗口关闭前有效。

     localStorage&＃xff1a;始终有效&＃xff0c;长期保存。

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

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

• 作用域不同

    sessionStorage不在不同的浏览器窗口中共享&＃xff1b;

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

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

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

输入一个url到返回页面&＃xff0c;中间发生了什么&＃xff1f;(面试)

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

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

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

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

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

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

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

建议参考这个文档&＃xff1a;输入URL到页面加载

原生AJAX写法&＃xff08;面试&＃xff09;

这是一篇转载的文章&＃xff1a;原生Ajax写法

• 原生Ajax的使用&＃xff1a;

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

• get方法

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

• post方法

function POST(url,data) {// 创建核心对象var XHR &＃61; window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")// 编写回调函数XHR.onreadystatechange &＃61; function () {if (XHR.readyState &＃61;&＃61; 4 && XHR.status &＃61;&＃61; 200) {let data &＃61; XHR.responseTEXT;return data;}}// open设置请求方式和请求路径XHR.open("post",url); // 后面还可以写是否同步// 设置请求头XHR.setRequestHeader("content-type","application/x-www-form-urlencode");// send 发送XHR.send&＃xff08;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 --失败&＃xff0c;域名不同
3. https://www.a.com/test/index.html --失败&＃xff0c;协议不同
4. http://www.a.com:8080/test/index.html --失败&＃xff0c;端口号不同

• 同源策略

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

• 不受同源策略限制的

1. 页面中的链接&＃xff0c;重定向以及表单提交是不会受到同源策略限制的。
2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的,,,

跨域

• 什么是跨域

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

• 跨域的实现形式

1. 降域 document.domain

同源策略认为域和子域属于不同的域&＃xff0c;如&＃xff1a;

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

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

此方式的特点&＃xff1a;

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

2. JSONP跨域

JSONP和JSON并没有什么关系&＃xff01;

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

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

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

采用jsonp跨域也存在问题&＃xff1a;

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

3. CORS

CORS是一个W3C标准&＃xff0c;全程是“跨域资源共享”&＃xff08;Cross-origin resource sharing&＃xff09;

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

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

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

4. 其他方法

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

Flexb布局

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