今天完成的事：

复习css和js深度思考，vue框架知识点

明天计划的事：

了解更多js、vue使用技巧

遇到的问题：

暂无

收获：

JSON

如何理解JSON？

JSON是JS的一个内置对象，也是一种轻量级的数据交换格式。 常用两个方法：

• parse // 字符串转对象
• stringify // 对象转字符串

XML和JSON的区别？

• 数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。
• 数据交互方面：JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互
• 数据描述方面：JSON对数据的描述性比XML较差
• 传输速度方面：JSON的速度要远远快于XML

Ajax

如何创建Ajax？

// 创建XMLHTTPRequest对象 var xhr = new XMLHttpRequest(); // 创建一个新的http请求 xhr.open("get", url, true) // 设置响应HTTP请求状态变化的函数 xhr.onreadystatechange = function(){     if(xhr.readyState == 4){         if(xhr.status == 200){             // 获取异步调用返回的数据             alert(xhr.responseText)         }     } } // 发送HTTP请求 xhr.send(null); 复制代码

状态码readyState说明：0：未初始化，未调用send()；1：已调用send()，正在发生请求；2:send()方法执行完毕，已经接收到全部响应内容；3：正在解析响应内容；4：解析完成，可以在客户端调用了

Ajax有哪些优缺点？

优点：1.通过异步模式，提升用户体验；2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用；3.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载；4.Ajax可以实现局部刷新

缺点：1.Ajax暴露了与服务器交互的的细节；2.对搜索引擎的支持较弱；3.不容易调试

GET和POST在浏览器实现的区别

• GET后退刷新无害，可收藏为书签，能被缓存，参数会保留在浏览器历史中，只允许ASCII字符，安全性较差，数据显示在URL中
• POST后退刷新会重新提交数据，不可被收藏为标签，不能被缓存，参数不会被保存在浏览器历史中，对数据类型无限制，安全性较好，数据不会显示在URL中

GET请求传参的误区

误区：我们常认为GET请求参数的大小存在限制，而POST无限制

实际上HTTP协议没有限制GET/POST的请求长度限制，GET的最大长度限制是因为浏览器和WEB服务器限制了URL的长度。

GET和POST的区别

GET和POST方法没有实质区别，只是报文格式不同。

跨域

可以跨域的三个标签：<img><link><script>

什么是跨域？

跨域指通过JS在不同的域之间进行数据传入或通信。 协议，域名，端口有一个不同就是不同域

浏览器为什么要使用同源策略？

同源策略是为了防止CSRF攻击，它是利用用户的登录态发起恶意请求。如果没有同源策略，网站可以被任意来源的Ajax访问到内容。

如何解决跨域问题？

• JSONP 原理是利用<script>标签没有跨域限制的漏洞

function jsonp(url, callback, success){     let script = docuemnt.createElement('scipt');     script.src = url;     script.async = true;     script.type = "text/javascript";     window[callback] = function(data){         success && success(data)     }     document.body.appendChild(script) } jsonp('http://xxx.com', 'callback', function(value){     console.log(value);   }) 复制代码

JSONP使用简单，兼容性不错但仅限GET请求

• CORS CORS需要前后端同时支持，服务器端设置Access-Control-Origin开启CORS，该属性表明哪些域名可以访问资源。分为简单请求和复杂请求，复杂请求多一个预检请求
• document.domain 只适用于二级域名相同，例如a.test.com和b.test.com。在页面添加document.domain = 'test.com'表示二级域名相同即可跨域
• postMessage 通常用于获取嵌入页面的第三方页面数据，一个页面发送消息，另一个页面判断来源并接收消息

// 发送消息 window.parent.postMessage('message', 'http://www.test.com') // 接收消息 let mc=new MessageChannel() mc.addEventListener('message', event => {     let origin = event.origin || event.originalEvent.origin;     if(origin === 'http://www.test.com'){         console.log('验证通过')     } }) 复制代码

• window.name

存储

请描述cookie，sessionStorage和localStorage的区别

答：

• 容量：cookie只有4kb，localStorage和sessionStorage最大容量5M
• 服务器通信：cookie用于客户端与服务器端的通信
• 有效时间：cookie在设置的有效时间过期前都存在，sessionStorage关闭当前页面就清理，localStorage除非主动删除否则一直存在
• api易用性：cookie的api需要自己封装才能使用，localStorage.setItem(key,value);localStorage.getItem(key)

有几种方式可以实现存储功能？

cookie,sessionStorage,localStorage,indexDB。

indexDB不限存储大小，不与服务器端通信，除非主动删除否则一直存在。

什么是Service Worker？

Service Worker是运行在浏览器背后的独立线程，一般可以用来实现缓存功能，传输协议必须为https

Server Worker的工作？

• 与缓存进行交互，当用户请求缓存中的东西时，Service Worker能立刻从缓存中获取数据不通过外部http调用
• 发送推送通知
• 运行背景同步：在离线的情况下用浏览器发送一个文件，Service Worker可以保存此任务，等网络连接恢复后将文件上传至外部服务器