JS-Web-API(下)

编写一个通用的事件监听函数

function bindEvent(elem,type,selector,fn) {
   if (fn == null) {
    fn = selector
    seletor = null
  }
  elem.addEventListener(type,function(e) {
       var   target
       if ( selector) {
      target = e.target
      if (target.matches (selector)){
            fn.call(target,e)
       }
      }else {
        fn(e)
   }
 })
}

描述事件冒泡流程

DOM树形结构
事件冒泡
阻止冒泡
冒泡的应用

对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

使用代理
知道代理的两个优点

通用事件绑定

var   btn = document.getElementById(“btn1”)
btn.addEventListener("click",function (event){
                   console.log('clicked')
} )


function  bindEvent(elem,type,fn) {
  elem.addEventListener(type,fn)
}
var  a = document.getElementById("link1")
bindEvent(a,"click",function (e) {
   e.preventDefault()  //阻止默认行为
   alert("clicked")

})

XMLHttpRequest

var   xhr  =  new   XMLHttpRequest()
xhr.open("GET","/api",false)
xhr.onreadystatechange = function () {
     // 这里的函数异步可以参考之前JS基础中的异步模块
     if (xhr.readyState == 4) {
         if(xhr.status == 200) {
            alert(xhr.responseText)
      }
  }
}

xhr.send(null)

readyState

1 0:(未初始化)还没有调用send（）方法
2:1（载入）已调用send（）方法，正在发送请求
3:2（载入完成）send（）方法执行完毕，已经接收到全部响应内容
4:3（交互）正在解析响应内容
5:4（完成）响应内容解析完成，可以在客户端调用了

Status

2xx:表示成功处理请求，如200
3xx:需要重定向，浏览器直接跳转
4xx:客户端请求错误，如404
5xx:服务端错误

什么是跨越？

1 浏览器有同源策略，不允许ajax访问其他域接口
2 跨域条件：协议，域名，端口，有一个不同就算跨域

可以跨域的三个标签

1: img
2: link
3: script

三个标签的使用场景

img：用于打点统计，统计网站可能是其他域
link,script：可以使用CDN,CDN的也是其他域
script：可以用于JSONP

跨域注意事项

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

JSONP实现原理

1 加载http://coding.m.imooc.com/classindex.html
2 不一定服务器真正有一个classindexhtml文件
3 服务器可以根据请求，动态生成一个文件，返回


1 例如 你的网站要跨域访问慕课网的一个接口
2 慕课给你一个地址 http://coding.m.imooc.com/api,js
3 返回内容格式如：callback（{x:100,y:200}）(可动态生成)

<script>
window.callback = function (data){
             //这是我们跨域得到的信息
             console.log(data)
}
</script>

<script src = "http://coding.m.imooc.com/api.js"></script>
//以上将返回callback（{x:100,y:200}）

跨域的几种实现方式

1 'JSONP
2 服务器端设置http header

请描述cookie,sessionStorage和localStorage之间的区别？

1 容量
2 是否会携带到ajax中
3 API易用性

共同点：都是保存在浏览器端，且同源的。

区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

cookie 用于存储的缺点

1 存储量太小，只有4KB
2 所有http请求都带着，会影响获取资源的效率
3 API简单，需要封装才能使用document.cookie = …

sessionStorage和localStorage

1 HTML5专门为存储而设计，最大容量5M
2 API简单容易用：
3 localStorage.setItem(key,value);localStorage.getItem(key);