ajax | note

# ajax

# XMLHttpRequest

// get 请求
const xhr = new XMLHttpRequest()
// get 请求，第二个参数为 url，第三个是否为异步操作 false 代表是同步，true 代表异步
xhr.open('GET', '/example/data/test.json', true)
// 监听请求状态是否发生变化
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText))
    } else {
      console.log('er')
    }
  }
}
// 参数为要发送请求的数据
xhr.send(null)

// post 请求
const xhrPost = new XMLHttpRequest()
// get 请求，第二个参数为 url，第三个是否为异步操作 false 代表是异步
xhrPost.open('POST', '/example/login', true)
// 监听请求状态是否发生变化
xhrPost.onreadystatechange = function () {
  if (xhrPost.readyState === 4) {
    if (xhrPost.status === 200) {
      console.log(JSON.parse(xhrPost.responseText))
    } else {
      console.log('er')
    }
  }
}
// 参数为要发送请求的数据
const postData = {
  userName: 'jie',
  passWord: '123'
}
xhrPost.send(JSON.stringify(postData))

# 状态码

# xhr.readyState

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

# xhr.state

2xx: 表示成功处理请求，如 200
3xx: 需要重定向，浏览器直接跳转，如 301（永久重定向），302（临时重定向）, 304（资源位置未改变返回缓存的资源）
4xx: 客户端请求错误，如 404（请求地址不存在），403 （请求的地址无权限）
5xx: 服务器端报错

# 跨域：同源策略，跨域解决方案

# 同源策略

ajax 请求时，浏览器要求当前网页和 server 必须同源（安全）
同源：协议、域名、端口，三者必须一致
加载图片 css js 可以无视同源策略（img 可用于统计打点，可使用第三方统计服务，link script 可使用 CDN，CDN 一般都是外域，script 可实现 JSONP）

# 跨域

所有的跨域，都必须经过 server 端允许和配合
未经过 server 端允许就实现跨域，说明浏览器有漏洞，危险信号

# JSONP

script 可绕过跨域限制
服务器可以任意动态拼接数据返回
script 可以获得跨域的数据，只要服务器愿意返回

如下代码：

  <script>
    window.callback = function (data) {
      console.log(data)
    }
  </script>
  <script src="http://localhost:8080/example/data/jsonp.js"></script>

// jsonp.js
callback({
  name: 'jiegiser'
})

这样就可以实现跨域，或者我们在请求的时候可以添加参数，http://localhost:8080/example/data/jsonp.js?username=gi&callback=abc 这样，我们可以传递参数 username，后台还可以根据前端传递获取的参数 callback 去拼接返回的函数去执行。

# CORS - 服务器设置 http header

// 第二个参数填写允许跨域的域名称，不建议直接写 "*"
response.setHeader("Access-Control-Allow-Origin", "http://localhost:8011")
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With")
response.setHeader("Access-Control-Allow-Methods", "PUT,POST,F,GET,DELETE,OPTIONS")

// 接收跨域的 cookie
response.setHeader("Access-Control-Allow-Credentials", "true")

# 问题

# 手写 ajax

function ajax(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(
            JSON.parse(xhr.responseText)
          )
        } else if (xhr.status === 404) {
          reject(new Error('not found'))
        }
      }
    }
    xhr.send()
  })
}

# Fetch

缺点：

只对网路请求报错，对 400，500 都当做成功的请求
默认不会带 cookie
不支持 abort，不支持超时控制
没有办法原生检测请求的进度

# git

有时候我们忘记切换分支，在 master 上直接做了修改，而且做了很多，不可能使用 git checkout . 来撤销所有的修改，可以在 master 使用 git stash 就是将我们修改的文件放在一边，不会影响 master 上的内容，不过，新增的文件还是会显示在 master上。然后我们切换分支，执行 git stash pop 将刚刚修改的拿出来放在分支上。

阅读量：