个人学习篇（一）——“JS”

一、同源策略
是一种安全策略和安全机制，用来保护用户的信息，防止恶意网站盗取信息。它限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
实现方法：
1.限制接口请求：防止cookie中存储的信息第二次无需验证就被通过使用登陆成功。
2.限制dom查询：防止钓鱼网站去拿别的网站的信息。

二、跨域问题
描述：不同域的客户端脚本在无明确授权的情况下，不能获取对方的资源，访问不同源的就是跨域。浏览器中的域名包括以下部分：协议，域名，端口，三者任何一个不同都是跨域。
限制范围：也就是同源策略的限制范围。
解决：即在有跨域限制的时候，我们如何访问资源？
1.JSONP：在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。而引用资源的标签就有script，img，它们获取的资源没有跨域限制。Callback。
缺点：只支持get请求方式。
2.CORS（跨域资源共享）：定义了浏览器和服务器在遇到跨域资源时该如何沟通。

三、状态码
分类：

类别	原因短语
1xx Informational（信息性状态码）	接受的请求正在处理
2xx Success（成功状态码）	请求正常处理完毕
3xx Redirection（重定向）	需要进行附加操作以完成请求
4xx Client error（客户端错误）	客户端请求出错，服务器无法处理请求
5xx Server Error（服务器错误）	服务器处理请求出错

常见：

• 200：正常；
• 304：未修正，指由于缓冲版本更新客户应刷新文档
• 404：服务器上找不到请求的资源
• 500：后台接口异常

四、AJAX

原理：相当于在用户和服务器之间，加了一层ajax引擎，使用户操作和服务器响应异步化。并不是所有的请求都直接交给服务器，而是把一些数据验证和数据处理都交给ajax来做，只有确定需要向服务器读取新数据时才由ajax向服务器代为向服务器提交请求。
实现步骤：
1.实例化XMLHttpRequest

var xhr = new XMLHttpRequest();  //（浏览器提供的对象）

2.设置请求行

xhr.open(method,url);   方式，地址

3.设置请求头

xhr.setResquestHeader(key，val)
//请求方式method = "POST"的时候才会Content-Type，

4.设置请求体

xhr.send(data);
//请求方式method = "POST"的时候才会传递data，

5.监听请求状态

xhr.onreadystatechange = function(){}

五、事件委托和事件代理
原因：如果我们不使用事件代理，那么就会在页面上添加好多的事件处理程序，使得需要不断地与dom节点进行交互，这样会影响到页面的整体运行性能，使理浏览器重排和重绘的次数更多。
原理：事件冒泡。

六、事件模型

DOM2.0模型将事件模型分为三个阶段：事件捕获，事件目标，事件冒泡。

• 事件捕获：顺序是从外到内，顶层对象会发出一个事件流随着DOM节点向目标元素节点流去，直到到达事件真正发生的目标元素。
• 事件目标：到达目标后执行该目标元素相应的处理函数。
• 事件冒泡：从目标元素开始，往顶层传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发。故因此事件处理函数的执行，是冒泡的顺序，从内到外。