web apis

BOM

• navigator 查询浏览器信息
  • window.navigator.userAgent ：通过userAgent可以判断用户浏览器的类型
  • window.navigator.platform：通过platform可以判断浏览器所在的系统平台类型
  • window.navigator.online：判断是否联网

const ua = navigator.userAgent
const isChrome = ua.indexOf('Chrome')

• screen 查询设备的信息
  • screen.height、screen.width：返回设备的分辨率
  • screen.availWidth、screen.availHeight：返回屏幕可用宽高

console.log(screen.width)
console.log(screen.height)

• location 当前文档信息
  • location.href ：当前页面完整的URL ，可跳转新页面
  • location.hash ：URL中的hash（#号后跟零或多个字符）
  • location.host ：服务器名称和端口号
  • location.port ：服务器端口号
  • location.pathname ：路径，URL中的目录和文件名
  • location.hostname ：不带端口号的服务器名称
  • location.protocol ：协议（http://或https://)
  • location.search ：URL的查询字符串，以问号开头

console.log(location.href)

• history
  • history.back() ：后退
  • history.forward() ：前进
  • history.go(参数)：前进 / 后退 ~ 取决正数和负数
  • history.length(): 保存历史记录的数量

---

事件

• event.target：事件触发元素
• event.target.matches：是否符合HMTL元素 event.target.matches(event.target.nodeName)
• event.target.nodeName：做事件代理（如瀑布流），减少浏览器内存占用
• event.preventDefault()：阻止默认行为

function bindEvent(elem, type, fn) {
  elem.addEventListener(type, fn)
}
bindEvent(document.getElementById('btn'), 'click', event => {
  console.log('click')
})

---

AJAX

• readyState
  • UNSET 未调用 open
  • OPENDE open 已调用
  • HEADERS_RECEIVED send 方法调用，header 已被接受
  • LOADING 下载中
  • DONE 下载完成

const xhr = new XMLHttpRequest() // 初始化实例
xhr.open('GET', '/test.json', false) // false 异步请求
// 监听变化
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText))
    } else {
      throw new Error('error...')
    }
  }
}
xhr.send()

---

同源策略

• ajax 请求时，浏览器要求当前网页和服务端必须同源（协议、域名、端口三者必须一致）
• 跨域：两个不同域名，同域名不同端口，主域和次域，同域名协议不同
• scirpt 可绕过跨域限制，实现JSONP，服务端可任意返回动态拼接数据，返回scitpt可以获得跨域数据
• 无视同源策略：图片img标签src（img可用于统计打点，使用第三方统计服务）、link标签href、script脚本src都可以跨域

---

Cookie webStorage

• cookie 本身用于浏览器和server通讯，被借用本地储存
• cookie 最大储存不超过4K、webStorage上限5M
• cookie在http请求中携带、webStorage不会自动发送
• SessionStorage 存在于当前会话，浏览器关闭则清空、localStorage 始终有效；

---

预防XSS攻击

• 使用&lt代替<、&gt代替>
• &ltsript&gt console.log(document.cookie) &ltscript&gt，等同于以下

<script>
	console.log(document.cookie)
</script>

---

XSRF 跨站请求伪造

使用 post接口、增加验证、例如密码、短信、指纹