JSWebAPI

1. 常说的JS（浏览器执行的JS）包含两部分：

• JS基础知识（ECMA262标准）
• JS-Web-API（W3C标准）

2. DOM节点的attr和property有什么区别

• property是一个JS对象的属性的修改和获取
• attribute是对html标签属性的修改和获取

3. 简述事件冒泡流程

• 因为DOM是树形结构
• 事件按照树形往上冒泡
• 阻止冒泡，防止父级标签触发事件
• 冒泡的应用-代理，缓解浏览器压力，不用每个标签都设置一个事件监听

4. 手动编写一个ajax，不依赖第三方库

/**
 * readyState状态码
 * 0 - (未初始化)还没有调用send()方法
 * 1 - (载入)已调用send()方法，正在发送请求
 * 2 - (载入完成)send()方法执行完成，已经接收到全部响应内容
 * 3 - (交互)正在解析响应内容
 * 4 - (完成)响应内容解析完成，可以在客户端调用
 *
 * status状态码
 * 2xx - 表示成功处理请求。如200
 * 3xx - 需要重定向，浏览器直接跳转
 * 4xx - 客户端请求错误，如404
 * 5xx - 服务器端错误
*/
var xhr = new XMLHttpRequest();
xhr.open("GET", "/api", false);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null);

5. 跨域

浏览器有同源策略，不允许ajax访问其他域接口
ajax跨域只与后台有关系，后台可以设置响应头告诉浏览器是同源，前台无法让浏览器取消掉同源策略这种安全措施
跨域条件：协议、域名、端口，有一个不同就算跨域
可以跨域的三个标签<img><link><script>
<img src=xxx>用于打点统计，统计网站可能是其他域
<link hre=xxxf><script src=xxx>可以使用CDN，CDN的也是其他域
<script src=xxx>可以用于JSOP

6. 跨域注意事项

• 所有的跨域请求都必须经过信息提供方允许
• 如果未经允许即可获取，那是浏览器同源策略出现漏洞

7. JSONP实现跨域

<script>
    window.callback = function (data) {
        // 这是跨域得到的信息
        console.log(data);
    }
</script>
<script src="https://www.xxx.com/apijs"></script>
<!-- 返回callback({x:100, y:200}) -->

8. 服务器端设置http header实现跨域

• 一个解决跨域的简洁方法，需要服务器端来做
• 服务器端读取请求头的origin属性，设置响应头access-control-allow-origin
• 是将来解决跨域问题的一个趋势

9. cookie，sessionStorage和localStorage的区别

cookie本身