:::info 这个现在用的很多，简单说就是网页不需要刷新请求数据，依赖的是浏览器提供的 XMLHttpRequest 对象，javascript写法很啰嗦，不过现在jq给他封装了，vue还推出aioxs,还有fetch,各种用起来简洁的，项目开发中不要么没事找罪遭，这里记录一些知识点 :::

常规写法

  1. // 封装
  2. var request = new XMLHttpRequest()
  4. request.onreadystatechange = function () { // 回调
  5.  if (request.readyState === 4) { // 成功
  6.   if (request.status == 200) { 
  7.    console.log(request.responseText) // 服务器响应内容
  8.   } else {
  9.    console.log(request.status)
  10.   }
  11.  }
  12. }
  14. // GET 请求
  15. request.open('GET','https://www.jmjc.tech')
  16. request.send()
  18. // POST 请求
  19. request.open('POST','https://www.jmjc.tech')
  20. request.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
  21. request.send('key=value') // 参数

跨域

同源策略

浏览器对 XMLHttpRequest 对象的 HTTP 请求，是有范围限制的，这项规定被称为 同源策略。总共有 3条 限制。
1. 域名相同 在 www.jmjc.tech 的页面下请求 jmjc.tech 服务器的内容，是不允许的。
2. 协议相同 https 和 http 也是两个不同的范围区域。
3. 端口相同 默认是 80 端口。

方法

由于浏览器为了安全规定了 同源策略，绕过同源策略的限制，通常有以下几种办法。
1. flash
2. 在同源域名假设一个代理服务器
3. cors
4. jsonp

CORS

CORS 是一种 白名单机制，CORS 的请求成功与否取决于服务器是否同意当前域的请求，通过在服务器设置允许当前域名请求做到 跨域访问。
在服务器的响应头部标示 Access-Control-Allow-Origin：当前域名 or * 。

JSONP

JSONP 的跨域访问是利用了 script 文件的加载，所有只能支持 GET请求，返回过来的是一个 JavaScript 文件。